Jump to content

Recommended Posts

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 by ajoo
Link to post
Share on other sites

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

Link to post
Share on other sites

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");});
Link to post
Share on other sites

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 !

Link to post
Share on other sites

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

Link to post
Share on other sites

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 !

Link to post
Share on other sites

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.

Link to post
Share on other sites

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)

Link to post
Share on other sites

 

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 by davej
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...