如何通過向郵件動態添加表格行表單值到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 
    }); 
});