Best way to disable submit

[dhtmlhelp]

Hi,

I have been searching on the forums and web for a good little javascript that can disable the submit button. The most promising results I found are at:

http://www.sitepointforums.com/showt...+submit+button

however I have tested the methods in the thread and all of them either give a javascript error or don't disable the button (I have javascript enabled).

Could someone clarify which is the best method to use?

onsubmit='this.submitButton.disabled=true;'

?

thanks,

DH

[beetle]

Are you doing this so that the user doesn't submit the same form twice?

[sleepingdanny]

It looks that way... But if you're only looking for a way to disable the submit
button, so no one will be able to click on it, just add DISABLE after you choose
the type of the input.

Example:
<input type="submit" DISABLE name="something" value="something">

[SJH]

It looks that way... But if you're only looking for a way to disable the submit
button, so no one will be able to click on it, just add DISABLE after you choose
the type of the input.

Example:
<input type="submit" DISABLE name="something" value="something">

Not quite...it needs to be "disabled"

Oh, and if you're going for XHTML compliance, it needs to be disabled="disabled"

Hope this helps

-Sam

[dhtmlhelp]

Hi Everyone,

thanks, I am aware of disabled='disabled'. Sorry for not clarifying, I need the button to submit only once, and then be disabled, ergo javascript.

Can anyone clarify?

thanks,

DH


EDIT: at the moment I am using:

Javascript:
function submitonce(theform){
//if IE 4+ or NS 6+
if (document.all||document.getElementById){
//screen thru every element in the form, and hunt down "submit" and "reset"
for (i=0;i<theform.length;i++){
var tempobj=theform.elements[i]
if(tempobj.type.toLowerCase()=="submit"||tempobj.type.toLowerCase()=="reset")
//disable em
tempobj.disabled=true
}
}
}

and

<form ... onsubmit='submitonce(this)'>

...

</form>

This seems to work but I was hoping there would be a simpler way, some kind of default value I can use, is it the case?

DH

[beetle]

I don't know what constitutes simple for you, but remove the comments and that function is only 6 lines. Dunno what would be more simple than that, unless you wanted to do somthing like this

function submitOnce( f, sButton )
{
	f.elements[sButton].disabled = true;
}
 
...
 
<form onsubmit="submitOnce( this, 'submit' );">
 
...
 
<input type="submit" name="submit" valued="Submit" />

[dhtmlhelp]

Thanks Beetle,

I think 6 lines is quite acceptable too. I have one more issue.

I am using 3 scripts on one form. Two of them use the return function, and one doesn't. I need to recall all three of them from the same form.

The problem:

onsubmit='return checkCheckBox(this); submitonce(this); return submitForm(this.submit)'

which gives an error (or rather, the third function is ignored because the onsubmit can only handle one 'return').

I cannot write it as:

onsubmit='submitonce(this); return checkCheckBox(this), submitForm(this.submit)'

because that changes the order in which the functions are run, and is not suitable. Does this mean I need to modify the javascripts to eliminate the need for return (is it possible?).

DH

[beetle]

Yes, but you'll need to use your own function to mediate. Here's how

function submitHandler( f )
{
	if ( checkCheckBox( f ) )
	{
		submitonce( f );
		submitForm( f.submit );
		return true;
	}
	return false;
}
 
...
 
<form onsubmit="return submitHandler(this);">

Without actually having all your code in front of me, I'm 99% sure this is what you need.

[dhtmlhelp]

Ok so if I have the following 3 functions:

function checkCheckBox(f){
if (f.agree.checked == false )
{
alert('\nPlease confirm that you have read and agree to our Terms & Conditions');
return false;
}else
return true;
}

,

function submitonce(theform){
if (document.all||document.getElementById){
for (i=0;i<theform.length;i++){
var tempobj=theform.elements[i]
if(tempobj.type.toLowerCase()=="submit"||tempobj.type.toLowerCase()=="reset")
tempobj.disabled=true
}
}
}

and

function submitForm(s)  {
s.value = "  Processing ...  ";
return true;
}

how do I merge them according to:

function submitHandler( f )
{
	if ( checkCheckBox( f ) )
	{
		submitonce( f );
		submitForm( f.submit );
		return true;
	}
	return false;
}

?

This is what I tried but it is very messy:

function submitHandler( f )
{
	if ( checkCheckBox( f ) )
	(f.agree.checked == false )
	{
	alert('\nPlease confirm that you have read and agree to our Terms & Conditions');
	return false;
	} else
	return true;
	submitonce( f ) {
	if (document.all||document.getElementById){
	for (i=0;i<theform.length;i++){
	var tempobj=theform.elements[i]
	if(tempobj.type.toLowerCase()=="submit"||tempobj.type.toLowerCase()=="reset")
	tempobj.disabled=true
	}
	}
	};
	submitForm( f.submit ){
	s.value = "  Processing ...  ";
	return true;
	};
	return true;
	}
	return false;
}

[beetle]

I think you misunderstand. You don't have to combine all the code from those three functions into one -- just keep the three as they are, add the one that I wrote, which calls the other three in the proper order. It's okay to leave them all separate. If you do wish to combine them, then here's some tips for making your code "not so messy".

1. Indent bracketed sections -- functions, if...else statements, loops, etc. Always. There are various styles, pick one that works for you.
2. Put some spaces between your operators and operands! Not doing so is tantamount to writingenglishwithnospaces.
3. Always, always use a semicolon at the end of a line. Not only does it make it undoubtedly clear where the line ends, but it's good practice in case you move on to another C-based scripting language, in which using end-of-line semicolons is required.
4. camelCase your function and variable names, when multi-word.

Let me know how it goes.

[dhtmlhelp]

Thanks Beetle,

gotcha, I will give it a try now.

thanks,

DH