Question posted in
You can find the official documentation here.

AJAX not calling PHP file – Jquery ajax

I have a contact us form and I’m trying to send the form data to an email address via AJAX and PHP. The submit function is being fired successfully and I receive the alert("success!");. However it seems the form-process.php file is never executed – I never receive the echo "I have got this far"; and I certainly don’t receive an email. Where am I going wrong?

For info I have a staging site setup so the files are already hosted on the server.

HTML

<div class="modal" id="contactModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Contact Us</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <div class="modal-body">
        <form action="form-process.php" method="POST" id="contact-form" role="form">
          <div class="form-group">
            <input type="text" class="form-control my-2" name="name" placeholder="Full Name" />
            <input type="email" class="form-control my-2" name="email" placeholder="Email Address" />
            <textarea type="text" class="form-control my-2" name="message" rows="4" name="message" placeholder="Write your message here..."></textarea>
          </div>
          <input type="submit" name="submit" value="Submit" id="submit" class="btn btn-primary" form="contact-form"></input>
        </form>
      </div>

      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>

JQUERY

$(document).ready(function() {
  $('#contact-form').submit(function(event) {
    console.log('this has fired');

    var formData = {
        'name'              : $('input[id=name]').val(),
        'email'             : $('input[id=email]').val(),
        'message'           : $('input[id=message]').val()
    };

    event.preventDefault();
    $.ajax({
        type: "POST",
        url: "form-process.php",
        data: formData,
        success: function(msg){
            $("#contact-modal").modal('hide');
            alert("success!");
        },
        error: function(){
            alert("form post failed");
        }
    });
  });
});

PHP

<?php
$myemail = '<myemailaddress>';
if (isset($_POST['name'])) {
    $name = strip_tags($_POST['name']);
    $email = strip_tags($_POST['email']);
    $company = strip_tags($_POST['company']);

    echo "I have got this far";

    $to = $myemail;
    $email_subject = "Contact form submission: $name";
    $email_body = "You have received a new message. ".
        " Here are the details:n Name: $name n ".
        "Email: $emailn Company n $company";
    $headers = "From: $myemailn";
    $headers .= "Reply-To: $email";
    mail($to,$email_subject,$email_body,$headers);
}
?>
Tags:

2

Answers


  1. 0

    You’re using the following to get the values of the input fields:

    $('input[id=name]').val(),
$('input[id=email]').val(),
$('input[id=message]').val()

    But none of your inputs has an id field:

    <input type="text" class="form-control my-2" name="name" placeholder="Full Name" />
<input type="email" class="form-control my-2" name="email" placeholder="Email Address" />
<textarea type="text" class="form-control my-2" name="message" rows="4" name="message" placeholder="Write your message here..."></textarea>
      </div>

    So you can use this to get those values:

    $(input[name="name"]).val();
$(input[name="email"]).val();
$(input[name="message"]).val();
    Login or Signup to reply.
  2. 0

    All three of your formData subobjects are empty – those three input selectors with ids simply don’t exist, so isset($_POST['name']) is always false.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search