CODEWITHSUNDEEP
javascriptjqueryajax
Hai Truong IT
Hai Truong IT

Reputation: 4187

How to use ajax post data from a row

<table>
 <tr data-id="1">
    <input type="text" name="name_1" value="abc">
    <input type="text" name="value_1" value="1">
    <a href="load_edit_row(this)">Edit</a>
 </tr>
 <tr data-id="2">
    <input type="text" name="name_2" value="def">
    <input type="text" name="value_2" value="2">
    <a href="load_edit_row(this)">Edit</a>
 </tr>
 <tr data-id="3">
    <input type="text" name="name_3" value="ghi">
    <input type="text" name="value_3" value="3">
    <a href="load_edit_row(this)">Edit</a>
 </tr>
</table>

function load_edit_row(input) {
   var ID = $(input).parent().attr('data-id');
   var dataString = []; 
   $("tr[data-id="+ID+"] :input").each(function(e){ 
      dataString.push(this.value);
   });
   $.ajax({
      type: 'POST',
      url: 'update-row.php',
      data: dataString,
      success: function(itemJson) {

      },
      dataType: 'json'
   });
}

Error post data key and data value, how to fix it?

Upvotes: 0

Views: 161

Answers (4)

Kevin Yan
Kevin Yan

Reputation: 1236

You can't simply send a javascript 0-indexed array to POST's Form Data and expect receive it correctly on server side.

Use JSON.stringify(dataString) formatting dataString to a json string and then assign the json string value to a named key like:

var dataString = JSON.stringify(dataString);

$.ajax({
   type: 'POST',
   url: 'update-row.php',
   data: {namedKey: dataString}
   success: function(itemJson) {

  }
});

On server side, use json_decode decode json back to array :

$data = filter_input(INPUT_POST, 'namedKey');
$dataArr = json_decode($data, true);

Upvotes: 0

KOUSIK MANDAL
KOUSIK MANDAL

Reputation: 2052

<table>
<tr id="1">
  <input type="text" name="name_1" id="1-data1" value="abc">
  <input type="text" name="value_1" id="1-data2" value="1">
  <a href="load_edit_row(1)">Edit</a>
</tr>
<tr data-id="2">
  <input type="text" name="name_2" id="2-data1" value="def">
  <input type="text" name="value_2" id="2-data2" value="2">
  <a href="load_edit_row(2)">Edit</a>
</tr>
<tr data-id="3">
  <input type="text" name="name_3" id="3-data1" value="ghi">
  <input type="text" name="value_3" id="3-data2" value="3">
  <a href="load_edit_row(3)">Edit</a>
</tr>
</table>

Now the JS:

function load_edit_row(input) {

     var dataString = []; 
     dataString.push($("#"+input+"-data1").val());
     dataString.push($("#"+input+"-data2").val());
 });

 $.ajax({
    type: 'POST',
    url: 'update-row.php',
    data: dataString,
    success: function(itemJson) {

    },
    dataType: 'json'
 });

}

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

Try something like:

function load_edit_row(input) {
   var ID = $(input).parent().attr('data-id');
   var dataString = []; 
   $("tr[data-id="+ID+"] :input").each(function(e){ 
      dataString.push(this.value);
   });
   $.ajax({
      type: 'POST',
      url: 'update-row.php',
      data: {data:dataString},
      success: function(itemJson) {

      },
      dataType: 'json'
   });
}

Upvotes: 0

Sasikumar
Sasikumar

Reputation: 863

You could use JSON.stringify(dataString) to encode your array in JavaScript, and then use $array=json_decode($_POST['string']); in your PHP script to retrieve it.

function load_edit_row(input) {
   var ID = $(input).parent().attr('data-id');
   var dataString = []; 
   $("tr[data-id="+ID+"] :input").each(function(e){ 
      dataString.push(this.value);
   });
var string = JSON.stringify(dataString);
   $.ajax({
      type: 'POST',
      url: 'update-row.php',
      data: 'string='+string,
      success: function(itemJson) {

      }
   });
}

Upvotes: 1

Related Questions