Question

我正在使用Laravel。

我有动态行，每行都有自己的带有各个值的表单。

我在尝试将按钮提交给Javascript时，使用值传递每个行表单。要在Server中检索数据。我不想刷新页面，因为我使用的是Modal。

这是我的代码

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

您想要实现的目标可以使用jQuery库

完成

由于您有多个表单，因此需要向所有表单添加提交侦听器（$("form").submit）。

为防止REFRESH，我们需要使用ajax（$.ajax）发送数据并防止默认的SUBMIT行为（e.preventDefault()）。

另请注意，我们在所有HTML文档准备好后（$(document).ready）将监听器添加到表单中。

在提供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

我已经使用Javascript解决了我的问题。

我删除了表单，只是在最后一列添加了一个按钮。当我点击按钮时，我可以从每行中提取值。

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

<强>脚本

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

            });
        });
    });

如何使用Post to Send Database将动态添加的表行表单值传递给Javascript

2 个答案: