How To Pass Dynamically Added Table Rows Form Values to Javascript Using Post to Send Database

Question

I am using Laravel.

I have dynamic rows and each row has own form with individual values.

I am trying to pass each row form with values when submit the button to Javascript. To retrieve data in Server.I don't want to refresh page because I am using Modal.

Here is my Code

<table id="selectedWagesTable" class="display" cellspacing="0" width="100%">
<thead>
    <tr>
        <th>Worker</th>
        <th>Balance</th>
        <th>Confirm</th>
    </tr>
</thead>
<tbody>
@foreach($items as $item)

   <tr>
        <td class="standartTable2">
            <?php echo $item['worker_id'] ?>
        </td> 

        <td class="standartTable2">
            £ <?php echo $item['balance'] ?>
        </td>

        <td class="standartTable2">

{{ Form::open(['id'=>item['workerId'],'name' => item['workerId']]) }}
                {{ Form::hidden('workerId', $item['workerId'],['id' => $item['workerId'])}}
                {{ Form::hidden('balance', $item['balance'],['id' => $item['balance']])}}
                {{ Form::submit('Click To Confirm', 
                                    array(
                                        'class'=>'btn btn-sm btn-success',
                                        'id'=>'submitButton',
                                        'oncontextmenu'=>'return false',
                                        )) }}
{{ Form::close() }}

        </td>
    </tr>
    @endforeach


</tbody>

Script

<script type="text/javascript">
$(document).ready(function(){

    $("#submitButton").click(function(e){
        e.preventDefault();
        $.get('hpoAccounts',function(data){
            console.log(data);
        });
    });

    $("#submitButton").click(function(e) {
        e.preventDefault();

        var workerId = $('#workerId').val();
        var balance = $('#balance').val();

        $.post('hpoAccounts',{
            workerId:workerId,
            balance:balance
        },

            function(response,status){
            console.log(response);
        });
    });
});

Answer 1

What you want to achieve could be done using jQuery library

Since you have several forms, you need to add a submit listener to all of them ( $("form").submit ).

To prevent the REFRESH we need to send the data using ajax ( $.ajax ) and prevent default SUBMIT behavior ( e.preventDefault() ).

Note also that we add the listeners to the forms after all the HTML document is ready ( $(document).ready ).

Below code should work after you provide the POST URL.

$(document).ready(function() {

    $("form").submit(function(e){

        var formData = $(this).serializeArray();

        $.ajax({

            url : 'your post resource', // put here the URL resoruce where you want POST the data 
            type: "POST",
            data : formData,
            success:function(data, textStatus, jqXHR) 
            {
                alert('Do something after data sent!');
            },
            error: function(jqXHR, textStatus, errorThrown) 
            {
                alert('There was an error!');
            }
        });

        e.preventDefault(); //prevent default action which will prevent also the REFRESH
    });
});

Answer 2

I have solved my problem using Javascript.

I removed form and simply added one button to last column.With Javascript when I clicked the button I can pull the values from each row.

<td class="standartTable2">
    <button type="button" class="btn btn-success hit">Confirm Payment</button>
</td>

Script

<script type="text/javascript">
    $(document).ready(function(){

        $(".hit").click(function(){

        this.disabled = true;

        // nth-child(2) first-child last-child

         var hpos_id=$(this).parent().siblings(":first").text();
         var balance=$(this).parent().siblings(":nth-child(3)").text();
         var dataArray = {hpos_id: hpos_id, balance: balance};

         $.ajax({

                url : '/confirmPayment', // put here the URL resoruce where you want POST the data 
                type: "POST",
                data : dataArray,
                success:function(data, textStatus, jqXHR) 
                {
                    //All good
                },
                error: function(jqXHR, textStatus, errorThrown) 
                {
                    alert('There was an error!');
                }

            });
        });
    });