Get all input value in a array from a jquery dynamic table

Question

I have created a dynamic table using jquery as follows:

$.ajax({
        data     : data,
        type     : "get",
        url      : url,
        dataType : "json",
        error    : function(resp){
                    alert("Error !!");
        },              
        success  : function(resp){
                    table = '';
                    $.each(resp,function(indx,obj){ 
                    table += '<tr>';
                    table += '<td>'+parseInt(indx+1)+'</td>';
                    table += '<td>'+'<input type="text" value="'+obj.ServiceDetail.service_code+'">'+'</td>';
                    table += '<td>'+'<input type="text" value="'+obj.ServiceDetail.name+'">'+'</td>';
                    table += '<td>'+'<input type="text" value="'+obj.ServicePrice.discount_price+'">'+'</td>';
                    table += '</tr>';                                           
                    });
                    $("tbody#sevice_table_body").append(table);
        }    
});

and a button :

 <input type="button" class = "btn btn-success btn-sm" value="submit" >

now i want to get all input value in a array by click submit button so that can be inserted in a database table using jquery ajax.

And what is the problem? If you wrap them in a form, you can serialize the form on submit — mplungjan
– mplungjan, Commented Aug 29, 2017 at 8:11
Yes $("#formID").on("submit",function(e) { e.preventDefault(): $.ajax( .... data: $(this).serialize() .... } ) — mplungjan
– mplungjan, Commented Aug 29, 2017 at 8:19

Dekron · Accepted Answer · 2017-08-29 08:14:46Z

1

You can use this code for cycling the input and add them to an array

var arrayOfVar = []
$.each($("input[type='text']"),function(indx,obj){
    arrayOfVar.push($(obj).val());
});

answered Aug 29, 2017 at 8:14

Dekron

1,2129 silver badges27 bronze badges

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

Comments

Curiousdev · Accepted Answer · 2017-08-29 08:26:29Z

You can use .serializeArray() it Encode elements as an array of names and values.

Find below fiddle for more info

$(function() {
  var data = $("#tbl2 :input").serializeArray(); // For converting it to array
  //If needed below code is converting it to object
  var obj = {};
  for (var i = 0, l = data.length; i < l; i++) {
    obj[data[i].name] = data[i].value;
  }
  console.log(data); // Print Array in Console
  console.log(obj);// Print Object in Console
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl2">
  <tr>
    <td>
      <input type="text" name="tb3" value="1" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="tb4" value="2" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="tb5" value="3" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="tb6" value="4" />
    </td>
  </tr>
</table>

Lomesh Kelwadkar · Accepted Answer · 2017-08-29 08:14:19Z

Add attribute name with name and array .

$.ajax({
            data     : data,
            type     : "get",
            url      : url,
            dataType : "json",
            error    : function(resp){
                        alert("Error !!");
            },              
            success  : function(resp){
                        table = '';
                        $.each(resp,function(indx,obj){ 
                        table += '<tr>';
                        table += '<td>'+parseInt(indx+1)+'</td>';
                        table += '<td>'+'<input type="text" name="service_code[]" value="'+obj.ServiceDetail.service_code+'">'+'</td>';
                        table += '<td>'+'<input type="text" name="name[]"  value="'+obj.ServiceDetail.name+'">'+'</td>';
                        table += '<td>'+'<input type="text" name="discount_price[]"  value="'+obj.ServicePrice.discount_price+'">'+'</td>';
                        table += '</tr>';                                           
                        });
                        $("tbody#sevice_table_body").append(table);
            }    
    });

Shiladitya · Accepted Answer · 2017-08-29 08:17:16Z

0

Here you go with a solution

var inputData = [];

$('button[value="submit"]').click(function(){
  $('input[type="text"]).each(function(){
    inputData.push($(this).val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Hope this will help you.

answered Aug 29, 2017 at 8:17

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

Comments

Jomoos · Accepted Answer · 2017-08-29 08:18:18Z

In your table section, add name attribute like this:

$.each(resp,function(indx,obj){ 
    table += '<tr>';
    table += '<td>'+parseInt(indx+1)+'</td>';
    table += '<td>'+'<input name="services[' + indx + '][code]" type="text" value="'+obj.ServiceDetail.service_code+'">'+'</td>';
    table += '<td>'+'<input name="services[' + indx + '][name]" type="text" value="'+obj.ServiceDetail.name+'">'+'</td>';
    table += '<td>'+'<input name="services[' + indx + '][price]" type="text" name="service[' + indx + '][price]" value="'+obj.ServicePrice.discount_price+'">'+'</td>';
    table += '</tr>';                                           
});

This will produce names like services[0][code], services[0][name], etc.,

Now you can access the input values as an array in PHP:

$services = $_POST['services'];
foreach ($services as $index => $service) {
    $code  = $service['code'];
    $name  = $service['name'];
    $price = $service['price'];

    echo "$index : $code, $name, $price \n";
}

Collectives™ on Stack Overflow

Get all input value in a array from a jquery dynamic table

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related