Sending form data to PHP file via AJAX

Question

I've been trying for a few hours already, and I don't know what else to try. I looked at dozens of questions around here, but they're overly-complicated or I don't understand them. Doesn't help that my experience with javascript/jquery dates to a few days ago. Anyways, here's my form:

<form onsubmit="onSubmit(this)">
    <input type="text" name="input1"/><br/>
    <input type="text" name="input2"/><br/>
</form>

And my script:

function onSubmit( form ){
    var jsondate = JSON.stringify( $(form).serializeArray() );
    console.log( jsondate );
    alert(jsondate);
    $.ajax({
        type: "POST",
        url: "json.php",
        data: jsondate,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data){
            alert(jsondate);
        },
        failure: function(errMsg) {
            alert(errMsg);
        }
    });
}

And my json.php file:

<?php
if (isset($_POST['jsondate'])) {
    echo "whatever";
}

The thing is, I get the alert with the json string, but when it redirects me to json.php (using action="json.php" on the form), or I stay on the page, it doesn't show anything, so I guess it's something inside $.ajax({...})

Any explanation about how to make it work, how it works and why would be REALLY helpful!

Answer 1

You will need a way to get the value from the elements.. In this example I'll use the ID on the HTML and get using it in the javascript

HTML:

<form onsubmit="onSubmit(this)">
    <input type="text" id="ID1"><br/>
    <input type="text" id="ID2"><br/>
</form>

JavaScript:

var v1 = $("#ID1").val(); // Get de value using the Ids
var v2 = $("#ID2").val();
$.ajax({
  method: "POST",
  url: "json.php", // add the page here
  data: { name: v1, location: v2 } // put the data here (Will get this data using POST)
})
  .done(function( msg ) {
    alert( "Data Saved: " + msg ); // if it works this alert will appear
});

Answer 2

Two problems: you didn't give names to your form elements and you don't stop the form from submitting.

Here's a solution making use as much of jQuery.

First, for convenience, give an ID to your form.

Second, required, give names to your form fields.

<form id="form1">
    <input type="text" name="input1"><br/>
    <input type="text" name="input2"><br/>
</form>

Third, attach an onsubmit event handler using .submit(handler) to your form.

$('#form1').submit(function (e) {
    // prevent the form from submitting/reloading (by default)
    e.preventDefault();
    //
    $.ajax({
        type: "POST",
        url: "json.php",
        data: $(this).serializeArray(),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data){
            alert(jsondate);
        },
        failure: function(errMsg) {
            alert(errMsg);
        }
    });
});

Fourth, in your json.php, you would access the fields

echo $_POST['input1'];
echo $_POST['input2'];