jquery click() in submit button

Question

I have a .click() function on a submit button in a form:

$("#submitId").click(function () {
    $('#hiddenInput').val(someVariable);
});

It works like a charm. When the submit button is clicked the click() function fills the hidden input variable and then the whole form gets submitted. The server then receives the hidden input with the refreshed content.

My question is: will it always work? Is there any danger that, by some reason not yet known to me, the submit operation gets executed first and the click() function later? I want to make sure the hidden input always gets refreshed.

Iconium

$("form").submit(); will bypass that, a user could execute the call from their console or url. – Spine

And I assume it might also get bypassed when just pressing ENTER to submit the form? Give it a try. – Reuven

@JamesBlond - Enter will still cause the click handler to execute. – Spine

The click event always fully executes first. Otherwise how would you ever stop a submit with prevent default. For Reference – Hypno

@TravisJ - If focus is on the button, enter will cause the click handler to execute. But if the focus is on one of the form fields, enter will bypass the click handler, because there was no interaction with the button (just with the form). I think. – Nazarius

@Wrightboy - You can also call Event.preventDefault() in the submit handler. – Nazarius

Answer 1

When working with forms, it's always advisable to let the submit button do it's job: TRIGGER THE FORM'S SUBMIT EVENT ... that's what it's meant for. Then you would listen for the submit event on the form rather than the click event on the submit button.

You can use event.preventDefault() to prevent default submission of the form so that you can do some house keeping then you can submit the form.

$("#submitId").closest('form').on('submit', function(event) {
    event.preventDefault();
    $('#hiddenInput').val(someVariable); //perform some operations
    this.submit(); //now submit the form
});

Or simply,

$('form').on('submit', function(event) {
    event.preventDefault();
    $('#hiddenInput').val(someVariable); //perform some operations
    this.submit(); //now submit the form
});

Odelia

This does not work if your submit button uses formaction. I recommend either triggering the submit button with a click event or assigning the value of formaction to the action property of the form and then triggering the submit event. – Almagest

@kevinAdu what do you mean? Do you have a demo to illustrate your concern? Thank you. – Odelia

won't this make it loop forever? on submit... then re-submit – Foreigner

@Foreigner why do you think it would loop forever? If you can creating a demo to illustrate your concern, I would be more than happy to take that into consideration. Looking forward ..... – Odelia

Please bear in mind that this.submit() is not the same as $(this).submit(). – Odelia

This way the value of the submit input won't be sent. In case you have isset($_POST["submit_btn_name"]) – Crayfish

Answer 2

It would be best to attach the value update directly to the form's submit handler like this

$("#submitId").closest("form").submit(function () {
 $('#hiddenInput').val(someVariable);
});

Spine

This is it. A submit event can be fired in various ways. Instead of trying to guess how a user might fire a submit event (click? keypress?), just attach your handler directly to the form's submit. – Kassi

This will not work though if the submit button is embedded in some element inside the form. I would use .closest('form') instead of .parent('form'). – Odelia

@Odelia - Yes, that is a good point. Edited parent to closest. – Spine

Answer 3

I personally think it is safer to prevent submit, then set value of input needed and only then submit the form programmatically. Like:

$("form").submit(function (e) {
    e.preventDefault();
    $('#hiddenInput').val(someVariable);
    $(this).submit();
});

Ealasaid

Because $(this).submit(); triggers the submit event, this code will create an endless loop. What you want to use is an action that simply submits the form without triggering the submit event. – Odelia

Answer 4

The .click() should always be run first.

Reddick

More of a comment than an answer. At least provide some source to back that up. – Jenijenica