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

try adding var_dump($_POST); on the first line of mailer.php. Also can you show the html for the form fields? — phpchap
– phpchap, Commented Sep 18, 2016 at 21:32
When you use AJAX, the output isn't displayed automatically. It's returned as the argument to the success: function, and that function needs to display it. — Barmar
– Barmar, Commented Sep 18, 2016 at 21:43

gavgrif · Accepted Answer · 2016-09-18 21:56:40Z

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
      });
 });

edited Sep 18, 2016 at 21:56

answered Sep 18, 2016 at 21:39

gavgrif

15.5k2 gold badges30 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Halfpint Over a year ago

you do know that echo $name = $_POST['name']; is perfectly valid syntax. The assignment expression still happens on the rhs and then the resulting expression is echoed, you can then still do echo $name afterward if you want to.

gavgrif Over a year ago

Thanks @Alex - I did not realise that - will amend my answer - thanks.

Halfpint Over a year ago

Thanks, just wanted to point that out before people think it really is invalid syntax :)

Collectives™ on Stack Overflow

Pass var to php via ajax?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related