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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    2 Select Boxes in 1 Form with onchange display

    I'm using onchange display to hide/show form elements depending on the value of a select box. It works perfectly well (I actually really adore it) for one select box, but I have another select box which I'd like to act similarly.

    Code:
    <head>
     <script type="text/javascript">
    // <![CDATA[
    function display(obj,id1,id2,id3,id4) {
    txt = obj.options[obj.selectedIndex].value;
    document.getElementById(id1).style.display = 'none';
    document.getElementById(id2).style.display = 'none';
    document.getElementById(id3).style.display = 'none';
    document.getElementById(id4).style.display = 'none';
    if ( txt.match(id1) ) {
    document.getElementById(id1).style.display = 'block';
    }
    if ( txt.match(id2) ) {
    document.getElementById(id2).style.display = 'block';
    }
    if ( txt.match(id3) ) {
    document.getElementById(id3).style.display = 'block';
    }
    if ( txt.match(id4) ) {
    document.getElementById(id4).style.display = 'block';
    }
    }
    // ]]>
    </script>
    </head><body>
    
    <form action="#">
    <select name="Stype" onchange="display(this,'oneshot','outtake','multi','chapter');">
    <option>Please select:</option>
    <option value="oneshot">Oneshot</option>
    <option value="outtake">Outtake</option>
    <option value="multi">Original Multi-Chapter</option>
    <option value="drabbles">Drabbles</option>
    <option value="outline">Outline Preview</option>
    <option value="chapter">Chapter Preview</option>
    </select><BR><BR>
    <div id="oneshot" style="display: none;">Some fields here</div>
    <div id="outtake" style="display: none;">Some different fields here</div>
    <div id="multi" style="display: none;">Some other fields here</div>
    <div id="chapter" style="display: none;">Some more fields here</div>
    </form>
    </body>

    But when I go to add a second select (obj,id1,id2,id3,id4,id5,id6) with new "ifs" and id's, etc and so forth, neither work.

    Code:
    <head>
     <script type="text/javascript">
    // <![CDATA[
    function display(obj,id1,id2,id3,id4,id5,id6) {
    txt = obj.options[obj.selectedIndex].value;
    document.getElementById(id1).style.display = 'none';
    document.getElementById(id2).style.display = 'none';
    document.getElementById(id3).style.display = 'none';
    document.getElementById(id4).style.display = 'none';
    document.getElementById(id5).style.display = 'none';
    document.getElementById(id6).style.display = 'none';
    if ( txt.match(id1) ) {
    document.getElementById(id1).style.display = 'block';
    }
    if ( txt.match(id2) ) {
    document.getElementById(id2).style.display = 'block';
    }
    if ( txt.match(id3) ) {
    document.getElementById(id3).style.display = 'block';
    }
    if ( txt.match(id4) ) {
    document.getElementById(id4).style.display = 'block';
    }
    if ( txt.match(id5) ) {
    document.getElementById(id5).style.display = 'block';
    }
    if ( txt.match(id6) ) {
    document.getElementById(id6).style.display = 'block';
    }
    }
    // ]]>
    </script>
    </head><body>
    
    <form action="#">
    <select name="Stype" onchange="display(this,'oneshot','outtake','multi','chapter');">
    <option>Please select:</option>
    <option value="oneshot">Oneshot</option>
    <option value="outtake">Outtake</option>
    <option value="multi">Original Multi-Chapter</option>
    <option value="drabbles">Drabbles</option>
    <option value="outline">Outline Preview</option>
    <option value="chapter">Chapter Preview</option>
    </select><BR><BR>
    <div id="oneshot" style="display: none;">Some fields here</div>
    <div id="outtake" style="display: none;">Some different fields here</div>
    <div id="multi" style="display: none;">Some other fields here</div>
    <div id="chapter" style="display: none;">Some more fields here</div>  <BR><BR><BR>
    
    <select name="Atype" onchange="display(this,'romance','adventure');">
    <option>Please select:</option>
    <option value="romance">Romance</option>
    <option value="adventure">Adventure</option>
    </select><BR><BR>
    <div id="romance" style="display: none;">Some new fields here</div>
    <div id="adventure" style="display: none;">Some even newer fields here</div>
    </form>
    </body>
    Is there any way to fuse them and get a second select to work the same?

    Thanks in advance for the help!

  • #2
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Weeee! Made new function and it now works correctly.

    For all who are viewing this thread through a search:

    Code:
    <head>
     <script type="text/javascript">
    // <![CDATA[
    function display(obj,id1,id2,id3,id4) {
    txt = obj.options[obj.selectedIndex].value;
    document.getElementById(id1).style.display = 'none';
    document.getElementById(id2).style.display = 'none';
    document.getElementById(id3).style.display = 'none';
    document.getElementById(id4).style.display = 'none';
    if ( txt.match(id1) ) {
    document.getElementById(id1).style.display = 'block';
    }
    if ( txt.match(id2) ) {
    document.getElementById(id2).style.display = 'block';
    }
    if ( txt.match(id3) ) {
    document.getElementById(id3).style.display = 'block';
    }
    if ( txt.match(id4) ) {
    document.getElementById(id4).style.display = 'block';
    }
    }
    
    function display2(obj2,id5,id6) {
    txt2 = obj2.options[obj2.selectedIndex].value;
    document.getElementById(id5).style.display = 'none';
    document.getElementById(id6).style.display = 'none';
    if ( txt2.match(id5) ) {
    document.getElementById(id5).style.display = 'block';
    }
    if ( txt2.match(id6) ) {
    document.getElementById(id6).style.display = 'block';
    }
    }
    // ]]>
    </script>
    </head><body>
    
    <form action="#">
    <select name="Stype" onchange="display(this,'oneshot','outtake','multi','chapter');">
    <option>Please select:</option>
    <option value="oneshot">Oneshot</option>
    <option value="outtake">Outtake</option>
    <option value="multi">Multi-Chapter</option>
    <option value="drabbles">Drabbles</option>
    <option value="outline">Outline Preview</option>
    <option value="chapter">Chapter Preview</option>
    </select><BR><BR>
    <div id="oneshot" style="display: none;">Some fields here</div>
    <div id="outtake" style="display: none;">Some different fields here</div>
    <div id="multi" style="display: none;">Some other fields here</div>
    <div id="chapter" style="display: none;">Some more fields here</div>  <BR><BR><BR>
    
    <select name="Atype" onchange="display2(this,'romance','adventure');">
    <option>Please select:</option>
    <option value="romance">Romance</option>
    <option value="adventure">Adventure</option>
    </select><BR><BR>
    <div id="romance" style="display: none;">Some new fields here</div>
    <div id="adventure" style="display: none;">Some even newer fields here</div>
    </form>
    </body>
    Happy coding. XD


  •  

    Posting Permissions

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