SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best way to disable submit

    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?

    Code:
    onsubmit='this.submitButton.disabled=true;'
    ?

    thanks,

    DH

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you doing this so that the user doesn't submit the same form twice?
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Addict sleepingdanny's Avatar
    Join Date
    Oct 2002
    Location
    Israel
    Posts
    270
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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">
    Danny Grubman @ http://www.our-network.net
    "Intellectuals solve problems; geniuses prevent them."

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 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">
    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
    Sam Hastings

  5. #5
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code:
    <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
    Last edited by dhtmlhelp; Nov 16, 2003 at 12:14.

  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code:
    function submitOnce( f, sButton )
    {
    	f.elements[sButton].disabled = true;
    }
     
    ...
     
    <form onsubmit="submitOnce( this, 'submit' );">
     
    ...
     
    <input type="submit" name="submit" valued="Submit" />
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  7. #7
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, but you'll need to use your own function to mediate. Here's how
    Code:
    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.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  9. #9
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok so if I have the following 3 functions:

    Code:
    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;
    }

    ,


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


    Code:
    function submitForm(s)  {
    s.value = "  Processing ...  ";
    return true;
    }
    how do I merge them according to:

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

    Code:
    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;
    }

  10. #10
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  11. #11
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Beetle,

    gotcha, I will give it a try now.

    thanks,

    DH


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •