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

what exactly do you want to achieve? 'pass each row values from form with click event to javascript' - do you want to submit the form/send data to the server/use the data in javascript? — Jeff
– Jeff, Commented Jul 10, 2015 at 23:54
BTW, your form does not have an action, this means you will GET same current resource — leo.fcx
– leo.fcx, Commented Jul 10, 2015 at 23:56
I am using Laravel and has own post action inside like; {{ Form::open(['id'=>$workerId,'name' => $workerId]) }} — ErcanE
– ErcanE, Commented Jul 11, 2015 at 0:06

leo.fcx · Accepted Answer · 2015-07-11 00:40:22Z

2

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

answered Jul 11, 2015 at 0:40

leo.fcx

6,4972 gold badges23 silver badges37 bronze badges

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

3 Comments

ErcanE Over a year ago

In this case page refreshing! I updated my question with my own script.With my script first click button works but other button in each rows refreshing the page.

leo.fcx Over a year ago

Then, something must be wrong with your generated form html ... see this jsfiddle working with the solution that I provided (jsfiddle.net/leofcx/u267tppy)

ErcanE Over a year ago

Your code help me to think differently, Thank you! Also I have used tour ajax code.

ErcanE · Accepted Answer · 2015-07-11 23:32:28Z

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!');
                }

            });
        });
    });

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related