jQuery trigger click - no button value in request

Question

I'm working on a kind of a survey using ASP.NET MVC4 and jQuery. And I'm NOT a web-developer, so I'm having some tough times.

My site contains (in brief) a top menu and a form. The form is multi-step with submit buttons "previous" and "next". I need to know the step type so I named the buttons so their value passes along with rest of the fields.

When some conditions are fulfilled I need to show an additional button (which is not a part of the form; let's call it "addButton" for now) in the top menu, clicking which would cause the form to submit. But I still need to know the "step type", so I created a hidden submit button in the form (let's call it "opButton") and when I click the "addButton" I just fire some javascript/jquery to simulate clicking the "opButton":

onclick="$('#opButton').trigger('click');"

And everything works flawlessly when I work with a desktop browser - there is an appropriate item in the Request object and it contains the button's value. But when I'm working on a mobile device (tested with Chrome's remote debugging) there is no such item - I just get null and that's it.

What could be the cause? I'd appreciate any suggestions.

Answer 1

TLDR : Prepend event.preventDefault(); to the add button's onclick handler or make sure the add button is properly typed type="button" .

By default, any button element that does not specify its type is treated as a submit button if within a form. So if you do not specify type="button" in your HTML, it triggers a form submission any time you click on it, regardless* of any other behaviour given to it via event handlers.

**The exceptions are if you use event.preventDefault(); or equivalent; or if you return false from your handler (no, these are not equivalent ). Either will prevent a form submission.*

If you are not specifying type="button" on your add button, then two form submissions are being triggered - the first by the submit button's ( #opButton ) triggered click; the second by the "original" add button click. The submit button gets first go at form submission because the add button will "wait" till all of its onclick content has executed before moving on to its own default submit. The sumbit button's "click" (and therefore its form submit) is all called within the add button's onclick handler, so it will all execute before finally exiting that handler.

The peculiar desktop vs. mobile behaviour comes from how various browser/os combos process competing form submissions: some will block after the first and only send that one (the #opButton submit)(I guess in an attempt to combat double-click double submit problems), while others will begin processing the first, but send the second if it comes in time before the page is unloaded. Your desktop tests are doing the former and only processing the first form submit; your mobile tests are doing the latter and allowing the last form submit to "overwrite" the first.

Ultimately there's no way to tell in your code which the browser will let have the final say: for reliable performance you need to either make the non-submitting button ( #addButton ) type=button or add event.preventDefault(); to your ( #addButton ) event handler so that only one form submission is happening at all.

Answer 2

Maybe your fired event is not the same ("click") when your are in mobile environment, like "tap" event. Try to check this.

Also, if you don't really need your opButton to be send, you can submit the form directly instead of triggering a click on a hidden submit button, like

$('your_form').submit();

Answer 3

Working with hidden items can be very trick sometimes because each browser treats them differently depending on the way you hide it.

My sugestion would be to get rid of the hidden button. You could then create a hidden <INPUT> on the fly, attach to the form and then submit with jQuery:

$(function() {
    $('<input>').attr({
        type: 'hidden',
        value: 'addButton',
        name: 'operation'
    }).appendTo('form');

    $('form').submit();
});

Then on your request object you look for the 'operation' item and get the value from it.