CODEWITHSUNDEEP
javascriptjqueryhtmlforms
amol singh
amol singh

Reputation: 143

Unable to get alert message while submitting form through jquery

i am trying to submit a form using jquery but when i click on the submit button it just shows a blank page , now i know blank page means form has been submitted but that's not the behavior i want , i just want to show an alert() just for testing purpose but its showing a blank page

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>

and the respective js is :

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

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

});

now the jquery enable hide all is working well and i have tested it multiple times , but the form is not submitting properly

Upvotes: 0

Views: 395

Answers (1)

Tushar
Tushar

Reputation: 87203

As you've said that form is submitted and a blank page is shown, that means the submit event handler is not working(i.e. return false in handler).

Because you haven't wrapped the submit event handler in ready, the event is not bound. Move the submit handler in ready and then it should work.

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

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

Also, the .enable event handler can be refactor as follow:

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

Upvotes: 1

Related Questions