Question

我正在尝试使用jquery提交表单但是当我点击提交按钮时它只显示一个空白页面，现在我知道空白页面意味着表单已经提交，但这不是我想要的行为，我只想显示alert()仅用于测试目的，但显示空白页

html：

 <c:forEach items="${cartlist}" var="product">
<form id="editcart" method="post" action="">
    <input type="text" id="pid" name="pid" value="${product.pid}" hidden/>
    <input type="text" id="spid" name="spid" value="${product.sub_pid}" hidden/>
    <input type="text" id="cartid" name="cartid" value="${product.cart_id}" hidden/>
    <input type="text" id="quantity" name="quantity" value="${product.quantity}" disabled/>
    <input type="button" value="Edit" class="enable" />
    <input type="submit" value="Save" class="save" hidden/>
</form>
</c:forEach>

和各自的js是：

$(function () {
    $('.enable').click(function () {
        $(this).prev('#quantity').prop('disabled', false);
        $(this).hide();
        $(this).next('.save').fadeIn();
    });
});

$('#editcart').submit(function () {
    alert();
    return false;

});

现在jquery enable hide一切正常，我已经多次测试了，但表单没有正确提交

Answer 1

正如您所说，提交form并显示空白页面，这意味着提交事件处理程序无效（即处理程序中的return false）。

因为您尚未在submit中包装ready事件处理程序，所以事件未受约束。将提交处理程序移动到准备就绪，然后它应该可以工作。

$(function () {
    $('.enable').click(function () {
        $(this).prev('#quantity').prop('disabled', false);
        $(this).hide();
        $(this).next('.save').fadeIn();
    });

    $('#editcart').submit(function () {
        alert();
        return false;
    });
});

此外，.enable事件处理程序可以重构如下：

$('.enable').click(function () {
    $('#quantity').prop('disabled', false); // ID is unique, no need to use prev()
    $(this).hide().next('.save').fadeIn(); // Chained
});

通过jquery提交表单时无法获得警报消息

1 个答案: