CODEWITHSUNDEEP
c#asp.net-mvcasp.net-mvc-4
broke
broke

Reputation: 8312

Ajax post causing 2 actions to run

I'm new to MVC, and this problem has been driving me up the wall. I have some javascript that triggers a jquery ajax post when the user press the tab or enter key in the textboxes on my form:

<script type="text/javascript">
    $(document).ready(function () {
        $('#RmaNumber, #SerialNumber').keydown(function (event) {
            if (event.keyCode == 13 || event.keyCode == 9) {
                var ri = {
                    RmaNumber: $('#RmaNumber').val(),
                    SerialNumber: $('#SerialNumber').val(),
                    ControlName: event.target.id
                }


                $.ajax({
                    type: "POST",
                    url: "/Invoice/BarcodeScan",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(ri),
                    dataType: "json",
                    success: function (data) {
                        $('#TerminalType').text(data.TerminalType);
                    }

                });
            }
        });
    });
</script>

Here is what my controller looks like. I removed the code to keep things simple:

  public ActionResult Index()
        {

        }

  [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Index(RepairInvoice ri)
        {

        }

 [HttpPost]
        public ActionResult BarcodeScan(string RmaNumber, string SerialNumber, string ControlName)

        {
        }

The ajax postback causes both the BarcodeScan and Index action to fire. I only want the Index action with the [AcceptVerbs(HttpVerbs.Post)] above it to fire if a button is pressed on my form. Is this possible, or am I on the wrong track?

Upvotes: 0

Views: 50

Answers (1)

David
David

Reputation: 219096

Since the comments helped, I'll add as an answer for future visitors...

I can't help but notice that one of the key inputs you're looking for is the return key. Depending on how the HTML for the form and the input is set up, the return key may also be causing the form to POST as normal. So essentially:

  • The JavaScript code is invoking a POST to the BarcodeScan action
  • The HTML form is invoking a POST to the Index action

The result of the former is being ignored by the browser, since the page is being re-loaded in its entirety. But regardless of the result, the action was still invoked.

There are a couple of ways to address this:

  • If there is a submit input that you're otherwise using as just a button, you can change it to a button and leave the form without a submit. This works well for forms which should be JavaScript-driven only and not have a default POST action, but it's hard to tell if that applies here without knowing more.
  • The JavaScript code can stop the DOM event in its tracks by calling preventDefault(). Most jQuery functions have a parameter for the event, and you'd call that function on the event. This would tell the DOM to end the event so it doesn't "bubble up" to the form, the document, etc.

Upvotes: 2

Related Questions