目標正確的表單輸入值，同時在同一頁上使用多個表單-PHP AJAX JQUERY

Question

我有一個由php函數生成的表，其中每行都包含一個Action Button，它實際上是一個包含隱藏數據的表單。當我點擊操作按鈕時，我希望能夠將來自隱藏輸入值的數據傳遞給AJAX調用。

這是我到目前爲止有：（這個當前代碼是從第1形式，如果用戶點擊第二個表單操作按鈕，選擇數據無論）包含窗體

<table class="table"> 
    <thead> 
     <tr> 
      <th>Card Type</th> 
      <th>Name on Card</th> 
      <th>Number</th> 
      <th>Expires</th> 
      <th>CVC</th> 
      <th>Action</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>VISA</td> 
      <td>testname testlname</td> 
      <td>xxxxxxxxxxxx9999</td> 
      <td>12/15</td> 
      <td>123</td> 
      <td> 
       <form method="post" class="scc"> 
        <input type="hidden" value="VISA" name="scc_ccType1" id="scc_ccType1"> 
        <input type="hidden" value="testname testlname" name="scc_ccOwner1" id="scc_ccOwner1"> 
        <input type="hidden" value="4444777711119999" name="scc_ccNumber1" id="scc_ccNumber1"> 
        <input type="hidden" value="12" name="scc_ccExpiresMt" id="scc_ccExpiresMt"> 
        <input type="hidden" value="15" name="scc_ccExpiresYr" id="scc_ccExpiresYr"> 
        <input type="hidden" value="123" name="scc_ccCVC1" id="scc_ccCVC1"> 
        <input type="submit" value="Select Card" name="select_scc" id="select_scc"> 
       </form> 
      </td> 
     </tr> 
     <tr> 
      <td>VISA</td> 
      <td>testname testlname</td> 
      <td>xxxxxxxxxxxx1111</td> 
      <td>12/15</td> 
      <td>123</td> 
      <td> 
       <form method="post" class="scc"> 
       <input type="hidden" value="VISA" name="scc_ccType1" id="scc_ccType1"> 
       <input type="hidden" value="testname testlname" name="scc_ccOwner1" id="scc_ccOwner1"> 
       <input type="hidden" value="4444555566661111" name="scc_ccNumber1" id="scc_ccNumber1"> 
       <input type="hidden" value="12" name="scc_ccExpiresMt" id="scc_ccExpiresMt"> 
       <input type="hidden" value="15" name="scc_ccExpiresYr" id="scc_ccExpiresYr"> 
       <input type="hidden" value="123" name="scc_ccCVC1" id="scc_ccCVC1"> 
       <input type="submit" value="Select Card" name="select_scc" id="select_scc"> 
       </form> 
      </td> 
     </tr> 
    </tbody> 
</table> 

表

jQuery代碼

<script defer="defer" type="text/javascript"> 
$(document).ready(function() { 
    $("#select_scc").live("click", function() { 

     var postData = { 
     'authorize'  : 2 , 
     'cc_type'      : $("#scc_ccType1").val(), 
     'cc_number'      : $("#scc_ccNumber1").val(), 
     'cc_expdate_month'    : $("#scc_ccExpiresMt").val(), 
     'cc_expdate_year'    : $("#scc_ccExpiresYr").val(), 
     'cc_security_code'    : $("#scc_ccCVC1").val(), 
     'owner'       : $("#scc_ccOwner1").val(), 

     }; 

     $.ajax({ 
       url: "<?php echo base_url().'admin/creditcard';?>", 
       type:'POST', 
       data: postData, 
       dataType: 'json', 
       success: function(scard){ 
        alert(scard); 
       } 
     }); 

     return false; 
    }); 
}); 
</script> 

Answer 1

首先IDS需要是唯一的，所以也許可以改變生成它們的php來添加「select_scc」作爲類。

然後做somethinbg這樣的：

$('submit#select_scc').on('click', function() { 
    var $this = $(this); // caches $(this), which is the select_scc element. 

    // Now to get each value for the form that the user clicked on. 
    var postData = { 
      'cc_type' : $this.siblings('#scc_ccType1').val(), 
      'cc_number' : $this.sibling('#scc_ccNumber1').val(), 
      // ........ etc 
     }; 

     // now just run the ajax function as you are doing. 
}); 

也許你會與這個點擊功能問題，如果當用戶點擊，那麼就功能捆綁到已經有一個元素不會產生「select_scc」 。例如說是產生一切都是所謂的「#container的」預先定義的DIV中，然後寫點擊功能是這樣的：

$('#container').on('click', 'submit#select_scc', function() { 
}); 

.live已被棄用，只是點到了。對功能，所以只是直接使用.on會節省您一些加載時間。

Answer 2

這是一種使用窗體類作爲選擇器的簡單得多的方法，ID的無關緊要。使用serialize（）保存必須手動創建整個數據對象。

live()已被棄用，但我不知道你用的是什麼版本的jQuery所以我與它堅持現在

$(function(){ 

$('form.scc').live('submit',(function(){ 
    var postData = $(this).serialize(); 
    $.ajax({ 
      url: "<?php echo base_url().'admin/creditcard';?>", 
      type:'POST', 
      data: postData, 
      dataType: 'json', 
      success: function(scard){ 
       alert(scard); 
      } 
    }); 

    return false; 
}); 

});