• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 832
  • Last Modified:

disable submit button

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.
0
lauras2010
Asked:
lauras2010
  • 17
  • 14
  • 3
  • +3
1 Solution
 
zappafan2k2Commented:
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

0
 
zappafan2k2Commented:
Typo in there, sorry.

In the <form> declaration, onClick should be onSubmit

Oops!
0
 
lauras2010Author 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="" />


0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
zappafan2k2Commented:
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

0
 
Michel PlungjanIT ExpertCommented:
there are no tags called submit

 myForm.getElementsByTagName('input')[0]

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

I made it for window onload, just replace that with any other event you required to.
submitButton.html
0
 
Michel PlungjanIT ExpertCommented:
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
0
 
ansudhindraCommented:
@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.
0
 
lauras2010Author 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.

0
 
ansudhindraCommented:
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

0
 
kostantinos1995Commented:
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

0
 
lauras2010Author 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?
0
 
kostantinos1995Commented:
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

0
 
Michel PlungjanIT ExpertCommented:
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

0
 
lauras2010Author 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 ...>
0
 
Michel PlungjanIT ExpertCommented:
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
0
 
Michel PlungjanIT ExpertCommented:
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
       

0
 
lauras2010Author 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
0
 
Michel PlungjanIT ExpertCommented:
jQuery IS javascript.
Put the code inside the document ready function already on your page
0
 
lauras2010Author 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
0
 
Michel PlungjanIT ExpertCommented:
How did you put all the rest of the jQuery there in the first place?
0
 
lauras2010Author 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
0
 
Michel PlungjanIT ExpertCommented:
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.
0
 
lauras2010Author 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)

0
 
Michel PlungjanIT ExpertCommented:
<script>
$('#form_2qo9k1').submit(function(){
    $('input[type=submit]', this).attr('disabled', 'disabled').attr('value','Please wait');
});
</script>
0
 
Flappi282Commented:
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
0
 
lauras2010Author 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
0
 
Michel PlungjanIT ExpertCommented:
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
0
 
lauras2010Author 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)
0
 
Michel PlungjanIT ExpertCommented:
Ah, so you did. It got lost in the many posts
0
 
Michel PlungjanIT ExpertCommented:
I immediately get an error due to some picture not there
innerLeftColImg-top

0
 
Michel PlungjanIT ExpertCommented:
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>


0
 
lauras2010Author 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 ...
0
 
Michel PlungjanIT ExpertCommented:
Try this


  $('#form_2qo9k1').submit(function(){
   $('input[type=submit]', this).replace('<span>Please wait</span>');
  });
0
 
lauras2010Author 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.)
0
 
Michel PlungjanIT ExpertCommented:
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/
0
 
lauras2010Author 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.
0
 
Michel PlungjanIT ExpertCommented:
I am very pleased that I could help - especially with jQuery :)
0
 
lauras2010Author 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).
0
 
Michel PlungjanIT ExpertCommented:
You are welcome. Interesting question that I also learnt from.
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 17
  • 14
  • 3
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now