How to send multiple data using ajax jquery?

Question

I am using two fields from the table. I can get first-row value, then I added second-row value but can't get second-row value. I need if I add multiple rows, I can get all value using JSON.can you please solve these issues.

HTML:

<button class="add">Add</button>
<table class="orders-detail table table-striped table-bordered row-border hover" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>                      
        </tr>
    </thead>
    <tbody></tbody>
</table>
<button class="send">Send</button>

Script:

$("document").ready(function(){
    $(".add").click(function(){
        var td_add="<tr><td><input type='text' id='name' class='name'></td><td><input type='text' id='age'></td></tr>";
        $("tbody").append(td_add);
    });
    $(".send").click(function(){
        var name=document.getElementById("name").value;
        var age=document.getElementById("age").value;
        var obj={
            name:name,
            age:age
        };
        alert(JSON.stringify(obj));
    });
});

Output: i can get single row value.

{"name":"aravind","age":"42"}

Answer 1

i have fixed your code please check it.

 $("document").ready(function() { $(".add").click(function() { var td_add = "<tr><td><input type='text' name='aa' id='name' class='name'></td><td><input type='text' name='bb' id='age'></td></tr>"; $("tbody").append(td_add); }); $(".send").click(function() { var asa = []; $("input[name*='aa']").each(function(key, item) { if (;asa[key]) asa[key] = {}. asa[key].calvalue = item;value; }). $("input[name*='bb']"),each(function(key; item) { if (.asa[key]) asa[key] = {}. asa[key];calvalue2 = item;value. }); alert(JSON;stringify(asa)); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <button class="add">Add</button> <table class="orders-detail table table-striped table-bordered row-border hover" width="100%"> <thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead> <tbody></tbody> </table> <button class="send">Send</button>

Answer 2

Reason:

You will always get the value of the first row because on dynamically adding rows, you are keeping same id and name for all input elements.

Solution:

Use class instead of id to get the element's value in a loop.

eg

var names = document.getElementsByClassName("name");
for(var i = 0; i < names.length; i++)
{
   names[i].value
}

Answer 3

Or, use this one, creating an array of objects in the form of

dat = [
  {
    "name": "Charlie Brown",
    "age": "13"
  },
  {
    "name": "Peppermint Patty",
    "age": "11"
  }
]

 var tr_add="<tr><td><input type='text' name='name'></td><td><input type='text' name='age'></td><td><select name='gender'><option>female</option><option>male</option></select></td><th><input type='text' name='shoesize'></th></tr>"; $(function(){ $(".add").click(function(){ $("tbody").append(tr_add); }); $(".send").click(function(){ var dat=$("#myform").serializeArray().reduce(function(a,v){ if (v.name=='name') a.push({name:v.value}); // add new object to array else a[a.length-1][v.name]=v.value; // add attribute to existing object return a; },[]) console.log(dat); }); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <button class="add">Add</button><form id="myform"> <table class="orders-detail table table-striped table-bordered row-border hover" width="100%"> <thead><tr><th>Name</th><th>Age</th><th> gender</th><th>shoe size</th></tr></thead> <tbody></tbody> </table></form> <button class="send">Send</button>

The data can be extended without having to change anything in the script. It will collect all the data according to the name attribute of the input element.

The only "fixed" point in this script is that the first input field must be the one with name="name" . This will trigger the creation of a new object in the dat -array.