We help IT Professionals succeed at work.

disable submit button

lauras2010
lauras2010 asked
on
916 Views
Last Modified: 2012-05-10
I'm using a plugin that generates a form. The code for the submit button is simply:
<p class="submit"><input type="submit" name="Submit" value="Submit" /></p>

(The code for the form tag is:
<form action="" enctype="multipart/form-data" method="post" class="frm-show-form" id="form_2qo9k1">
)

I would like to be able to disable this button temporarily once the user has clicked on it (and post a message saying "Processing your form ... please wait").

I found another post on this but it seemed to require an onClick inside the <input> tag, but I don't think I'll have control over the <input> tag.

TIA for any help,
Laura S.
Comment
Watch Question

If you have control over the <form> declaration, you could try something like this:
(it assumes that you only have one submit button)
<form action="" enctype="multipart/form-data" method="post" class="frm-show-form" id="form_2qo9k1" onClick="changeSubmit();">

and in the <head> section,

<script type="text/javascript">
function changeSubmit() {
  var myForm = document.getElementById('form_2qo9k1');
  var mySubmit = myForm.getElementsByTagName('submit')[0];
  mySubmit.value="Processing your form ... please wait";
  mySubmit.disabled = true;
  }
</script>

Open in new window

Typo in there, sorry.

In the <form> declaration, onClick should be onSubmit

Oops!

Author

Commented:
Hmmm ... it does not appear that I have access to the <form> tag either.

I think I can create/enter a "hidden" value, which looks essentially like this:

<input type="hidden" id="field_hidden-form-field" name="item_meta[198]" value="some test data"/>
      <input type="hidden" id="item_key" name="item_key" value="" />


Certainly not the sexiest way of doing it, but maybe at the bottom of the page you could add:
<script type="text/javascript">
var myForm = document.getElementById('form_2qo9k1');
var mySubmit = myForm.getElementsByTagName('submit')[0];
mySubmit.onclick = function () {
  this.value = "Processing your form ... please wait";
  this.disabled = true;
  }
</script>

Open in new window

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
there are no tags called submit

 myForm.getElementsByTagName('input')[0]

or just document.getElementsByName('Submit)[0];
hi, check the attached html file.

I made it for window onload, just replace that with any other event you required to.
submitButton.html
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
ansudhindra:
1. no need to loop to find the button
2. your script disables the button onload and not onsubmit. Not very useful
The previous suggested scripts all work
@mplungjan,
I mentioned in the my post as "I made it for window onload". let lauras2010 decide what way he wants.

There are lot of ways to achieve what we need. I suggested my way.

Author

Commented:
@mplungjan

The code you posted didn't work. Nothing happened. I just clicked on the button and the form was submitted as usual.

I tried both of these:
myForm.getElementsByTagName('input')[0] and
document.getElementsByName('submit')[0]; (having fixed a small typo)

I even tried adding
document.write("test");
inside the function to see if the function was even getting called, but it appears not.

Possibly the problem is caused by this jQuery that is getting automatically inserted into the HTML?

<script type="text/javascript">
 jQuery(document).ready(function($){
    $('#frm_form_17_container .frm_toggle_container').hide();
    $('#frm_form_17_container .frm_trigger').toggle(function(){ $(this).addClass("active"), $(this).children('.ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s'); $(this).children('.ui-icon-triangle-1-s').removeClass('ui-icon-triangle-1-e');},function(){$(this).removeClass("active"),$(this).children('.ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e'); $(this).children('.ui-icon-triangle-1-e').removeClass('ui-icon-triangle-1-s');;});
    $('#frm_form_17_container .frm_trigger').click(function(){ $(this).next(".frm_toggle_container").slideToggle("slow");});
    //jQuery('#form_2qo9k1').validate();
    });
    function frmClearDefault(default_value,thefield){if(thefield.value==default_value)thefield.value='';}
function frmReplaceDefault(default_value,thefield){if(thefield.value=='')thefield.value=default_value;}
</script>

@ansudhindra: I think I would rather attach the code to the button itself instead of the whole window, it seems much simpler.

Thank you for your help and your time.

Laura S.

You can try this code if you are sure that the page contains only one (may be) form.

if the page has multiple forms then you still need to modify the code.

window.onload=function (){ 
    var frms=document.getElementsByTagName('form');
    frms[0].onsubmit=function(){
    var inputs=document.getElementsByTagName('input');
    alert(inputs.length);
    for(var i=0; i<inputs.length; i++){
      if(inputs[i].type=='submit'){
        inputs[i].value="Please Wait.... processing";
        inputs[i].disabled=true;
      }
    }
    return false;
    };
    };

Open in new window

What I understand is that you won't be able to add an onClick event on the button, but you can do this trough js your button just has to have an ID or be able to loop to find:
<html>
<head>
<script type="text/javascript">
window.onload= function (){ 
	// Uncomment bellow to find button by id
	// document.getElementById('myButton').onclick= function onclick (event) {return disableButton(this);};

	// Or uncomment bellow to finding by looping through inputs as in your example
	/*var inputs= document.getElementsByTagName('input');
	for (var i=0; i < inputs[i]; i++) {
		if (inputs[i].type == 'submit') {
			inputs[i].onclick= function onclick (event) {return disableButton(this);};
		}
	}*/
};

function disableButton (button) {
	button.disabled= "true";
	button.value= "Processing your form ... please wait";
	return false;
}
</script>
</head>
<body>

<form>
<input type="submit" value="Post Message" id="myButton" />
</form>

</body>
</html>

Open in new window

Author

Commented:
@ansudhindra: It's a WordPress site that contains other forms. if I add your code into the <head></head> tag, it will affect all of the forms on the site ...

@kostantinos1995: I can't add an ID into the submit button. The <form> tag and the <input type='submit'> tags are both created by the plugin.

@mplungjan: I tried your code again with a few different variations -- I don't understand why it doesn't work! Do you think the jQuery is killing it?
Well if you see my code I have a second way by looping through the inputs, to make it easy for you I'll include it here:
<html>
<head>
<script type="text/javascript">
window.onload= function () {
	var inputs= document.getElementsByTagName('input');
	for (var i=0; i < inputs[i]; i++) {
		if (inputs[i].type == 'submit') {
			inputs[i].onclick= function onclick (event) {return disableButton(this);};
		}
	}
};

function disableButton (button) {
	button.disabled= "true";
	button.value= "Processing your form ... please wait";
	return false;
}
</script>
</head>
<body>

<form>
<input type="submit" value="Post Message" id="myButton" />
</form>

</body>
</html>

Open in new window

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Ansuhindra's code
var frms=document.getElementsByTagName('form');
    frms[0].onsubmit=function(){

will only attach itself to the 0th form which is the first on the page. Change 0 to 1 for the second form and so on

However, it is enough to do this if you know the form:

window.onload=function (){ 
  var frms=document.getElementsByTagName('form');
  frms[0].onsubmit=function(){
    var subBut=this.Submit; // assuming this name = Submit
    subBut.value="Please Wait.... processing";
    subBut.disabled=true;
  }
};

Open in new window

Author

Commented:
I've tried both of these (mplungjan and ansuhindra) but neither is working.

You can see the test form page at

http://2volunteeronline.org/?page_id=767&preview=true

<wringing my hands with worry ...>
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
page not found

and I get

Error: wp_enqueue_script is not defined
Source File: http://2volunteeronline.org/?page_id=767&preview=true
Line: 22
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
I suggest you do NOT use window.onload when you have jQuery.
Use jQuery instead

http://jquery-howto.blogspot.com/2009/05/disable-submit-button-on-form-submit.html
       

Author

Commented:
I know even less about jQuery. I read the article and put the code into the header of the page but I didn't put any script tags around it and it got displayed on the HTML page. What kind of script tags do I need for jQuery? Regular <script type="javascript"> tags?

Also the page URL is http://2volunteeronline.org/?page_id=767

Thanks for all your help so far .....

Laura
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
jQuery IS javascript.
Put the code inside the document ready function already on your page

Author

Commented:
Well, that doesn't *appear* to work, i.e., the button looks exactly the same (not dimmed or anything) ... but without any kind of "please wait" message I can't tell if the jQuery is getting called or not. (I don't know how to create that kind of message in jQuery ...)

Truly sorry to be such a pain!

Laura
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
How did you put all the rest of the jQuery there in the first place?

Author

Commented:
I hired a developer to write a plugin for another part of the site -- he wrote the rest of the jQuery. But the plugin that controls the forms (Formidable Pro) is what I'm dealing with now ... I'm trying to disable the button created by this pre-written plugin.

Do you think maybe it's not possible to disable it?

Laura
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
No, I am sure it is possible.

We just need to do it right.

If you take the script from the link I gave you and modify it to point at the correct form, you can add the script anywhere after the form.

Author

Commented:
Hmmm ...

> modify it to point at the correct form

I think I'm going to have a hard time doing this on my own. How do we even know it's *not* pointing to the correct form?

Can you tell me how to post a "please wait" message? (in addition to all of the other things you're helping me with)

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
<script>
$('#form_2qo9k1').submit(function(){
    $('input[type=submit]', this).attr('disabled', 'disabled').attr('value','Please wait');
});
</script>
Simple script to disable a button on it being clicked:
<input type="submit" name="submit" id="submit" onclick="submit.disabled=true; submit.value='Please Wait...';" value="Submit Form" />

Works easily

Author

Commented:
@mplungjan: <totally frustrated with code but not frustrated with you />No!! Damn, why doesn't this work??? I was hoping that it was actually working but not really visible due to no message getting posted, but it simply isn't working. Is there some way to debug it? Is it even finding the right form for example?

@Flappi282: I have no control over the button code. I can't add an id or an onclick or anything. Read the rest of the thread (above).

Laura
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Flappi:
1. no need to use submit.disabled since it a) does not work in all browsers and b) can be coded this.disabled instead
2. if you disable the submit button immediately you click on it, the form will not submit

Laura: Sorry I cannot help you without actually knowing what you can and cannot do on that page or if some other script on that page stops the script from working
Do you have a URL? If you do not want to post it here, send it to my email in my profile. I will not guarantee I can help you since I am not well versed in wordpress at all

Author

Commented:
Sorry ... thought I gave you the URL before ... it's http://2volunteeronline.org/?page_id=767 
(I think you will be able to see it now)
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Ah, so you did. It got lost in the many posts
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
I immediately get an error due to some picture not there
innerLeftColImg-top

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
You are not putting the script inside the document.ready.

Like this:

<script type="text/javascript">
 jQuery(document).ready(function($){
     var left = parseInt((screen.availWidth/2) - (625/2));
    var top = parseInt((screen.availHeight/2) - (750/2));
   $("a.myPopup").open({
      width: 625,
      height: 750,
      top: top,
      left: left,
      scrollbars: true
   });
       var left = parseInt((screen.availWidth/2) - (800/2));
    var top = parseInt((screen.availHeight/2) - (500/2));

    $("a.newPopup").open({
      height: 500,
      top: top,
      left: left,
      scrollbars: true
   });

 $('#form_2qo9k1').submit(function(){   $('input[type=submit]', this).attr('disabled', 'disabled').attr('value','Please wait');  });  
});



</script>


Author

Commented:
That seems to work ( !!!!! ) but I will go one more round of questions if you don't mind ... the button appearance doesn't change at all, which is probably ok since the button text changes ... but the cursor still turns into a finger when I mouse over the button so it *appears* that the button is clickable. So that leads me to ask:

1. Is the button truly disabled, i.e., can I be positive that the form will not get submitted twice?
2. Is there any way to change the appearance of the button so that it looks disabled?
3, Is there any way to have the cursor display its default state when rolling over the disabled button?

Sorry if I'm pushing my luck here in asking so many questions but this has been an awesome forum experience so far so I suppose I'm riding on a wave of optimism ...
IT Expert
CERTIFIED EXPERT
Top Expert 2009
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
That didn't really do anything ... although maybe I didn't do it right ... I have this:

$('#form_2qo9k1').submit(function(){
  $('input[type=submit]', this).attr('disabled', 'disabled').attr('value','Please wait');
 });

 $('#form_2qo9k1').submit(function(){
  $('input[type=submit]', this).replace('<span style=\"color: red\">Please wait</span>');
 });

(I added the color: red to see if anything visible would change, but it didn't.)
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
The code I posted was intended to be INSTEAD of.

Assuming the syntax for replace is correct

try this instead - no need to escape the double quotes since we are inside single quotes:


 $('#form_2qo9k1').submit(function(){
  $('input[type=submit]', this).replaceWith('<span style="color: red">Please wait</span>');
 });

http://api.jquery.com/replaceWith/

Author

Commented:
Perfect. Thank you SOOOO much for all your help. What else can I say. You have saved me so much time and aggravation. Totally awesome.

Laura S.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
I am very pleased that I could help - especially with jQuery :)

Author

Commented:
mplungjan was *extremely* helpful ... stuck with me through the whole process, walked me through things I didn't understand ... totally made my day (week actually).
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
You are welcome. Interesting question that I also learnt from.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.