我的php通过echo在最后创建每个产品是
<form name="addToCartForm">
<input type="hidden" id="inputid" value="'.$id.'"/>
<input type="submit" id="submitbutton" value="Add to cart"/>
</form>
网站上通常动态创建10个产品
所以我为php显示的每个产品都有10个具有相同类或id的按钮
任何关于函数通过post(jquery)将数据发送到cart.php文件而不刷新网站的想法。我必须在$_POST中发送正确的产品id,以便cart.php知道添加了什么。
为什么当我加上
$(document).ready(function(e) {
$('#submitbutton').click(function(e) {
var pos = $('#inputid').val();
alert(pos);
return false;
});
});
它正在工作,只警告第一个按钮添加到购物车,而不是全部
我是jQuery的新手:)请帮助
听起来像是在寻找AJAX功能。幸运的是,jQuery有一个用于AJAX调用的函数,在http://api.jQuery.com/jQuery.AJAX/中进行了描述。
然后可以编写一些代码,如下所示:
$(document).ready(function() {
$('#submitbutton').click(function() {
var pos = $('#inputid').val();
$.ajax({
url: "cart.php",
type: "POST",
data: {itemID: pos},
success: function(data) {
// Do stuff when the AJAX call returns
}
});
});
});
然而,这其中有一个瑕疵。如果在同一页面上有多个提交按钮,则不能对所有按钮使用相同的ID。最好为所有字段提供一个类,如下所示:
<form name="addToCartForm">
<input type="hidden" class="inputid" value="'.$id.'"/>
<input type="submit" class="submitbutton" value="Add to cart"/>
</form>
最终的Javascript代码如下所示:
$(document).ready(function() {
$('.submitbutton').click(function() {
var pos = $(this).parent().find('.inputid').val();
$.ajax({
url: "cart.php",
type: "POST",
data: {itemID: pos},
success: function(data) {
// Do stuff when the AJAX call returns
}
});
});
});
不能有多个元素具有相同的id
。尝试添加一个类
,
<form name="addToCartForm">
<input type="hidden" id="inputid_1" class="inputid" value="'.$id.'"/>
<input type="submit" id="submitbutton_1" class="submitbutton" value="Add to cart"/>
</form>
JS代码应该是,
$(document).ready(function(e) {
$('.submitbutton').click(function(e) {
var pos = $(this).parent().find('.inputid').val();
alert(pos);
//Do your AJAX call here to send data to server.
return false;
});
});
演示:http://jsfidle.net/meqy5/1/