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!

didn't you ask a similar question earlier? stackoverflow.com/q/43366068/1415724 and received answers. — Funk Forty Niner
– Funk Forty Niner, Commented Apr 12, 2017 at 13:17
Possible duplicate of Send JSON file from jQuery to PHP without AJAX — Mazz
– Mazz, Commented Apr 12, 2017 at 13:18
Why are you doing this JSON.stringify($(form).serializeArray())? You don't need to change it to a JSON string. — Mikey
– Mikey, Commented Apr 12, 2017 at 13:19

Xidh · Accepted Answer · 2017-04-12 13:21:21Z

0

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

answered Apr 12, 2017 at 13:21

Xidh

5921 gold badge5 silver badges19 bronze badges

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

Comments

Mikey · Accepted Answer · 2017-04-12 13:39:13Z

0

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'];

edited Apr 12, 2017 at 13:39

answered Apr 12, 2017 at 13:29

Mikey

6,7564 gold badges25 silver badges49 bronze badges

3 Comments

Newwt Over a year ago

Doesn't work. It clears the inputs and doesn't display anything. By the way, what do you mean by "stop the form from submitting"?

Mikey Over a year ago

Did you include jQuery library as shown in the documentation? By default, when you submit a form, it sends the data to whatever page is in the action attribute. If there is no action attribute, it will send the data to the same page. When you send the data, it will also go to that page. We want to prevent that happening.

Newwt Over a year ago

Yes, I did. jQuery works when doing alerts with the json string and such. It's the ajax part where everything goes down.

Collectives™ on Stack Overflow

Sending form data to PHP file via AJAX

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related