如何通过向邮件动态添加表格行表单值到Javascript使用邮政发送数据库

Question

我正在使用Laravel。

我有动态行，每行都有自己的形式与个人价值观。

我试图将按钮提交给Javascript时，通过每行形式的值。 要检索Server.I中的数据，我不想刷新页面，因为我正在使用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

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

我删除了表单，并简单地将一个按钮添加到最后一列。使用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!'); 
       } 

      }); 
     }); 
    }); 

Answer 2

要达到可以使用jQuery库

做些什么0

由于您有多种表单，因此您需要向所有表单添加提交监听器（$("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 
    }); 
});