How to send similar data in array using JSON and AJAX Post Method using jQuery

Question

HTML CODE

<form id="details">
  <div>
    <input type="text" placeholder="Email ID" id="email"></input>
    <input type="text" placeholder="Mobile Number" id="mobile"></input>
</div>
<h5>Data</h5>
<div>
    <div>
        <input type="text" placeholder="Name" id="name1"></input>
        <input type="text" placeholder="Age" id="age1"></input>
    </div>
    <div>
        <input type="text" placeholder="Name" id="name2"></input>
        <input type="text" placeholder="Age" id="age2"></input>
    </div>
</div>
</form>

JS CODE

$(document).ready(function() {
    $("form").on('submit', function(e) {
        // Prepare data
        var form = $("form");
        var formData = new FormData(document.getElementById("details"));
        e.preventDefault();
        $.ajax(form.attr('action'), {
            type: 'POST',
            data: formData,
            contentType: false,
            cache: false,
            processData:false,
            dataType: "json",
            success: function(result) {
                // Success Code
            },
            error: function(result) {
                // Failure Code
            },
            timeout: 5000,
        });
    });
});

The codepen link for my code is http://codepen.io/anon/pen/VKzGRG

I want to send data like

{
    "email" : "[email protected]",
    "mobile" : "9898989898",
    "data" : [
        {
            "name":"xyz",
            "age":45
        },
        {
            "name":"xyz",
            "age":45
        }
    ]
}

I tried sending the data using jQuery.

The problem is that it's sending only one name and age.

Also, in my project, I'm dynamically adding a Name and Age box using jQuery and a button.

How can I send the data using AJAX post method using jQuery?

Codepen is not working + What is your error with your ajax call ? — Weedoze
– Weedoze, Commented Sep 30, 2016 at 8:27
I dont know how to send data using JSON in the format I mentioned — Rahul Kumar
– Rahul Kumar, Commented Sep 30, 2016 at 8:28

Ravi Shankar · Accepted Answer · 2016-09-30 08:46:08Z

you have missed the name of input that's why data is not posting see the below working code.

//HTML code

<form  name="details" action="t.php" id="details">
  <div>
    <input type="text" name="email" placeholder="Email ID" id="email"></input>
    <input type="text" name="mobile" placeholder="Mobile Number" id="mobile"></input>
</div>
<h5>Data</h5>
<div>
    <div>
        <input type="text" name="data1[]" placeholder="Name" id="name1"></input>
        <input type="text" name="data1[]" placeholder="Age" id="age1"></input>
    </div>
    <div>
        <input type="text" name="data2[]" placeholder="Name" id="name2"></input>
        <input type="text" name="data2[]" placeholder="Age" id="age2"></input>
    </div>
</div>
<input type="submit" value="send">
</form>

//ajax code

$(document).ready(function() {
    $("form").on('submit', function(e) {
        // Prepare data
        var form = $("form");
        var formData = new FormData(document.getElementById("details"));
        console.log(formData);
        e.preventDefault();
        $.ajax(form.attr('action'), {
            type: 'POST',
            data: formData,
            contentType: false,
            cache: false,
            processData:false,
            dataType: "json",
            success: function(result) {
                // Success Code
            },
            error: function(result) {
                // Failure Code
            },
            timeout: 5000,
        });
    });
});

Computer's Guy · Accepted Answer · 2016-09-30 08:50:34Z

0

To post data with jQuery and Ajax, you can do something like this

var myObj = {
    "email" : "[email protected]",
    "mobile" : "9898989898",
    "data" : [
        {
            "name":"xyz",
            "age":45
        },
        {
            "name":"xyz",
            "age":45
        }
    ]
};

$.post( "test.php", myObj)
.done(function( data ) {
    alert( "Data Loaded: " + data );
  });

That will post the data and alert the response of the request.

answered Sep 30, 2016 at 8:50

Computer's Guy

5,3638 gold badges59 silver badges77 bronze badges

Collectives™ on Stack Overflow

How to send similar data in array using JSON and AJAX Post Method using jQuery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related