SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    canada
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Disable TExt Box with CSS Style

    I'm trying to develop the code below. I'd like to control the textbox styll using CSS when the text box is disabled and enabled.

    Here is a link to see what I'm looking to do:
    http://charity-funding.us/groupRes/disableTest.html

    As you can see, when the radioBTN for MasterContract is selected the textBoxes are disabled. Any of the other three radioBTNs enables the textBoxes.

    I've added a style to two textboxes as an example. The style is active when the box is enabled or disabled. I'd like to create a NEW style specific to the DISABLED box when the MasterContract radio is SELECTED. Can anyone help with this please? THANKS!!!

    Here is the code below...

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    
    
    <script language="javascript">
    
    function enableField()
    {
    document.form1.address2.disabled=false;
    document.form1.address22.disabled=false;
    document.form1.address23.disabled=false;
    document.form1.address24.disabled=false;
    }
    
    function disableField()
    {
    document.form1.address2.disabled=true;
    document.form1.address22.disabled=true;
    document.form1.address23.disabled=true;
    document.form1.address24.disabled=true;
    }
    
     
    </script>
    
    
    <style type="text/css">
    <!--
    body {
    	background-color: #FFFFFF;
    }
    .inputext {
        font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: normal;
    	color: #243E5F;
    	width: 170px;
    	border: 1px solid #afbadd;
    	background-image: url(http://www.charity-funding.us/groupRes/images/pagebuild/txtBoxBG.gif);
    	background-repeat: repeat-x;
    	margin-top: 2px;
    	margin-bottom: 5px;
    	height: 22px;
    	background-color: white ! important;
    	z-index: 1000;	
    }
    -->
    </style>
    </head>
    
    <body onload="disableField()">
    <form name="form1" >
      <p>
      <input name="address2" type="text" disabled="true"  id="address2" />
      <input name="address22" type="text" disabled="true" class="inputext" id="address22" />
      <input name="address23" type="text" disabled="true"  id="address23" />
        <input name="address24" type="text" disabled="true" class="inputext" id="address24" />
        
    </p>
      <p>
        <input name="radiobutton" type="radio" value="radiobutton" onfocus="enableField()"/>
        <span class="txtBlue">
        <html:radio property="payType" value="<%=hotel.model.property.Rate.PREPAY%>">Pre-Pay To Merchant Account</html:radio>
      </span>
        <input name="radiobutton" type="radio" value="radiobutton" onfocus="enableField()" />
      Pay Upon Checkout  
      <input name="radiobutton" type="radio" value="radiobutton" onfocus="enableField()"/>
      Pre-Pay To Hotel   
      <input name="radiobutton" type="radio" onfocus="disableField()" value="test" checked="checked" />
      Master Contract  </p>
    </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)
    Sometimes I use this function.
    Code:
    function grayOutDisabledFormControls() {
      var args=arguments;
      for(var i=0;i<args.length;i++) {
        if(args[i] && args[i].style) {
          args[i].style.backgroundColor=args[i].disabled?'#c0c0c0':'';
        }
      }
    }
    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 Addict
    Join Date
    Apr 2004
    Location
    canada
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Kravvitz. I'm not bthe greats with JS and CSS. How do I integrate your code into the one I have? Thanks for the help so far!!!

  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 welcome

    <edit>I looked at your HTML. What happens if someone is navigating through the form with their keyboard? When a radio button is focused, it won't always be checked.</edit>

    Try this. I included new versions of enableField() and disableField() in case you didn't want to go through and update all of the function calls.
    Code:
    <script type="text/javascript">
    
    function enableDisableField(which)
    {
      var f=document.form1;
      f.address2.disabled=which;
      f.address22.disabled=which;
      f.address23.disabled=which;
      f.address24.disabled=which;
      grayOutDisabledFormControls(f.address2,f.address22,f.address23,f.address24);
    }
    
    function enableField()
    {
      enableDisableField(true);
    }
    
    function disableField()
    {
      enableDisableField(false);
    }
    
    function grayOutDisabledFormControls() {
      var args=arguments;
      for(var i=0;i<args.length;i++) {
        if(args[i] && args[i].style) {
          args[i].style.backgroundColor=args[i].disabled?'#c0c0c0':'';
        }
      }
    }
    
    </script>
    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.

  5. #5
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    canada
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright this is awesome. I'm wondering how I apply the CSS style "inputext" when is is enabled and then apply the "disable" CSS style to:
    Code:
    if(args[i] && args[i].style) {
          args[i].style.backgroundColor=args[i].disabled?'#cc0000':'';
    I want to be able to implement external style sheets to control the look of these boxes rather than have them inlined/hard coded.

    Thanks for you help. this is great!!


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
  •