Как отправить несколько данных с помощью ajax jquery?

Question

Я использую два поля из таблицы. Я могу получить значение первой строки, затем я добавил значение второй строки, но не могу получить значение второй строки. Мне нужно, если я добавлю несколько строк, я могу получить все значения, используя JSON. Можете ли вы решить эти проблемы.

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

Вывод: я могу получить значение в одну строку.

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

Answer 1

Я исправил ваш код, пожалуйста, проверьте его.

$("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

Или используйте этот, создавая массив объектов в виде

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>

Данные могут быть расширены без необходимости что-либо изменять в скрипте. Он будет собирать все данные в соответствии с атрибутом name элемента ввода.

Единственная «фиксированная» точка в этом сценарии состоит в том, что поле ввода first должно быть полем сname="name". Это приведет к созданию нового объекта в массиве dat.

Answer 3

Причина:

Вы всегда получите значение первой строки, потому что при динамическом добавлении строк вы сохраняете одинаковые идентификатор и имя для всех входных элементов.

Решение:

Используйте класс вместо id, чтобы получить значение элемента в цикле.

например

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