maw2be maw2be - 5 months ago 6
jQuery Question

Newbe: ajax form not working

I'm new in ajax/js/php.
I have a small contact form

<form id="contact-form" method="post" action="process.php" role="form">
<div class="messages"></div>
<div class="form-group">
<label for="form_name">First name *</label>
<input id="form_firstname" type="text" name="name" class="form-control" placeholder="Please enter your first name *" required="required" data-error="Firstname is required.">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="form_lastname">Last name *</label>
<input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your last name *" required="required" data-error="Lastname is required.">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone">
<div class="help-block with-errors"></div>
</div>
<p><strong>*</strong> These fields are required.</p>
</form>
<button type="submit" class="btn btn-info" value="Create Account">Create Account</button>


with small js and php

script.js

$("#contact-form").submit(function(event) {
// cancels the form submission
"use strict";
event.preventDefault();
submitForm();
});

function submitForm() {
// Initiate Variables With Form Content
"use strict";
var firstname = $("#form_firstname").val();
var lastname = $("#form_lastname").val();
var email = $("#email").val();
var phone = $("#phone").val();

$.ajax({
type: "POST",
url: "process.php",
data: "name=" + firstname + lastname + "&email=" + email + "&phone=" + phone,
});
}


process.php

<?php
$name = $_POST["name"];
$email = $_POST["email"];
$phone = $_POST["phone"];

$EmailTo = "name@email.com";
$Subject = "New Message Received";

// prepare email body text
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";

$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";

$Body .= "Phone: ";
$Body .= $phone;
$Body .= "\n";

// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);

// redirect to success page
if ($success){
echo "success";
} else {
echo "invalid";
}
?>


for some reason it's not working on way I would like to, not sending me emails (i know to put my email in $Emailto).
Often I was using only php form but I would like to avoid reloading page. I try to understand where I'm making error.

Answer
$('#contact-form').submit(function(e){
 e.preventDefault();
 $.ajax({
  type: "POST",
  url: "process.php",
  data:$(this).serialize(), //get form values
 }).done(function(data){
  console.log(data);  // will contain success or invalid 
 });
});
Comments