如何在不刷新页面的情况下提交表单

-4

我正尝试使用jQuery和AJAX将产品添加到购物车中。情况是，我获得了超过30个使用foreach循环动态生成的表单。页面加载后，我得到产品列表，但需要添加到购物车只有一个产品，并不想重新加载页面，所以我使用AJAX。请帮助我如何实现这一点。如何在不刷新页面的情况下提交表单

最重要的是，当我尝试不使用<form>标记时，productId的值始终为1，因为它是id属性的第一个值，并将产品保存到id为1的购物车中。所以我使用<form>。

这是代码（它的一个示例代码）：

<form id="addToCartForm" action="" method="post"> 

    <input type="hidden" id="productId" value="${products.productid}"> 
    <button id="btnSubmit">Add to Cart</button> 
</form> 

<form id="addToCartForm" action="" method="post"> 

    <input type="hidden" id="productId" value="${products.productid}"> 
    <button id="btnSubmit">Add to Cart</button> 

</form> 

<form id="addToCartForm" action="" method="post"> 

    <input type="hidden" id="productId" value="${products.productid}"> 
    <button id="btnSubmit">Add to Cart</button> 

</form>

我已经尝试过很多事情，像jquery.form.min.js，但没有什么是怎么回事作为本只是我喜欢想。

请大家帮忙。 thnx提前。

编辑

的script.js：

$(document).ready(function(){ 
    $(".addToCart").click(function(){ 

    $.post('addToCart.htm', {productId: $('input[type=hidden]#productIdId').val()}, 
     function(message){ 
     $("#message").html(message); 
     } 
    ); 
    }); 
});

来源

2015-04-23 msk

使用jQuery的ajax。 ID应该是唯一的。 –

你的javascript代码在哪里？ –

页面上每种产品的单独表单听起来都像是致命的错误解决方案。 – Regent

你可以做这样的事情：

$("#addToCartForm").on("submit", function(e) { 
    var $form = $(this); 
    e.preventDefault(); 
    e.stopPropagation(); 
    $.ajax({ 
     method: "POST", 
     action: $form.attr("action"), 
     data: $form.serialize() 
    }).done(function() { 
     ... 
    }); 
});

更新：哦！是的，你的表格的ID应该是唯一的。

更新2：如果没有形式

<a class="addToCart" href="#" data-productid="${products.productid}">Add to Cart</a>

的JavaScript：

$(".addToCart").on("click", function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    $.ajaxPost({ 
     action: "addToCart.html", 
     data: {productId: $(this).data("productid")} 
    }).done(function() { 
     ... 
    }); 
});

来源

2015-04-23 11:22:36

问题是所有的id都是由循环生成的，所以它们都是一样的。 – msk

使用一个类而不是一个id然后 –

@Sohail然后你应该改变这个循环。 – kosmos

您正在寻找的东西，如：

$(document).on('click', '#btnSubmit', function(){ 
    var value = $(this).prev().val(); 
    $.ajax({ 
     url: 'path/to/server/script', 
     type: 'post', 
     data: { productid: value }, 
     success: function(){ 
      alert('succeeded'); 
     } 
    }); 
});

无论如何，你必须使用类而不是ID如果您有同样的元素。一个id是一个标识符，所以它必须是唯一的。

来源

2015-04-23 11:24:31 kosmos

好吧，我正在尝试。 – msk

如何在不刷新页面的情况下提交表单

回答

相关问题