我已将onlcick事件附加到表单的提交按钮以覆盖默认的POST请求,但是我在使其工作时遇到了一些麻烦。
我想要的是点击的商品添加到购物车,但只显示模态确认而不刷新页面。
这个代码在我的静态示例中工作,但是自从集成它以来我已经完成了它已经使它破坏了。
function cartSubmit(addbtn)
{
var form = addbtn.parentNode.parentNode.parentNode;
var formData = jQuery(form).serializeArray();
jQuery.post("/myurl/", formData, function(r){
jQuery.colorbox({html:'<div style="padding:10px;"><h2>Product added to cart.</h2></div>'});
});
return false;
}
现在我在控制台中收到一个错误,说POST“http:// localhost / myurl /”undefined(undefined)然后表单正常提交(刷新页面),但似乎也提交了javascript,因为它添加了项目到购物车两次。
无论如何,非常感谢任何帮助!
答案 0 :(得分:2)
您可以尝试通过submit事件将该函数绑定到表单,例如,假设您的表单具有myform的id,将以下内容添加到您的文档中,并且您不再需要提交按钮的onclick属性:< / p>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<form id="someform-123" method="post">
<input type="text" id="field1" />
<input type="submit" class="add_to_cart" value="Add" />
</form>
<hr>
<form id="someform-789" method="post">
<input type="text" id="field2" />
<input type="submit" class="add_to_cart" value="Add" />
</form>
<script type="text/javascript">
$('.add_to_cart').closest('form').submit(function(e) {
e.preventDefault();
alert('form id: ' + $(this).closest('form').attr('id'));
});
</script>
</body>
</html>
答案 1 :(得分:0)
我遇到了同样的问题,一个中止的AJAX请求。我已经使用按钮上的返回false修复了它。 如果你有(例如):
<form method="post" action="">
Name: <input type="text" name="whatever" id="whatever" />
<input type="submit" id="join" value="Join" />
</form>
和
$("#join").click(function(){
$.ajax({
url: 'whatever.php',
type: 'POST',
data: 'name=' + $("#join").val(),
success: function(r){ alert(r); }
});
});
这将在whatever.php上有ABORT要修复它,取消提交表单,在按钮上添加一个返回:
$("#join").click(function(){
$.ajax({
url: 'whatever.php',
type: 'POST',
data: 'name=' + $("#join").val(),
success: function(r){ alert(r); }
});
return false;
});