asked on
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-da
)
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.
<p class="submit"><input type="submit" name="Submit" value="Submit" /></p>
(The code for the form tag is:
<form action="" enctype="multipart/form-da
)
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.
CSSJavaScriptPHP
Last Comment
Michel Plungjan
Typo in there, sorry.
In the <form> declaration, onClick should be onSubmit
Oops!
In the <form> declaration, onClick should be onSubmit
Oops!
ASKER
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-fiel
<input type="hidden" id="item_key" name="item_key" value="" />
I think I can create/enter a "hidden" value, which looks essentially like this:
<input type="hidden" id="field_hidden-form-fiel
<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>
there are no tags called submit
myForm.getElementsByTagNam
or just document.getElementsByName
myForm.getElementsByTagNam
or just document.getElementsByName
hi, check the attached html file.
I made it for window onload, just replace that with any other event you required to.
submitButton.html
I made it for window onload, just replace that with any other event you required to.
submitButton.html
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
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.
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.
ASKER
@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.getElementsByTagNam
document.getElementsByName
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(fun
$('#frm_form_17_container .frm_toggle_container').hi
$('#frm_form_17_container .frm_trigger').toggle(func
$('#frm_form_17_container .frm_trigger').click(funct
//jQuery('#form_2qo9k1').v
});
function frmClearDefault(default_va
function frmReplaceDefault(default_
</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.
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.getElementsByTagNam
document.getElementsByName
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(fun
$('#frm_form_17_container .frm_toggle_container').hi
$('#frm_form_17_container .frm_trigger').toggle(func
$('#frm_form_17_container .frm_trigger').click(funct
//jQuery('#form_2qo9k1').v
});
function frmClearDefault(default_va
function frmReplaceDefault(default_
</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.
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;
};
};
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>
ASKER
@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?
@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>
Ansuhindra's code
var frms=document.getElementsB
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:
var frms=document.getElementsB
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;
}
};
ASKER
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 ...>
You can see the test form page at
http://2volunteeronline.org/?page_id=767&preview=true
<wringing my hands with worry ...>
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
and I get
Error: wp_enqueue_script is not defined
Source File: http://2volunteeronline.org/?page_id=767&preview=true
Line: 22
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
Use jQuery instead
http://jquery-howto.blogspot.com/2009/05/disable-submit-button-on-form-submit.html
ASKER
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
Also the page URL is http://2volunteeronline.org/?page_id=767
Thanks for all your help so far .....
Laura
jQuery IS javascript.
Put the code inside the document ready function already on your page
Put the code inside the document ready function already on your page
ASKER
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
Truly sorry to be such a pain!
Laura
How did you put all the rest of the jQuery there in the first place?
ASKER
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
Do you think maybe it's not possible to disable it?
Laura
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.
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.
ASKER
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)
> 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)
<script>
$('#form_2qo9k1').submit(f
$('input[type=submit]', this).attr('disabled', 'disabled').attr('value','
});
</script>
$('#form_2qo9k1').submit(f
$('input[type=submit]', this).attr('disabled', 'disabled').attr('value','
});
</script>
Simple script to disable a button on it being clicked:
<input type="submit" name="submit" id="submit" onclick="submit.disabled=t
Works easily
<input type="submit" name="submit" id="submit" onclick="submit.disabled=t
Works easily
ASKER
@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
@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
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
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
ASKER
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)
(I think you will be able to see it now)
Ah, so you did. It got lost in the many posts
I immediately get an error due to some picture not there
innerLeftColImg-top
innerLeftColImg-top
You are not putting the script inside the document.ready.
Like this:
<script type="text/javascript">
jQuery(document).ready(fun
var left = parseInt((screen.availWidt
var top = parseInt((screen.availHeig
$("a.myPopup").open({
width: 625,
height: 750,
top: top,
left: left,
scrollbars: true
});
var left = parseInt((screen.availWidt
var top = parseInt((screen.availHeig
$("a.newPopup").open({
height: 500,
top: top,
left: left,
scrollbars: true
});
$('#form_2qo9k1').submit(f
});
</script>
Like this:
<script type="text/javascript">
jQuery(document).ready(fun
var left = parseInt((screen.availWidt
var top = parseInt((screen.availHeig
$("a.myPopup").open({
width: 625,
height: 750,
top: top,
left: left,
scrollbars: true
});
var left = parseInt((screen.availWidt
var top = parseInt((screen.availHeig
$("a.newPopup").open({
height: 500,
top: top,
left: left,
scrollbars: true
});
$('#form_2qo9k1').submit(f
});
</script>
ASKER
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 ...
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 ...
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
That didn't really do anything ... although maybe I didn't do it right ... I have this:
$('#form_2qo9k1').submit(f
$('input[type=submit]', this).attr('disabled', 'disabled').attr('value','
});
$('#form_2qo9k1').submit(f
$('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.)
$('#form_2qo9k1').submit(f
$('input[type=submit]', this).attr('disabled', 'disabled').attr('value','
});
$('#form_2qo9k1').submit(f
$('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.)
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(f
$('input[type=submit]', this).replaceWith('<span style="color: red">Please wait</span>');
});
http://api.jquery.com/repl
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(f
$('input[type=submit]', this).replaceWith('<span style="color: red">Please wait</span>');
});
http://api.jquery.com/repl
ASKER
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.
Laura S.
I am very pleased that I could help - especially with jQuery :)
ASKER
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).
You are welcome. Interesting question that I also learnt from.
(it assumes that you only have one submit button)
Open in new window