0

I have seen @Sparky's answer and sample jsFiddle to this question, and to my mind I have the right html and javascript in place, but still the browser is submitting the form.

I have this html:

 @using (Html.BeginForm("Create", "ClientWarehouseRequest", FormMethod.Post, new { @class = "form-horizontal" }))
        {
    <!-- many form inputs here -->
    <div class="buttons-wrap">
                <input type="hidden" name="SubmitButtonValue" id="SubmitButtonValue" />
                <input class="k-button" type="submit" value="Post" name="SubmitButton" />
                @Html.ActionLink("Cancel", "Index", controllerName: null, routeValues: null, htmlAttributes: new { @class = "k-button", style = "vertical-align: bottom;" })
                <input class="k-button" type="submit" value="Save" name="SubmitButton" />
            </div>

        }

with this javascript:

$(document).ready(function () {
        $('form').validate({
            submitHandler: function (form) {
                var postingWindow = $("#postingDialogWindow").data("kendoWindow");
                postingWindow.title("Posting Client Request...");
                postingWindow.open();

                $.ajax({
                    url: form.action,
                    type: form.method,
                    data: $(form).serialize()
                })
                .success(function (result) {
                    if (result.success) {
                        window.alerts.info(result.message, true);
                        window.location.replace(result.redirecturl);
                    }
                    else {
                        window.alerts.error(result.error);
                    }
                })
                .fail(function (result) {
                    //window.alerts.error(result);
                    var result = $.parseJSON(result.responseText);
                    window.alerts.error(result.errorMessage);
                })
                .always(function (data) {
                    postingWindow.close();
                });
                return false;
            },
            invalidHandler: function (event, validator) {
                alert('invalid');
            }
        });
}

Yet when I click on the of the submit buttons, the browser is submitting the form as a full postback. I need the form to submit via the $.ajax call inside the validate() function instead. What am I missing?

Community
  • 1
  • 1
Shawn de Wet
  • 5,642
  • 6
  • 57
  • 88
  • 1
    Is there a `e.preventDefault();` in your click handler for the submit button? – jmargolisvt Feb 23 '16 at 04:51
  • mmm there is no click handler for the submit button (feeling sheepish)? what else would I put into such a handler other than e.preventDefault();? – Shawn de Wet Feb 23 '16 at 05:41
  • Notice the way it's done in the question you referenced. There is a `.submit()` that does the `preventDefault()` then executes the ajax call. You want the same pattern. Basically, you want to say "when this element is clicked, prevent the normal behavior and do my custom function instead." – jmargolisvt Feb 23 '16 at 05:51
  • Actually I'm not seeing that. Not in the code of the question...nor in the code of the jsFiddle referenced in the question...there is no click handler for any button, in which the form submit is called. What am I missing? – Shawn de Wet Feb 25 '16 at 02:42

0 Answers0