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

    JS help...Formsubmit

    I'm a JS noob and am stuck on something. I have a form that is using divs for a select menu bus locations:

    First select (parent): General locations. It has 10 or so options.

    Second select (children): This is one of 6 different selects, each with at least 5 and up to 30 options based on the parent selection. There can only be one option selected.

    This works great if the user does not explore. If one is selected, I have the server-side code strip out the commas and spaces. However, if a user selects one option from one div select child, then goes to another div select child and selects another option, it keeps the first one. For example, the result should not be '202,282,36,55, , ,43,' but rather ' , 282, , , , ,'

    I do not know how to get it to reset back to nothing when a user goes from one child to the next. I have tried various forms and placements using 'value', and 'selectedIndex' but nothing has worked.

    Oh, and also, it does not work in IE. I will be researching that, but if anyone has any ideas, it would be much appreciated.

    Any help? Thanks for the help in advance...

    Form name is info. This is all supposed to happen before the form is submitted.

    Code:
    <script type="text/javascript"> <!-- function toggle_visibility(id) { var f = document.getElementById('cou1'); if(f.style.display == 'block') f.style.display = 'none'; var g = document.getElementById('cou2'); if(g.style.display == 'block') g.style.display = 'none'; var h = document.getElementById('cou3'); if(h.style.display == 'block') h.style.display = 'none'; var i = document.getElementById('cou4'); if(i.style.display == 'block') i.style.display = 'none'; var j = document.getElementById('cou5'); if(j.style.display == 'block') j.style.display = 'none'; var k = document.getElementById('cou6'); if(k.style.display == 'block') k.style.display = 'none'; var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } //--> </script> <div style="display:none;" ID="cou1"><p><select name="specific_area"><!--options--></select> <div style="display:none;" ID="cou2"><p><select name="specific_area"><!--options--></select> <div style="display:none;" ID="cou3"><p><select name="specific_area"><!--options--></select> <div style="display:none;" ID="cou4"><p><select name="specific_area"><!--options--></select> <div style="display:none;" ID="cou5"><p><select name="specific_area"><!--options--></select> <div style="display:none;" ID="cou6"><p><select name="specific_area"><!--options--></select> 
    Here is the code so far:
    Last edited by barter; 06-10-2008 at 04:06 PM.

  • #2
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, so figured it out with the help of a friend....However, it still does not work in IE! I hate IE. Anybody know how to fix this?

    function toggle_visibility(id) {
    var f = document.getElementById('cou1');
    var g = document.getElementById('cou2');
    var h = document.getElementById('cou3');
    var i = document.getElementById('cou4');
    var j = document.getElementById('cou5');
    var k = document.getElementById('cou6');

    var e = document.getElementById(id);

    f.style.display = 'none';
    g.style.display = 'none';
    h.style.display = 'none';
    i.style.display = 'none';
    j.style.display = 'none';
    k.style.display = 'none';

    f.getElementsByTagName("select")[0].selectedIndex = 0;
    g.getElementsByTagName("select")[0].selectedIndex = 0;
    h.getElementsByTagName("select")[0].selectedIndex = 0;
    i.getElementsByTagName("select")[0].selectedIndex = 0;
    j.getElementsByTagName("select")[0].selectedIndex = 0;
    k.getElementsByTagName("select")[0].selectedIndex = 0;

    if(e.style.display == 'block') {
    e.style.display = 'none';
    }
    else {
    e.style.display = 'block';
    }
    }

  • #3
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    How is the function being triggerred BTW? Could you show us the complete code instead.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #4
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I sure did miss that part.

    It is set up in an array. This goes into the parent select menu:

    Code:
    <option value="<!--ID CODING From SERVER-->" onclick="toggle_visibility('<!--ID CODING-->');">"<!--Name from server-->"</option>

  • #5
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    I'm sorry, but I don't get what you mean. Up the "whole" code that is involved.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #6
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, here it is....I have been researching it quite a bit, nothing I found so far has worked.....Here is where I am at now.


    Here's the script....
    Code:
    <script type="text/javascript">
    <!--
    function toggle_visibility(id) {
    var f = document.getElementById('cou1');
    var g = document.getElementById('cou2');
    var h = document.getElementById('cou3');
    var i = document.getElementById('cou4');
    var j = document.getElementById('cou5');
    var k = document.getElementById('cou6');
    
    var e = document.getElementById(id);
    
    f.style.display = 'none';
    g.style.display = 'none';
    h.style.display = 'none';
    i.style.display = 'none';
    j.style.display = 'none';
    k.style.display = 'none';
    
    f.getElementsByTagName("select")[0].selectedIndex = 0; 
    g.getElementsByTagName("select")[0].selectedIndex = 0; 
    h.getElementsByTagName("select")[0].selectedIndex = 0; 
    i.getElementsByTagName("select")[0].selectedIndex = 0; 
    j.getElementsByTagName("select")[0].selectedIndex = 0; 
    k.getElementsByTagName("select")[0].selectedIndex = 0; 
    
    if(e.style.display == 'block') {
    e.style.display = 'none';
    }
    else {
    e.style.display = 'block';
    }
    }
    //-->
    </script>

    Here is the html for the Children....

    Code:
    <div style="display:none;" ID="cou0"></div> <!--this is empty for when the page first opens or user goes back to no bus location selected-->
    <!--All of these following are defined to be <option value="variable">Name</option>-->
         
    <div style="display:none;" ID="cou1"><p><select name="specific_area"><%=Pre-defined ASP-variable1%></select>
    </p></div>
    
    
    <div style="display:none;" ID="cou2"><p><select name="specific_area"><%=Pre-defined ASP-variable2%></select></p></div>
    
    
    <div style="display:none;" ID="cou3"><p><select name="specific_area"><%=Pre-defined ASP-variable3%></select>
    </p></div>
    
    <div style="display:none;" ID="cou4">
    <p><select name="specific_area"><%=Pre-defined ASP-variable4%></select></p>
    </div>
    
    
    <div style="display:none;" ID="cou5"><p><select name="specific_area"><%=Pre-defined ASP-variable5%></select></p></div>
    
    
    <div style="display:none;" ID="cou6"><p><select name="specific_area"><%=Pre-defined ASP-variable6%></select>
    And here is the parent select....
    Code:
    <select name="bus_area">
    <option value="6" selected onclick="toggle_visibility('cou0');">No Bus</option>
    <option value="1" onclick="toggle_visibility('cou1');">name1</option>
    <option value="2" onclick="toggle_visibility('cou2');">name2</option>
    <option value="3" onclick="toggle_visibility('cou3');">name3</option>
    <option value="4" onclick="toggle_visibility('cou4');">name4</option>
    <option value="5" onclick="toggle_visibility('cou5');">name5</option>
    </select>
    Like I said, it works perfect in FireFox, but doesn't work at all in Explorer. The error I get is generic 'object expected'

    Thanks again!

  • #7
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Don't use onclick, use onchange instead.

    You have a long lines of codes that could be reduced to:
    Code:
    <script type="text/javascript">
    <!--
    window.onload=function()
    {
    	var sel=document.getElementsByTagName('select');
    	sel[0].onchange=function()
    	{
    	var divs=document.getElementsByTagName('div');
    	//This part is to reset the child select
    	for(var i=1;i<divs.length;i++)
    	{divs[i].style.display='none';}
    	//This part is to let the choosen option depict the divs to be seen
    		switch(this.value)
    			{
    			case this.value:
    			document.getElementById('cou'+this.value+'').style.display='';
    			break;
    			}
    	}
    }
    //-->
    </script>
    ...and your parent select to:
    Code:
    <select name="bus_area">
    <option value="0" selected>No Bus</option>
    <option value="1">name1</option>
    <option value="2">name2</option>
    <option value="3">name3</option>
    <option value="4">name4</option>
    <option value="5">name5</option>
    </select>
    Note, the id of your div should be coun, where n is the number of div, the same as the value of your options.

    Tested cross-browser, and hopefully should work.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #8
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmmm.... can't seem to get this to work at all, in FF or IE. Not sure what is going on . The Div IDs are set properly, all the rest of the coding looks good as far as I can tell (although that don't mean much -- I'm more of a db type and I really don't know much about JS).

    OK, here is the code:

    Code:
    <script type="text/javascript">
    <!--
    window.onload=function()
    {
    	var sel=document.getElementsByTagName('select');
    	sel[0].onchange=function()
    	{
    	var divs=document.getElementsByTagName('div');
    	//This part is to reset the child select
    	for(var i=1;i<divs.length;i++)
    	{divs[i].style.display='none';}
    	//This part is to let the choosen option depict the divs to be seen
    		switch(this.value)
    			{
    			case this.value:
    			document.getElementById('cou'+this.value+'').style.display='';
    			break;
    			}
    	}
    }
    //-->
    </script>
    I tried to make the .style.display='block', that didn't work.

    Code:
    <select name="bus_area">
    			                
    <option value="0" Selected>No Bus Pick Up Needed</option>
    <option value=2>O1</option>
    <option value=3>O2</option>
    <option value=4>O3</option>
    <option value=19>O6</option>
    <option value=20>O5</option>
    <option value=21>O7</option> 
                      </SELECT>
    Ok that was the parent, now for the children:

    Code:
    <div style="display:none;" ID="cou0">     </div>
    
    
    <div style="display:none;" ID="cou1"><p><select name="specific_area"><option value="" Selected></option><option value="value1">20 some options</option></select>
    
    <div style="display:none;" ID="cou2"><p><select name="specific_area"><option value="" Selected></option><option value="value2">20 some options</option></select>
    
    <div style="display:none;" ID="cou3"><p><select name="specific_area"><option value="" Selected></option><option value="value3">20 some options</option></select>
    
    <div style="display:none;" ID="cou4"><p><select name="specific_area"><option value="" Selected></option><option value="value4">20 some options</option></select>
    
    <div style="display:none;" ID="cou5"><p><select name="specific_area"><option value="" Selected></option><option value="value5">20 some options</option></select>
    
    <div style="display:none;" ID="cou6"><p><select name="specific_area"><option value="" Selected></option><option value="value6">20 some options</option></select>
    I'm still lost. JS just doesn't make a whole lot of sense to me, but I think I'm catching on.

    Thanks for looking!

  • #9
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    The error is not in the script but in the markups.
    You're not closing your divs.

    Highlighted should be added:
    Code:
    <div style="display:none;" ID="cou1"><p><select name="specific_area"><option value="" Selected></option><option value="value1">20 some options</option></select>
    </div>
    <div style="display:none;" ID="cou2"><p><select name="specific_area"><option value="" Selected></option><option value="value2">20 some options</option></select>
    </div>
    <div style="display:none;" ID="cou3"><p><select name="specific_area"><option value="" Selected></option><option value="value3">20 some options</option></select>
    </div>
    <div style="display:none;" ID="cou4"><p><select name="specific_area"><option value="" Selected></option><option value="value4">20 some options</option></select>
    </div>
    <div style="display:none;" ID="cou5"><p><select name="specific_area"><option value="" Selected></option><option value="value5">20 some options</option></select>
    </div>
    <div style="display:none;" ID="cou6"><p><select name="specific_area"><option value="" Selected></option><option value="value6">20 some options</option></select>
    </div>
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #10
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm sorry, I did not include that when I pasted that. This is not the error, the </div>'s are there, but I am still not able to get it to work in IE. The </p> is there as well.

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Validating the markup would help to solve errors in javascript. You may use http://validator.w3.org
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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