[英]Target correct form input values, while using multiple forms on same the page -PHP AJAX JQUERY
我有一个由php函数生成的表,其中每行包含一个Action Button,它实际上是一个包含隐藏数据的表单。 我希望能够这样,当我点击动作按钮时,来自隐藏输入值的数据被传递给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>
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>
首先关闭id需要是唯一的,所以可能更改生成它们的php以将“select_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.
});
如果用户单击时未生成“select_scc”,则可能会遇到此单击函数的问题,然后将函数绑定到已存在的元素。 例如,说生成的所有内容都在一个名为“#container”的预定义div中,然后像这样编写click函数:
$('#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;
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.