CODEWITHSUNDEEP
phpjqueryhtmlajax
Jacob
Jacob

Reputation: 3

POST not working with "preventDefault" or "return false"

I have searched through the amazing answers offered on similar subjects, but I just can't seem to find one that answers my question.

I am trying to POST data to a separate PHP page via AJAX to send an email without the page reloading. However, I can either get the data to POST and have the page reloaded, or the form POSTs nothing and the page remains exactly as it was. The following example is of the latter scenario.

I'm not sure if this is relevant, but the form is contained within a modal. I can post it if necessary.

jQuery:

$("#submit").click(function(e) {

        e.preventDefault();

        $.ajax({

            method: "POST",
            url: "email.php",
            data: {

                name: $("#name").val(),
                email: $("#returnEmail").val(),
                subject: $("#subject").val(),
                body: $("#body").val(),

            },
            dataType: "html",
            success: function() {

                $("#errorSuccess").html('<div class="alert alert-success" role="alert">Email Sent!</div>');

            }

        });

    });

Thanks in advance!

Upvotes: 0

Views: 107

Answers (1)

edd2110
edd2110

Reputation: 324

you're appending data in a wrong way.

When you post something in ajax to a php (And then you read it there with $_POST["name"]) PHP recieves it as url encoded data (?name=value&name=value).

So, here are a few solutions:

  1. Identify your form element with some id (id="myform") and then retrieve the values you're needing with serialize() method. Like this: 

            method: "POST",
        url: "email.php",
        data: $("#myform").serialize(),

  2. You can append it to a Javascript Array like this: 

    var form_data = {};

form_data["name"] = $("#name").val(); 
form_data["email"] = $("#email").val();

    And then you can send it as regular data in Ajax parameters, 

    data:form_data,

  3. Use the FormData object. And append data from your form - FormData is recommended when you're appending data and files in the same form . 

    var form_data = new FormData();
form_data.append("name", $("#name").val());
form_data.append("email", $("#email").val());

    Or even easier, again with an ID in the form: 

    var form = document.getElementById('myform');
var form_data = new FormData(form);

    and for sending, you use this in your ajax parameters: 

       data: form_data,
   processData: false,
   contentType: false

    *processData and contentType are very important, if they're not present, it will throw an error (Illegal invocation if I remember right)

  4. Add it manually to a string (ugly and not recommended way). But it shows you how does it work (you know, just for curiosity)... 

     data: '?name='+$("#name").val()+'&email='+$("#email").val()

Success and error in your ajax would be great. Don't forget to set a response in your PHP, seeing that PHP would be great for helping you.

Hope it helps :)

Upvotes: 1

Related Questions