Getting multiple dynamic html element values using jquery - php

Question

I have a dynamic table which is created in server side (php), and I'm using jquery to show it in html page.
in this table there are multiple values which I want to edit them and save this edits in mysql.
but I don't know how to get this values the way that I tried is just updating the first value and is not getting other element values :
jquery code :
$('#save_edit').on('click',function() {
$('#edit_test_show').hide();
$('#enable_edit').show();
$('#save_edit').hide();
var vop_id = localStorage.getItem('op_id');
var vop_title = $('#result_table').find('[name=op_title]').val();
var vop_descrip = $('#result_table').find('[name=op_descrip]').val();
var vobjects_count = $('#result_table').find('[name=objects_count]').val();
var vobject_val = [];
var vobject_id = $('#result_table').find('[name=object_id]').val();
for(i=0;i<vobjects_count;i++){
vobject_val[i] = $('#result_table').find('[name=object_val]').val();
}
$.post("Requests/OPS.php", //Required URL of the page on server
{ // Data Sending With Request To Server
EDIT_OPS : true,
op_id : vop_id,
op_title : vop_title,
op_descrip : vop_descrip,
objects_count : vobjects_count,
object_id : vobject_id,
object_val : vobject_val
},
function(response){ // Required Callback Function
$("#Response").text(response).css({color: 'green'});
});
});
dynamic table in php :
if($op_objects_count<=0) {
echo "<table class='styled-table' cellspacing = '0' width = '360' border = '1' >
<tr>
<th>
<label for='session_order' style = 'margin-right:10px;color:#595959;float: right;' >اهداف فرآیند : </label >
</th>
</tr>";
while ($objects_row = mysqli_fetch_assoc($op_objects)) {
echo "<tr>
<input name = 'object_id' type='hidden'
value = '" . $objects_row['id'] . "' />
<td>
<input name = 'object_val' style = 'width:340px;height: 36px;margin:0 3px 3px 3px;'
value = '" . $objects_row['object'] . "' />
</td>
<input name = 'objects_count' type='hidden'
value = '".$op_objects_count."' />
</tr>";
}
echo "</table>";
echo "<div class='cleaner h30'></div>";
my php query to update the database :
if($_POST['EDIT_OPS']==true){
$op_id = $_POST['op_id'];
$op_title = $_POST['op_title'];
$op_descrip = $_POST['op_descrip'];
//===================================
$objects_count = $_POST['objects_count'];
$object_id = $_POST['object_id'];
$object_val = $_POST['object_val'];
// print_r($object_val);
$save_edit = $DBM->RunQuery("UPDATE at_ops SET op_title='$op_title' , op_descrip='$op_descrip' WHERE id='$op_id'",true,false);
for($i=0;$i<$objects_count;$i++){
$save_edit = $DBM->RunQuery("UPDATE at_ops_objects SET object='$object_val[$i]' WHERE id='$i' AND ops_id='$op_id' ",true,false);
}
if(isset($save_edit) && $save_edit>0)
echo "success";
else
echo "failure";
}

Answer 1

If you change all names from for example
<input name='object_id'
to
<input name='object_id[]'
you can serialize the form and it will create arrays on the server.
As for getting all values in jQuery, this works for me:
$(function() {
$('#save_edit').on('click', function() {
var vobject_val = [];
$('#result_table').find('[name=object_val]').each(function() {
vobject_val.push(this.value);
});
console.log(vobject_val);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class='styled-table' cellspacing='0' width='360' border='1' id="result_table">
<tr>
<th>
<label for='session_order' style='margin-right:10px;color:#595959;float: right;'>اهداف فرآیند :</label>
</th>
</tr>
<tr>
<input name='object_id' type='hidden' value='r1' />
<td>
<input name='object_val' style='width:340px;height: 36px;margin:0 3px 3px 3px;' value='1' />
</td>
<input name='objects_count' type='hidden' value='1' />
</tr>
<tr>
<input name='object_id' type='hidden' value='r2' />
<td>
<input name='object_val' style='width:340px;height: 36px;margin:0 3px 3px 3px;' value='2' />
</td>
<input name='objects_count' type='hidden' value='2' />
</tr>
<tr>
<input name='object_id' type='hidden' value='r3' />
<td>
<input name='object_val' style='width:340px;height: 36px;margin:0 3px 3px 3px;' value='3' />
</td>
<input name='objects_count' type='hidden' value='3' />
</tr>
</table>
<button type="button" id="save_edit">save</button>

Answer 2

I suggest something like this:
<table id="admTable">
<thead style="width:100%;">
<tr>
<th>row</th>
<th>name</th>
<th>username</th>
<th>pass</th>
<th>delete</th>
<th>edit</th>
</tr>
</thead>
<tbody id="adminsTb">
<?php
$i=1;
while( $admins=mysqli_fetch_array($results,MYSQLI_ASSOC))
{
echo '<form action="insert.php" method="post" id="formId">';
echo "<tr>
<td>$i</td><input type='hidden' name='id' value='$admins[id]'/>
<td><input name='adminname' type='text' value='$admins[name]' /></td>
<td><input name='user' type='text' value='$admins[user]'required='required' /></td>
<td><input name='pass' type='password' value='$admins[pass]' required='required' /></td>
<td> <input name='deladmin' type='submit' value='delete' /></td>
<td><input name='updateadmin' type='submit' value='save' /></td>
</tr>";
$i++;
echo " </form>";
}
?>
</tbody>
</table>
insert.php
if(isset($_POST['updateadmin'])){
$results=mysqli_query($dbCnn," update admins set name='$_POST[adminname]', user='$_POST[user]', pass='$_POST[pass]' where id=$_POST[id]");}
//Jquery ajax
(function($){
function processForm( e ){
$.ajax({
url: 'insert.php',
dataType: 'text',
type: 'post',
contentType: 'application/x-www-form-urlencoded',
data: $(this).serialize(),
success: function( data, textStatus, jQxhr ){
},
error: function( jqXhr, textStatus, errorThrown ){
console.log( errorThrown );
}
});
e.preventDefault();
}
$('#formId').submit( processForm );
})(jQuery);