在同一页面上使用多个表单时，以正确的表单输入值为目标-PHP AJAX JQUERY

我有一个由php函数生成的表，其中每一行包含一个Action按钮，它实际上是一个包含隐藏数据的表单。我希望能够在单击action按钮时，将隐藏输入值中的数据传递给AJAX调用

到目前为止，我得到的是：（当前代码是从第一个表单中选择数据，无论用户是否单击第二个表单操作按钮）

包含表单的表格

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

卡片类型
卡片上的名字
数
到期
CVC
行动
签证
testname testlname
xxxxxxxxxxxx9999
12/15
123
签证
testname testlname
XXXXXXXXXX 1111
12/15
123

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>

$（文档）.ready（函数（）{
$（“选择scc”）.live（“单击”，函数（）{
var postData={
"授权":2,，
'cc_type'：$（“#scc_ccType1”）.val（），
“cc_编号”：$（“#scc_ccNumber1”）.val（），
“cc#u expdate_month”：$（“scc#ccExpiresMt”）.val（），
“cc#u expdate_year”：$（“scc#ccExpiresYr”）.val（），
“cc#u security_code”：$（“#scc_ccCVC1”）.val（），
“所有者”：$（“#scc_cOwner1”）.val（），
};
$.ajax({
url:“”，
类型：'POST'，
数据：postData，
数据类型：“json”，
成功：功能（scard）{
警惕（伤疤）；
}
});
返回false；
});
});

第一个ID必须是唯一的，因此可能需要更改生成它们的php，将“select\u scc”添加为类

然后做这样的事情：

$('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.
});

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

如果用户单击时没有生成“select_scc”，那么您可能会遇到此单击函数的问题，然后将该函数绑定到已经存在的元素。例如，假设生成的所有内容都在一个名为“#container”的预定义div中，然后编写如下的单击函数：

$('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.
});

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

---

.live已被弃用，它只指向.on函数，因此直接使用.on将节省一些加载时间。

这里有一种更简单的方法，使用表单类作为选择器，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;
});

});

$（函数（）{
$（'form.scc'）.live（'submit'，（function（））{
var postData=$（this.serialize（）；
$.ajax({
url:“”，
类型：'POST'，
数据：postData，
数据类型：“json”，
成功：功能（scard）{
警惕（伤疤）；
}
});
返回false；
});
});

这不是最优雅的解决方案，但更改其中一个表单上的ID时，ID必须是唯一的，并且不能在同一文档中使用两次。然后只需添加第二个ID所需的JS。此外，如果使用jQuery 1.7+。live（）已被弃用，应替换为.on（），并且根据您打算执行的操作，您可能应该.serialize（）你的表单，而不是你现在正在做的事情？我不会把信用卡号码或CVC代码放在该页面的任何地方。这应该只从数据库中查询，希望是加密的，在后端。感谢你的评论，这是一个后端，所有数据都加密，将ID更改为类，这是我的一个错误。序列化后如何推送新数组键和值？感谢您的回答，我收到一个错误，上面写着$this.siblings不是函数。您是否先缓存$this？请参阅代码中的第2行。除此之外，我看到我在“cc_number”上键入了一个错误，应该是.sibles（）而不是.sibling（）。感谢您的回答，如果我想在这个postData数组中包含一些硬编码的数组键和值，在使用serialize（）之后我该如何做？？？？简单的方法是对它们进行URL编码并连接到postData…查看序列化的结果