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"}

Amit · Accepted Answer · 2019-10-18 14:10:54Z

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>

Vishal Patidar · Accepted Answer · 2019-10-18 11:04:01Z

0

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.

e.g

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

answered Oct 18, 2019 at 11:04

Vishal Patidar

11 bronze badge

Comments

Carsten Massmann · Accepted Answer · 2019-10-18 14:18:40Z

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.

Collectives™ on Stack Overflow

How to send multiple data using ajax jquery?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related