SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist Rodney H.'s Avatar
    Join Date
    Sep 2005
    Location
    Chicago, IL
    Posts
    479
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Forms, checkboxes, disabled submit buttons, oh my!

    Hi,

    I would appreciate your help in getting this silly thing to work.

    I need to "disable" the submit button UNTIL the checkbox has been "checked"

    Thanks in advance for pointing me in the right direction!

    HTML Code:
    <html>
    <head>
    <title>Test</title>
    <script type="text/javascript" language="javascript">
    function checkagree() 
    {
    	if(window.document.entryform.agree.checked=true)
    	{
    		window.document.entryform.submit.disabled="";
    	}
    	else
    	{
    		window.document.entryform.submit.disabled="disabled"
    	}
    }
    </script>
    </head>
    <body onLoad="checkagree()">
    <form id="entryform">
    <input type="checkbox" id="agree" onChange="checkagree()" />
    <br />
    <input type="submit" name="submit" value="Submit" id="submit" />
    </form>
    </body>
    </html>

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) You are missing a doctype.

    2) You need to put a <div> or <fieldset> around the form controls.

    3) Don't use the language attribute of the <script> element

    4) Avoid using inline event handlers.

    5) The checked and disabled properties are boolean (true/false).

    6) In the conditional you are setting the checked property to true. Either use the "==" equality operator or just remove the "=true" because it's already a boolean anyway and you don't need "==true".

    7) Since you want to set the submit button's disabled property to the opposite of the checkbox's checked property, we can use the not operator ("!") and remove the conditionals entirely.

    8) Don't name a form control "submit". It confuses some browsers.

    9) document.formName only works if the formName is a name, not an ID. We can use the standard document.getElementById() method instead.

    Try this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title></title>
    <style type="text/css">/* <![CDATA[ */
    
    /* ]]> */</style>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    window.onload=function(){
      if(!document.getElementById) return;
      var f = document.getElementById('entryform');
      f.agree.onclick=function(){
        f.submit1.disabled=!f.agree.checked;
      }
      f.agree.onclick();
    }
    //--><!]]>
    </script>
    </head>
    <body>
    
    <form id="entryform" action="#"><div>
    <input type="checkbox" id="agree" />
    <br />
    <input type="submit" id="submit1" value="Submit" />
    </div></form>
    
    </body>
    </html>
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Evangelist Rodney H.'s Avatar
    Join Date
    Sep 2005
    Location
    Chicago, IL
    Posts
    479
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Kravvitz:

    Much thanks for your reply AND the working example.

    As a side note, yes, I always use DTDs, but removed some info. in my post to just show the "basics" of where I was at and what I was having problems with.

    I do appreciate your assistance here, and thank you again for your time and expert advice.

    Cheers!

    PS: How does one mark this thread as "RESOLVED" ?
    Last edited by Rodney H.; Jan 19, 2007 at 07:20. Reason: resolved

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're very welcome

    I don't think this install of vBulletin has the capability to mark a thread as resolved enabled.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •