Getting multiple dynamic html element values using jquery

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

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

Answer 2

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>