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 Coder
    Join Date
    Jun 2014
    Posts
    17
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Test drive (the real )

    Im working on a project. it is a form with a few selects menus. when the user pick a choice from 1st menu, the choices of the others menu should change upon the user's choice to reflect his choice. that works well using
    Code:
    document.getElementById("ID").innerHTML="something"
    , but not my favorite since whenever you change pick, it can remove the option's ID.


    So, so so ! I then saw a solution !!! :
    Code:
    use document.myform.selectname.options[0]= new Option("a","a");
    , but no ! if i use this the code doesnt work at all !!

    if you want to see the entire code , here it is :


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    
    <body>
    <script>
    
    var subtypes=["Hot","Temperate","Cold","Gas Giant"]; 
    var atmosphere=["Toxic","Breathable","No Atmosphere"];
    var sizes=["1x1","2x2","3x3","4x4","5x5","6x6","7x7","8x8","9x9","10x10","11x11","12x12","13x13","14x14","15x15","16x16","17x17","18x18","19x19","20x20","30x30","default"];
    
    
    function atmospheresOn(){
    if((document.getElementById("menu0").selectedIndex==0)&&(document.getElementById("menu1").selectedIndex!=3)){ // si égale planete //
    document.getElementById("menu2").style.visibility= "visible";
    document.getElementById("menu2").options.length=3;
    document.getElementById("14").innerHTML= " Atmosphere ";
    document.form1.atmosphere.options[0]= new Option(atmospheres[0],atmospheres[0]);
    document.form1.atmosphere.options[1]= new Option(atmospheres[1],atmospheres[1]);
    document.form1.atmosphere.options[2]= new Option(atmospheres[2],atmospheres[2]);
    }else{
    document.getElementById("menu2").style.visibility= "hidden";
    document.getElementById("menu2").options.length=0;
    document.getElementById("14").innerHTML= null;
    }
    }
    
    
    function subtypesOn(){
    if(document.getElementById("menu0").selectedIndex==0){
    document.getElementById("12").innerHTML= "Subtype: ";
    document.getElementById("menu1").style.visibility= 'visible';
    document.getElementById("menu1").options.length=4;
    document.myform1.subtype.options= new Option(subtypes[0],subtypes[0]);
    document.myform1.subtype.options= new Option(subtypes[1],subtypes[1]);
    document.myform1.subtype.options= new Option(subtypes[2],subtypes[2]);
    document.myform1.subtype.options= new Option(subtypes[3],subtypes[3]);
    }else if(document.getElementById("menu0").selectedIndex!=0){ // si egale nimporte quel autres type de célestes//
    document.getElementById("menu1").options.length=0;
    document.getElementById("12").innerHTML= null;
    document.getElementById("menu1").style.visibility= 'hidden';
    }
    }
    
    function sizesOn(){
    if(document.getElementById("menu0").selectedIndex==0){ // si c'est planet //
    document.getElementById("menu3").options.length=16;
    document.form1.sizes.options[0]= new Option(sizes[3],sizes[3]);
    document.form1.sizes.options[1]= new Option(sizes[4],sizes[4]);
    document.form1.sizes.options[2]= new Option(sizes[5],sizes[5]);
    document.form1.sizes.options[3]= new Option(sizes[6],sizes[6]);
    document.form1.sizes.options[4]= new Option(sizes[7],sizes[7]);
    document.form1.sizes.options[5]= new Option(sizes[8],sizes[8]);
    document.form1.sizes.options[6]= new Option(sizes[9],sizes[9]);
    document.form1.sizes.options[7]= new Option(sizes[10],sizes[10]);
    document.form1.sizes.options[8]= new Option(sizes[11],sizes[11]);
    document.form1.sizes.options[9]= new Option(sizes[12],sizes[12]);
    document.form1.sizes.options[10]= new Option(sizes[13],sizes[13]);
    document.form1.sizes.options[11]= new Option(sizes[14],sizes[14]);
    document.form1.sizes.options[12]= new Option(sizes[15],sizes[15]);
    document.form1.sizes.options[13]= new Option(sizes[16],sizes[16]);
    document.form1.sizes.options[14]= new Option(sizes[17],sizes[17]);
    document.form1.sizes.options[15]= new Option(sizes[18],sizes[18]);
    document.form1.sizes.options[16]= new Option(sizes[19],sizes[19]);
    document.form1.sizes.options[17]= new Option(sizes[20],sizes[20]);
    }else if(document.getElementById("menu0").selectedIndex==1){    // si c'est une lune //
    document.getElementById("menu3").options.length=3;
    document.form1.sizes.options[0]= new Option(sizes[0],sizes[0]);
    document.form1.sizes.options[1]= new Option(sizes[1],sizes[1]);
    document.form1.sizes.options[2]= new Option(sizes[2],sizes[2]);
    }else if(document.getElementById("menu0").selectedIndex==2){ // si cest soleil//
    document.getElementById("menu3").options.length=1;
    document.form1.sizes.options[0]= new Option(sizes[21],sizes[21]);
    }else if(document.getElementById("menu0").selectedIndex==3||4||5){
    document.getElementById("menu3").options.length=1;
    document.form1.sizes.options[0]= new Option(sizes[21],sizes[21]);
    }
    
    function myfunction1(){
    alert(document.getElementById("menu0").selectedIndex);
    subtypesOn();
    atmospheresOn();
    sizesOn();
    }
    
    
    
    </script>
    <table>
    <thead><p>Swcombine Planet Creator v1</p></thead>
    <thead>Generate a planet !</thead>
    <form name="form1">
    <tr><td>Celestral Body</td><td>
    <select name="Celestral" id="menu0" onChange="myfunction1();">
        <option>Planet</option>
        <option>Moon</option>
        <option>Sun</option>
        <option>Asteroid Field</option>
        <option>Comet</option>
        <option>Black Hole</option>
        </select>
    </td></tr>
    <tr><td><p id="12"></p></td><td>
      <select name="subtype" id="menu1" onChange="myfunction1();">
        <option value="8" id="8"></option>
        <option value="9" id="9"></option>
        <option value="10" id="10"></option>
        <option value="11" id="11"></option>
      </select></td>
    </tr>
    
    <tr><td><p id="14"></p></td><td>
      <select name="atmosphere" id="menu2" onChange="myfunction1();">
        <option id="15"></option>
    	<option id="16"></option>
    	<option id="17"></option>
    	</select>
    
    </td></tr>
    <tr> <td><p id="20">Size:</p></td> 
    <td><select name="sizes" id="menu3" onChange="myfunction1();">
      <option id="21" value="21"></option>
      <option id="22" value="22"></option>
      <option id="23" value="23"></option>
      <option id="24" value="24"></option>
      <option id="25" value="25"></option>
      <option id="26" value="26"></option>
      <option id="27" value="27"></option>
      <option id="28" value="28"></option>
      <option id="29" value="29"></option>
      <option id="30" value="30"></option>
      <option id="31" value="31"></option>
      <option id="32" value="32"></option>
      <option id="33" value="33"></option>
      <option id="34" value="34"></option>
      <option id="35" value="35"></option>
      <option id="36" value="36"></option>
      <option id="37" value="37"></option>
      <option id="38" value="38"></option>
      <option id="39" value="39"></option>
      <option id="40" value="40"></option>
      <option id="41" value="41"></option>
      <option id="42" value="42"></option>
    </select>
    </td></tr>
     
     
     
    <tr><td>//grid here//</td></tr>
    
    
    
    
    
    
    </form>
    </table>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,307
    Thanks
    23
    Thanked 612 Times in 611 Posts
    In the sizesOn() function your missing the last } to the last else if block:

    }else if(document.getElementById("menu0").selectedIndex==3||4||5){
    document.getElementById("menu3").options.length=1;
    document.form1.sizes.options[0]= new Option(sizes[21],sizes[21]);
    } // THIS WAS MISSING

    But I don't think it works right.
    The first function you call (subtypesOn()) does not return to function myfunction1() if you choose Planet.

    A fast PS to you; using visibility leave big holes in your mark up try display: none and block
    and passing this.value in selects ie; onChange="myfunction1(this.value);" looks better then document.getElementById("menu0").selectedIndex
    Last edited by sunfighter; 07-20-2014 at 03:35 AM.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Jun 2014
    Posts
    17
    Thanks
    4
    Thanked 0 Times in 0 Posts
    oh yeah,



    it is my fault ...


    i only have internet explorer for now , and the code wouldnt work as it was blocked by IE... xD i am dumb bro !!

    well now it partially works. but the issue seems to be the document.myform.selectname.options[1]= a value

    this method dont work properlly but if i use getelementbyid it works.


    i will work more on it myself bro thx


  •  

    Posting Permissions

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