Finding the Button that clicked

[ajoo]

Hi,

 

I have this problem where there are 3 buttons on a form called up, edit, down.

 

<input type="Submit" name = "up" value="Up">

<input type="Submit" name = "edit" value="Edit">

<input type="Submit" name = "down" value="Down">

What I wish to do using jquery is :

a) submit the form. Then find out which of these buttons was pressed, disable it for a short duration and display a "wait" sign on that button.

I hope someone can show me how this can be achieved.

Thanks for any help on this to all.

Edited February 9, 2014 by ajoo

[davej]

Why don't you change them to be input type button and then assign an event handler that submits the form?

[ajoo]

Well that's because I would like to keep it mostly HTML. Besides the event handler can also be written for Input. Instead of button we can then use Input['type=submit'] or input['name = up'].

 

However its the actual handler that I am asking help for. Can you show me how it could be done even for buttons.

 

Thanks

[Hadien]

By default in jQuery, they force the "this" reference to refer to the element that triggered the event handler so inside the event handler just use "$(this)" to grab the button that was clicked

$("input['type=submit']").click(function(){  $(this).prop('disabled', true)         .val("wait");});

[dsonesuk]

You would have to cancel the submit action, else the form will reload, or transfer to page defined in the action attribute, then show 'wait' value, delay, then submit form using JS/JQuery.

[ajoo]

Hi guys ! Thanks for the inputs so far.

 

Haiden what you are suggesting is absolutely correct except that I don;t know how to select the correct submit button that was clicked. As far as I have read, there is no if else loops in jquery for then I would have polled the various submit buttons to check the one that was clicked. The buttons can also be polled by their name ( i tried that) so if they have unique names and I could somehow use an if else statement I could have found the correct button that was clicked. It's important to submit the form as well which must be submitted before the attributes for the buttons can be changed to disabled.

 

So any one has any ideas that you can implement in an example and show ( for maybe greater than 2 buttons, say 3 buttons) .

 

Dsonesuk I am not unable to understand your statement possibly because I am pretty new to jquery and have very basic idea of it. How and where the submit button has to be canceled? I also think that the form should be submitted first bcos once the button is disabled, the form does not submit the $_POST array. If i am wrong please correct me.

 

Hoping for more inputs and preferably a working example involving a form and 3 buttons.

 

Thanks all !

[dsonesuk]

The clicking of submit button initiates submitting of the form, it will change the value to 'wait', disable the button, then the submission will happen, you may just glimpse the button changing before the reload of the page OR submission to another page (depending on form setup), remember onsubmit event is tired to the form NOT the submit button

[ajoo]

Please I hope someone can help solve this with an example.

 

Thanks desonesuk, for the explanation. This ofcourse I understood but thought maybe you were trying to say something else as well.

 

I await some to do this as an exercise with an example. The main problem that i have is , as already mentioned, trying to find the correct button using jquery and disabling the concerned button alone instead of all the buttons being affected. And so far as i know there is no if else that can be used in jquery.

 

Requesting the gurus for their guiding light.

 

Thanks all !

[dsonesuk]

Hadien had already giving you the clue to do this, although it should have be

$("input[type='submit']")

not

$("input['type=submit']")

input[type=submit] will target all inputs of type submit, but $(this) would only affect the input element of type submit that was triggered by the click event, you just need to prevent the instantaneous default action of form submission, AND if this is what you want? submit form after certain time period.

        <script type="text/javascript">            $(function() {                $("input[type='submit']").click(function(e) {                    e.preventDefault(); //prevent default action of submission of form when submit button is clicked                    var this_element = $(this);                    $(this).prop('disabled', true)                            .val("wait");                    setTimeout(function() {                        this_element.parent().submit(); // start submission after 3 seconds of parent form                    }, 3000);                });            });        </script>

the only other drawback is that someone could submit the form without clicking any of the submit buttons, by hitting the keyboard enter key, which would bypass this anyway.

[ajoo]

Thanks dsonesuk,

 

I'll try this one and revert. Is there any way to neutralize the keyboard drawback?

 

Thanks again.

[Hadien]

what you can do and write out the function and name it (instead of simply writing "function(e)", write something like "function thumbsCallback(e)"), but have the function defined outside the normal click handler, then you list all the events you want this to apply to.

 <script type="text/javascript">            $(function() {                var thumbsSubmitID = null;                function thumbsCallback(e) {                    e.preventDefault();                    $(this).prop('disabled', true)                           .val("wait");                        clearTimeout(thumbsSubmitID);                    thumbsSubmitID = setTimeout(function(ele) {ele.parent().submit();}, 3000,$(this));                };                $("input[type='submit']").on("click keydown keypress keyup",thumbsCallback);            });        </script>

what this does is that it defines a single function that prevents the event's default action (submitting form in these cases, changes the input's properties, and then sets up a delayed submission. then we assign this one function to 4 different event handlers per input.

 

another option is to instead attach an 'onfocus' event instead of the keydown, keypress, keyup events and have this separate function prevent focus. this way the forms focus would never rest on these submit buttons and thus pressing enter wouldn't accidentally submit them. Possibly a better idea as the previous suggestion will cause a form submit when pressing any key (after disabling and changing text to wait)

[davej]

 

the only other drawback is that someone could submit the form without clicking any of the submit buttons, by hitting the keyboard enter key, which would bypass this anyway.

 

I've never thought about this even though I use it all the time when I submit a log-in. Hmmm...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>form post control</title><script>window.onload = init;function init() {document.getElementById('btn1').onclick = btnclk1;document.getElementById('btn2').onclick = btnclk2;document.getElementById('form1').onsubmit = blocksub;document.getElementById('out1').innerHTML = ' ';}function btnclk1(){var ok = document.getElementById('ok').checked;if (ok){ document.getElementById('out1').innerHTML += 'submitting form...1'; document.getElementById('form1').submit();}else{ document.getElementById('out1').innerHTML += 'no-submit ';}}function btnclk2(){ document.getElementById('out1').innerHTML += 'submitting form...2'; document.getElementById('form1').submit();}function blocksub(evt){ evt.preventDefault(); document.getElementById('out1').innerHTML += 'blocked-submit ';}</script></head><body><h3>Hitting the Return key with the cursor in a form field will also submit a form</h3><form id="form1" method="get" action="post_control.html"><input type="text" name="text" id="text"/><input type="submit" value="Submit"/></form><div id="out1"></div><input type="button" id="btn1" value="Conditional Submit"/><label><input type="checkbox" id="ok"/>Ok to submit</label><br/><input type="button" id="btn2" value="Unconditional Submit"/></body>    </html>

Edited February 12, 2014 by davej

[dsonesuk]

Submit buttons do not need to be focused on for form submission to happen

               $('input,select').keypress(function(e) {                return e.keyCode != 13;                 });

This will not accept 'Enter' (keycode 13) keypress on all but textarea, where it is required.

[davej]

I'm guessing that if any element inside the form has focus and the return key is hit then the form is submitted?

[justsomeguy]

That's the default behavior (other than for a textarea). It will submit the form unless you're overriding that behavior.