SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Disable form fields?

    Until a certain option on the select box is checked.
    I thought this would be easy to find, but Im struggling, anyone know how to do it?

  2. #2
    SitePoint Zealot codescribbler's Avatar
    Join Date
    Nov 2004
    Location
    New York, NY
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I understand you correctly, you have, say, a select box and another filed like an input. Initially, the input is disabled, when a certain item gets selected in the select box, the input is enabled?

    You want to use the onchange event in the select box. Compare the selected value against the value(s) that are required to enable the input box. If you get a match, set the 'disabled' property of your input box to false, otherwise, set it to true.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ermm.. show me ? please?

    Yea thats basically what i want except for one small thing- the first value in my select box is 'select by postcode' which is the one and only value that i want to use to enable the textbox.

  4. #4
    SitePoint Zealot codescribbler's Avatar
    Join Date
    Nov 2004
    Location
    New York, NY
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a quick implementation:

    Code:
    <html>
    <head>
    <script language='javascript'>
    function enableBox(selBox, boxId)
    {
    	var selval = selBox.value;
    	if(selval == 'postcode')
    	{
    		document.getElementById(boxId).disabled= false;
    	}
    	else
    	{
    		document.getElementById(boxId).disabled= true;
    	}
    		
    }
    </script>
    </head>
    <body>
    <select onchange='enableBox(this, "testInput");'>
    	<option value='postcode'>Select by postcode</option>
    	<option value='opt2'>option 2</option>
    	<option value='opt3'>option 3</option>
    </select>
    <input type='text' id='testInput' name='testInput' disabled='disabled' value ='' />
    </body>
    </html>
    When the user makes a selection in the select box, the enableBox function is called, passing the select box element and the id of the input box. The function compares the selected value against a predetermined value, and if they match enables the input box. Otherwise, the input box is disabled.

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works, if ya change disable= disable to disable= enable, but then if you hit back to return to the page, or try to refresh it, odd things happen- the postcode option in select box is still selected, yet you cannot type in the textbox.

    HTML Code:
    <HEAD>
    <script language="javascript">
    <!-- Begin
    function ignoreSpaces(string) {
    var temp = "";
    string = '' + string;
    splitstring = string.split(" ");
    for(i = 0; i < splitstring.length; i++)
    temp += splitstring[i];
    return temp;
    }
    
    function enableBox(selBox, boxId)
    {
    	var selval = selBox.value;
    	if(selval == 'searchpostcode')
    	{
    		document.getElementById(boxId).disabled= false;
    	}
    	else
    	{
    		document.getElementById(boxId).disabled= true;
    	}
    		
    }
    //  End -->
    </script>
    </HEAD>
    
    <SELECT NAME="location" onchange='enableBox(this, "postcode");'> 
    <OPTION VALUE="searchpostcode">I Want to Search by Postcode</OPTION>
    <OPTION VALUE="barrow">Barrow</OPTION> 
    <OPTION VALUE="carnforth">Carnforth</OPTION>
    <OPTION VALUE="garstang">Garstang</OPTION> 
    <OPTION VALUE="heysham">Heysham</OPTION>
    <OPTION VALUE="kendal">Kendal</OPTION> 
    <OPTION VALUE="lancaster">Lancaster</OPTION>
    <OPTION VALUE="morecambe">Morecambe</OPTION> 
    <OPTION VALUE="workington">Workington</OPTION> 
    </SELECT> 
    <br><br>
    <INPUT TYPE="TEXT" NAME="postcode" SIZE="10" MAXLENGTH="7" onBlur="this.value=ignoreSpaces(this.value);" id='postcode' disabled='enabled' value ='' /></TD>
    </TR>
    Have i done something glaringly wrong, or could it be that its conflicting with the other javascript im using on the same page perhaps?

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ahhh. enabled=enabled. duh. Id almost managed to switch it round but not quite.
    Fixed

  7. #7
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hope Im not butting in

    PHP Code:
    <HEAD>
    <
    script language="javascript">
    <!-- 
    Begin

    var Reg=/\s/g;
    function 
    ignoreSpaces(obj) {
     
    obj.value obj.value.replace(Reg,'');
    }

    function 
    enableBox(selBoxboxId) {
     var 
    selval selBox.options[selBox.selectedIndex].value;
     if(
    selval == 'searchpostcode') {
       
    document.getElementById(boxId).removeAttribute('disabled');
       
    document.getElementById(boxId).style.backgroundColor='#D6D6D6';
     }
     else {
      
    document.getElementById(boxId).setAttribute('disabled','disabled');
       
    document.getElementById(boxId).style.backgroundColor='#FFFFFF';
     }
    }

    function 
    ResetSel(){
     
    sel=document.getElementsByTagName('SELECT');
     for (
    i=0;i<sel.length;i++){
      
    sel[i].selectedIndex=0;
     }

    }

    // End -->
    </script>
    </HEAD>
    <body onload="ResetSel();">
    <SELECT NAME="location" onchange='enableBox(this, "postcode");'>
    <OPTION VALUE="searchpostcode">I Want to Search by Postcode</OPTION>
    <OPTION VALUE="barrow">Barrow</OPTION>
    <OPTION VALUE="carnforth">Carnforth</OPTION>
    <OPTION VALUE="garstang">Garstang</OPTION>
    <OPTION VALUE="heysham">Heysham</OPTION>
    <OPTION VALUE="kendal">Kendal</OPTION>
    <OPTION VALUE="lancaster">Lancaster</OPTION>
    <OPTION VALUE="morecambe">Morecambe</OPTION>
    <OPTION VALUE="workington">Workington</OPTION>
    </SELECT>
    <br>
    <br>

    <INPUT TYPE="TEXT" NAME="postcode" SIZE="10" onBlur="ignoreSpaces(this);" MAXLENGTH="7"  id='postcode' value =''
    style="background-Color:'#D6D6D6';" />
    </body>
    </html> 

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is brilliant, I was tryin to figure out how to change the box colour when its disabled and it does that too, thanks so much

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm. my ignore the spaces script stopped working. Does that mean theres a conflict? It doesnt say error or anything when the page loads. =/

  10. #10
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    copied and tried posted scxript - corrupted

    try

    var Reg=/\s/g;
    function ignoreSpaces(obj) {
    obj.value=obj.value.replace(Reg,'');
    }

  11. #11
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That fixed it. Thank you


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
  •