Web Analytics Made Easy -
StatCounter getting radio buttons and check boxes to work in a form - CodingForum

Announcement

Collapse
No announcement yet.

getting radio buttons and check boxes to work in a form

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • getting radio buttons and check boxes to work in a form

    Hi i am very new to HTML and java and i am having trouble getting radio buttons , check boxes and pull down lists to work in my form whenever i put them in there they just come up as undefined. And if i try to put any if statements in the hyper links stop working as the program cannot run. Obviously as i am doing something very wrong.
    I am at a loss and have spent hours on it and just cant get these things working.Any thing with a typed answer works great such as first name or last name here is the code i have written so far
    Code:
    <script>
    function hidediv(divname) { 
    if (document.getElementById) { // DOM3 = IE5, NS6 
    document.getElementById(divname).style.visibility = 'hidden'; 
    } 
    else { 
    if (document.layers) { // Netscape 4 
    document.divname.visibility = 'hidden'; 
    } 
    else { // IE 4 
    document.all.divname.style.visibility = 'hidden'; 
    } 
    } 
    }
    
    function showdiv(divname) { 
    if (document.getElementById) { // DOM3 = IE5, NS6 
    document.getElementById(divname).style.visibility = 'visible'; 
    } 
    else { 
    if (document.layers) { // Netscape 4 
    document.divname.visibility = 'visible'; 
    } 
    else { // IE 4 
    document.all.divname.style.visibility = 'visible'; 
    
    }
    } 
    }
    
    function page2(){
    hidediv("page1");
    showdiv("page2");
    }
    
    function page3(){
    hidediv("page2");
    showdiv("page3");
    }
    
    function page4(){
    hidediv("page3");
    showdiv("page4");
    
    
    OutputPage="First name: " + document.form1.firstname.value;
    OutputPage+="<br>Second Name: " + document.form1.Second.value;
    OutputPage+="<br>Lastname: " + document.form1.Lastname.value;
    OutputPage+="<br>Date of birth: " + document.form1.birth.value;
    OutputPage+="<br>Age: " + document.form1.age.value;
    OutputPage+="<br>SEX: " + document.form1.sex.value;   //here is problem
    
    
    OutputPage+="<br>Favorite Color: " + document.form2.favcolor.value;
    
    
    OutputPage+="<br>Favorite Color: " + document.form3.favcolor.value;
    
    document.getElementById('page4').innerHTML=OutputPage;
    }
    </script>
    
    <style>
    div {
    position: absolute;
    top: 10px;
    }
    </style>
    
    <div id="page1">
    <form name="form1"><br>
    First Name <input type="text" name="firstname" value="Bah"><br>
    Second Name <input type="text" name="Second"><br>
    Lastname <input type="text" name="Lastname"><br>
    Date of birth<input type="text" name="birth"><br>
    Age<input type="text" name="age"><br>
    <tr>
    <td>SEX</td><br><t>                                             //and here is problem
    <td><input type="radio" name="sex" value="Male" />Male<br />
    <input type="radio" name="sex" value="Female" />Female<br />
    </td></tr>
    
    
    <a href="javascript:page2();">Next Page</a>
    </form>
    </div>
    
    <div id="page2" style="visibility: hidden">
    <form name="form2">
    Favorite Color: <input type="text" name="favcolor"><br>
    
    
    <a href="javascript:page3();">Finish</a>
    </form>
    </div>
    
    <div id="page3" style="visibility: hidden">
    
    Favorite Color: <input type="text" name="favcolor"><br> 
    
    <a href="javascript:page4();">next</a>
    </form></div>
    
    <div id="page4" style="visibility: hidden">
    Inner HTML
    <input type="submit" value="Submit" />
    </div>
    The Problem i am having is with the section

    Code:
    <td>SEX</td><br><t>
    <td><input type="radio" name="sex" value="Male" />Male<br />
    <input type="radio" name="sex" value="Female" />Female<br />
    </td></tr>
    And the java bit to make it work
    OutputPage+="<br>SEX: " + document.form1.sex.value;


    Any tuition would be greatly appreciated thank you

  • #2
    I am sorry i think i put this question in the wrong place it is now in the correct one.
    I will try not to do this again

    Comment


    • #3
      In fact it was in the correct place before and is in the wrong one now. You were told that your problem is a Javascript one (not a Java one, like you mistakenly stated). The Javascript forum was perfectly suitable for that.

      Edit: sorry, I thought you posted in Javascript before and now here, but it's the other way round.

      Edit: moved solution over to Javascript forum
      Last edited by venegal; Apr 15, 2009, 09:52 AM.
      .My new Javascript tutorial site: http://reallifejs.com/
      .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
      .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

      Comment

      Working...
      X