Preventing form submission when more than one button present in a view

Question

A view is having more than one button as

<div class="row">
<div class="col-md-3">
    @if(Model.Q>1)
    {
        @Html.ActionLink("Previous","Perform","Test",new{q=Model.Q-1},new{@class="btn btn-success",id="test-previous-btn"})
    }
    <input type="submit" value="Next" class="btn btn btn-success" id="test-next-btn" />
</div>
<div class="col-md-3">
    <input type="button" data-confirm="Are you sure that you want to submit?" value="Submit" class="btn btn btn-primary" id="test-submit-btn" />
    <input type="button" value="Cancel" class="btn btn-danger" id="test-cancel-btn" />
</div>

I want a confirmation from the user for the submit button, So I use following javascript function

$('#test-submit-btn').click(function(event){
    var result=confirm("Are you sure! You want to submit?");
    if(!result)
    {
        event.preventDefault();
        return false;
    }

});

It does not prevent submission to occur, irrespective of what was users response. However, If i remove other buttons, it functions as expected.

Your solution please!

you need to move the `e.preventDefault();` to the top of that function — The Bearded Llama, Jul 05 '16 at 12:37
It could be that you are trying to attach the event handler to the `#test-submit-btn` element before it is present in the DOM. — Greg Burghardt, Jul 05 '16 at 12:39
Function is executed successfully. So no question of DOM presence. Only, it does not prevent postback to happen — RAK, Jul 05 '16 at 12:51

Bobby Caldwell · Accepted Answer · 2016-07-05T13:44:09.720

0

e does not exist in your click event function. You would need to change it to

event.preventDefault();

Edit: The Bearded Llama is correct. You will need to prevent the default action in the beginning of the click event, otherwise it will submit the form. You will need to do something like this:

$('#test-submit-btn').click(function(event){
    event.preventDefault();
    var result=confirm("Are you sure! You want to submit?");
    if(result)
    {
        // this is assuming that the first form found is the one
        // you want to submit, otherwise you will need to use the 
        // selector for the form: $("#my-form").submit();
        $(this).parents("form").submit();
    }
});

edited Jul 05 '16 at 13:44

answered Jul 05 '16 at 12:40

Bobby Caldwell

150
2
3

Thanks, here I wrote 'e' by mistake. Infact, it is event. I have already edited my question. – RAK Jul 05 '16 at 12:52
Updated my answer! – Bobby Caldwell Jul 05 '16 at 13:44

Preventing form submission when more than one button present in a view

1 Answers1