Pass var to php via ajax?

Question

I am trying to pass values to php file. I am getting alert that The form was submitted but Nothing is displaying in php file. I checked the js variables and they are displaying correctly. This is my HTML form.

                         <form name="sentMessage"role="form" data-toggle="validator" id="ContactForm" onsubmit="myFunction()">
                                <div class="form-group has-feedback">
                                    <input type="text" pattern="^[_A-z ]{1,}$" class="form-control" placeholder="Your Name *" name="name" id="Username"
                                    data-error="Plese enter your name" required>
                                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                                    <span class="help-block with-errors"></span>

                                </div>

                                <div class="form-group has-feedback">
                                    <input type="email" class="form-control" placeholder="Your Email *" name="email" id="Useremail" required data-validation-required-message="Please enter your email address.">
                                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                                    <span class="help-block with-errors"></span>

                                </div>
                                <div class="form-group has-feedback">
                                    <input type="tel" pattern="^[_0-9 ]{1,}$" class="form-control" placeholder="Your Phone *" name="phone" id="Userphone" required data-validation-required-message="Please enter your phone number.">
                                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                                    <span class="help-block with-errors"></span>
                                </div>
                                <div class="form-group">
                                    <textarea class="form-control" placeholder="Your Message *" name="message" id="Usermesage" required data-validation-required-message="Please enter a message."></textarea>

                                    <p class="help-block text-danger"></p>
                                    <label class="light">
                                </div>


                                <button type="submit" class="btn btn-xl btn-success">
                                    Send Message
                                </button>
                        </div>
                        </form>

 <script>
            function myFunction() {
                var name = document.getElementById("Username").value;
                var email = document.getElementById("Useremail").value;
                var phone = document.getElementById("Userphone").value;
                var message = document.getElementById("Usermesage").value;

                $.ajax({
                  type: 'POST',
                  url: 'mailer.php',
                  data: {'name': name, 'email':email,'phone':phone,'message':message},
                  success: function(){
                  alert("The form was submitted");
                }
                });


            }
    </script>

PHP file mailer.php

<?php
if($_POST){
echo $name = $_POST['name'];
echo $email = $_POST['email'];
echo $phone = $_POST['phone'];
echo $message = $_POST['message'];


}

?>

Nothing is displaying in php file. Thank you

Answer 1

Two thoughts - are you submitting the form via normal form submit and then trying to submit the same form via the AJAX call. This would give no values to the AJAX call because they have already been submitted - you may need to prevent the normal form submission - there are plenty of answers in here related to that which will help you prevent the form submitting until the AJAX function.

Second - I would go so far as to remove the submit button from inside the form, give it a type = "button" attribute and combine the onclick event handler and ajax call (note that I am using the serialize() method to gather all the relevant data from the form without specifically getting each inputs' value and am :-

//html
    <button id="submitFormButton" type="button" class="btn btn-primary">Submit</button>

//js
$('#submitFormButton').click(function(){
    var formData = $('#contactForm').serialize();
    var URL = 'mailer.php';
      $.post(URL, formData,function( data ) {
       //function to perfrom on the returned data
      });
 });