Ajax post causing 2 actions to run

Question

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?

When the user presses the enter key on the input, is the form itself also posting? It sounds like the JavaScript is submitting a POST to the BarcodeScan and the form itself is posting to Index. Also, if you don't want the BarcodeScan action to be invoked, why are you invoking it in the JavaScript code? — David
– David, Commented Aug 15, 2013 at 20:53
You are correct. The enter button is causing my form to post. I cant believe I didn't think of that. — broke
– broke, Commented Aug 15, 2013 at 20:58
There are a couple of ways to address that. If the input is a submit then making it a button may prevent the default post. Using preventDefault() in the JavaScript may work as well. — David
– David, Commented Aug 15, 2013 at 21:00

David · Accepted Answer · 2013-08-15 21:13:06Z

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.

Collectives™ on Stack Overflow

Ajax post causing 2 actions to run

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related