CODEWITHSUNDEEP
javascriptjqueryhtmlasp.netasp.net-mvc
John Jerrby
John Jerrby

Reputation: 1703

submit button does not invoke the action

Im using the following button which is working fine and invoke the action as expected,

save button

 @using (Html.BeginForm("edit", "user", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" id="actionbtn" value="Save"  name="buttonType" />

                </div>
            </div>
    }

Check button

@using (Html.BeginForm("Check", "User"))
{
    <input type="submit" id="btnConnect" value="Check"  />
    <span id='result'></span>
}

now when I add the following code that should add some text if the operation was successful or not ,the save button does not invoke the action ,what am I doing wrong here?

$("form").submit(function (e) {
        // Cancel the default submission
        e.preventDefault();

        // Perform the AJAX call
        var target = $(this).attr('action');
        $.post(target, function(result) {
            // Check the value of  result
            if (result === "True") {
                // It was successful, make  result text green.
                $("#result").css('color', 'green').html("successful.");
            } else {
                // Otherwise, it failed, display as red.
                $("#result").css('color', 'red').html("Failed");
            }

        });
    });

i've try to remove e.preventDefault(); without sucess...

Upvotes: 0

Views: 265

Answers (2)

Dmitry Zaets
Dmitry Zaets

Reputation: 3277

First of all you need to add ID to your form:

@using (Html.BeginForm("Check", "User",FormMethod.Post, new { Id = "CheckForm" })

Then you need to add submit event handler only to form that needed:

$("#CheckForm").submit(function (e) {
    // Cancel the default submission
    e.preventDefault();

    // Perform the AJAX call
    var target = $(this).attr('action');
    $.post(target, function(result) {
        // Check the value of  result
        if (result === "True") {
            // It was successful, make  result text green.
            $("#result").css('color', 'green').html("Successful.");
        } else {
            // Otherwise, it failed, display as red.
            $("#result").css('color', 'red').html("Failed");
        }

    });
});

There is also another thing. When you make Ajax submit like this - then it will make submit of empty form. Is what you need?

Upvotes: 1

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

you need to check like this that form submitted via which button.

you have to do like this to restrict it:

$("form").submit(function (e) {
        // Cancel the default submission
        e.preventDefault();

 if($(this).find('input[type="submit"]').val() === "Check") // form submitted via Check button
 {
        // Perform the AJAX call
        var target = $(this).attr('action');
        $.post(target, function(result) {
            // Check the value of  result
            if (result === "True") {
                // It was successful, make  result text green.
                $("#result").css('color', 'green').html("successful.");
            } else {
                // Otherwise, it failed, display as red.
                $("#result").css('color', 'red').html("Failed");
            }

        });
}
else
{
// form submitted from Save button
}
    });

Upvotes: 1

Related Questions