How can we prevent the Submit button action in MVC3?

Question

I have faced a problem with the submit button in mvc34 razor view.I have added a row dynamically in jQuery to webgrid which contains one submit button to insert the row data in db.I want to validate the textbox of the row if empty pop up a alert and stop the action. When I tried to write like this

$('#btnInsert').click(function()
{
 if ($('#tbStudentName').val() == '') {
               alert('Please enetre!');
                           return false;
            } 
});

This Event is not at all firing in jQuery.Can we call the dynamically created submit button client click event in jQuery like above? I have written like this

function InsertClick(button) {
        if ($('#tbStudentName').val() == '') {
           alert('Please enetre!');
                       return false;
        }        
    }

but still the Controller Side FormAction method is firing. Could any one tell me the solution to prevent the action in server side?

score 0 · Answer 1 · answered Nov 21 '12 at 07:28

0

You may do this by binding an event to the form itself.

$("form").submit(function(e) { e.PreventDefault(); return false; }

Of course you can add some if statements to prevent only in some circumstances.

answered Nov 21 '12 at 07:28

dasheddot

2,936
4
26
33

Here I am adding the input submit button dynamically using jQuery.Then How can write this?This line may lead to prevent all the submit button actions in a form. – Hemant Kumar Nov 21 '12 at 08:48
Seems that @testCoder already answered your question? Or do you need additional info? – dasheddot Nov 21 '12 at 14:20

testCoder · Answer 2 · 2012-11-21T09:52:39.037

Or alternatively you can use input type button which by default not cause of form submit, and if validation is successful submit form through

$(this).parents("form").submit();

Here is example:

<script type="text/javascript">
    $(function () {
        $(".go").click(function () {
            var wrong = true; //fake data
            if (wrong) {
                alert("your value is wrong");
            } else {
                $(this).parents("form").submit();
            }
        });
    });
</script>

@using(Html.BeginForm())
{

    @Html.TextBoxFor(x=>x.CompanyName)
    @Html.ValidationMessageFor(x=>x.CompanyName)
    <br/>

    <input type="button" value="go" class="go" />
}

UPDATE

If you will add button dinamically, you should use jquery live event Attach an event handler for all elements which match the current selector, now and in the future.

Here is example:

<script type="text/javascript">
    $(function () {
        $(".go").live("click", function () {
            var wrong = true; //fake data
            if (wrong) {
                alert("your value is wrong");
            } else {
                $(this).parents("form").submit();
            }
        });

        $(".add").click(function () {
            $("form:first").append("<input type='button' value='go' class='go' />");
        });

    });
</script>

@using(Html.BeginForm())
{

    @Html.TextBoxFor(x=>x.CompanyName)
    @Html.ValidationMessageFor(x=>x.CompanyName)
    <br/>


}


<a class="add" href="#">add button dinamically</a>

Here I am adding the input submit button dynamically using jQuery.Then How can write this?This line may lead to prevent all the submit button actions in a form. — Hemant Kumar, Nov 21 '12 at 08:48

score 0 · Answer 3 · answered Nov 21 '12 at 09:59

0

I found the Solution like this

<input type="submit" value="Insert" onclick="return Validate(this);" />


function Validate(button){
if($('#tbemail').val()==''){
    alert('Can't be blank!');
    return 1==3;
}

}

answered Nov 21 '12 at 09:59

Hemant Kumar

4,593
9
56
95

How can we prevent the Submit button action in MVC3?

3 Answers3