Solved

disable submit button

Posted on 2010-09-07
40
785 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.
0
Comment
Question by:lauras2010
  • 17
  • 14
  • 3
  • +3
40 Comments
 
LVL 12

Expert Comment

by:zappafan2k2
ID: 33623260
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
 
LVL 12

Expert Comment

by:zappafan2k2
ID: 33623266
Typo in there, sorry.

In the <form> declaration, onClick should be onSubmit

Oops!
0
 

Author Comment

by:lauras2010
ID: 33623310
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
 
LVL 12

Expert Comment

by:zappafan2k2
ID: 33623429
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33624231
there are no tags called submit

 myForm.getElementsByTagName('input')[0]

or just document.getElementsByName('Submit)[0];
0
 
LVL 13

Expert Comment

by:ansudhindra
ID: 33624290
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33624465
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
 
LVL 13

Expert Comment

by:ansudhindra
ID: 33624500
@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
 

Author Comment

by:lauras2010
ID: 33625111
@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
 
LVL 13

Expert Comment

by:ansudhindra
ID: 33625227
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
 
LVL 2

Expert Comment

by:kostantinos1995
ID: 33625434
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
 

Author Comment

by:lauras2010
ID: 33625882
@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
 
LVL 2

Expert Comment

by:kostantinos1995
ID: 33626977
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33627610
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
 

Author Comment

by:lauras2010
ID: 33628368
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33628708
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33628776
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
 

Author Comment

by:lauras2010
ID: 33628978
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33629412
jQuery IS javascript.
Put the code inside the document ready function already on your page
0
 

Author Comment

by:lauras2010
ID: 33629527
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33630186
How did you put all the rest of the jQuery there in the first place?
0
 

Author Comment

by:lauras2010
ID: 33630227
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33630348
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
 

Author Comment

by:lauras2010
ID: 33630427
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33634027
<script>
$('#form_2qo9k1').submit(function(){
    $('input[type=submit]', this).attr('disabled', 'disabled').attr('value','Please wait');
});
</script>
0
 
LVL 3

Expert Comment

by:Flappi282
ID: 33641406
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
 

Author Comment

by:lauras2010
ID: 33643483
@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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33643882
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
 

Author Comment

by:lauras2010
ID: 33644681
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33644721
Ah, so you did. It got lost in the many posts
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33644727
I immediately get an error due to some picture not there
innerLeftColImg-top

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33644750
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
 

Author Comment

by:lauras2010
ID: 33644805
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 50 total points
ID: 33644837
Try this


  $('#form_2qo9k1').submit(function(){
   $('input[type=submit]', this).replace('<span>Please wait</span>');
  });
0
 

Author Comment

by:lauras2010
ID: 33644879
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33645225
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
 

Author Comment

by:lauras2010
ID: 33645259
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33645396
I am very pleased that I could help - especially with jQuery :)
0
 

Author Closing Comment

by:lauras2010
ID: 33650433
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33652206
You are welcome. Interesting question that I also learnt from.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now