javascript - 单击按钮后访问 Jquery 函数

Question

我有这个 html 代码:

<form class="add-to-cart-form">
         <input type="hidden" name="product-code" value="2" />
         <input type="submit" value="Add" class="button" onclick="addToCart('2');"/>
    </form>

还有一段 JavaScript 代码:

function addToCart(product_id, quantity) {
        quantity = typeof(quantity) != 'undefined' ? quantity : 1;

        $.ajax({
            url: 'test.php',
            type: 'post',
            data: 'product_id=' + product_id + '&quantity=' + quantity,
            dataType: 'json',
            success: function(json) {
                alert(json.message);
            }
        });
    }

在 html 文件中，我随时单击“提交”按钮，而不是将我带到函数 addToCart，而是提交了表单。

我是 javascript 新手，真的不知道问题的根源。请帮我解决这个问题。

Answer 1

单击提交按钮会执行提交表单的默认操作。如果这不是您想要做的，您就必须阻止它。

<form class="add-to-cart-form">
     <input type="hidden" name="product-code" value="2" />
     <input type="submit" value="Add" class="button" onclick="event.preventDefault();addToCart('2');"/>
</form>