Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Disabling Input Fields in Forms

    Hi guys,

    I am having a very hard time figuring out how to dynamically disable certain fields in a form based upon the user's answer to a <select> element.

    So, first I have a <select> element to my form asking the user to choose one of three choices, like so:

    <SELECT Name="mortgagetype">
    <option value='First'>First</option>
    <option value='Second'>Second</option>
    <option value='Third'>Third</option>
    </SELECT>

    The next 6 fields are all input fields:

    <INPUT Type="text" size="30" Name="Question1">
    <INPUT Type="text" size="30" Name="Question2">
    <INPUT Type="text" size="30" Name="Question3">
    <INPUT Type="text" size="30" Name="Question4">
    <INPUT Type="text" size="30" Name="Question5">
    <INPUT Type="text" size="30" Name="Question6">

    The tricky part is that I want the availability of certain fields to depend on the user's answer to the <select> element that comes first. If they answer "First" then questions 1, 2, 3 and 4 should be disabled. If they answer "Second" then questions 3 and 4 should be disabled and if they answer "Third" none of the questions should be disabled.

    I have been trying all morning to figure out how to do this and I have come up with nothing but frustration. Any help would be greatly appreciated!

    Thanks a lot!

  • #2
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by tristann View Post
    Hi guys,
    So, first I have a <select> element to my form asking the user to choose one of three choices, like so:

    <SELECT Name="mortgagetype">
    <option value='First'>First</option>
    <option value='Second'>Second</option>
    <option value='Third'>Third</option>
    </SELECT>

    The next 6 fields are all input fields:

    <INPUT Type="text" size="30" Name="Question1">
    <INPUT Type="text" size="30" Name="Question2">
    <INPUT Type="text" size="30" Name="Question3">
    <INPUT Type="text" size="30" Name="Question4">
    <INPUT Type="text" size="30" Name="Question5">
    <INPUT Type="text" size="30" Name="Question6">

    The tricky part is that I want the availability of certain fields to depend on the user's answer to the <select> element that comes first. If they answer "First" then questions 1, 2, 3 and 4 should be disabled. If they answer "Second" then questions 3 and 4 should be disabled and if they answer "Third" none of the questions should be disabled.
    You could do this with a clunky if-else or switch case construct, but it would look better with a reusable function (which probably won't ever be reused).

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <HTML>
    <HEAD>
    <TITLE>TEST PAGE</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
    </HEAD>
    <BODY>
    <FORM>
     <SELECT Name="mortgagetype" onchange="enableByIndex(this, eTable, 'Question')"> 
      <option>-Select-</option> 
      <option value='First'>First</option>
      <option value='Second'>Second</option>
      <option value='Third'>Third</option>
     </SELECT>
    <BR>
     <INPUT Type="text" size="30" Name="Question1"><BR>
     <INPUT Type="text" size="30" Name="Question2"><BR>
     <INPUT Type="text" size="30" Name="Question3"><BR>
     <INPUT Type="text" size="30" Name="Question4"><BR>
     <INPUT Type="text" size="30" Name="Question5"><BR>
     <INPUT Type="text" size="30" Name="Question6"><BR>
    </FORM>
    
    <SCRIPT type='text/javascript'>
    
    eTable= /*Table of involved select box indices and their corresponding suffixes*/
    [
     [1,  1,2,3,4],
     [2,  3,4]
    ]
    
    function enableByIndex(box, table, prefix) /* get the select box, the conditional data and the name prefix */
    {
     var form=box.form, idx=box.selectedIndex, row=-1, suff;
     
     /*Determine if the current selection is involved in disabling elements*/
     
     for(var i=0; i<table.length && table[i][0]!=idx; i++)  
     ;
     
     if(i!=table.length) /*is involved*/
      row=i;
        
     for(var i=0, e=form.elements; i<e.length; i++) /*loop through all elements*/
      if( !e[i].name.indexOf(prefix) )              /*found elem with prefix in name*/
       if(row==-1)
        e[i].disabled=false;        /*restore all*/        
       else
        if( !isNaN( suff=e[i].name.match(/\d+$/) ) )    /*found and saved number suffix*/
         {
          for(var j=1; j<table[row].length && table[row][j]!=suff; j++)
          ;  
          e[i].disabled = (j!=table[row].length);  /*disable if suffix found in relevant data element*/
         }
    }
    </SCRIPT>
    </BODY>
    </HTML>
    If this is for an assignment - they'll never believe you.

  • #3
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much!

    It works beautifully. And, No, I am not doing this for an assignment, but rather for a website I am designing. My Java knowledge is minimal, but this helped a lot!

    Thanks again


  •  

    Posting Permissions

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