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 very new to HTML and java...
    This is the JavaScript forum. Java and Javascript are entirely different programming languages, in spite of the confusingly similar names.

    You cannot carry values over from one page to another like that.
    Suggest you fix the errors in your markup first. See http://validator.w3.org/

    Netscape 4 and IE 4 are completely obsolete by now. You should use more modern coding.
    Last edited by Philip M; Apr 15, 2009, 05:25 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

    Comment


    • #3
      Originally posted by Philip M View Post
      This is the JavaScript forum. Java and Javascript are entirely different programming languages, in spite of the confusingly similar names.

      You cannot carry values over from one page to another like that.
      Suggest you fix the errors in your markup first. See http://validator.w3.org/

      Netscape 4 and IE 4 are completely obsolete by now. You should use more modern coding.
      AS i said i am new to javascript and html what are the errors in my markup i have only been doing this for 6 weeks and the teacher is more interisted in playing solitare and telling us how much she hates some of us

      Comment


      • #4
        Originally posted by mick463 View Post
        ...the teacher is more interisted in playing solitare and telling us how much she hates some of us
        I can see her point.

        All the code given in this post has been tested and is intended to address the question asked.
        Unless stated otherwise it is not just a demonstration.

        Comment


        • #5
          You can't get the value of a checked radio box the way you were trying to.
          Replace "document.form1.sex.value" by "radioSex()" and add the function:
          Code:
          function radioSex(){
          	var radio = document.form1.sex;
          	for (var i = 0; i < radio.length; i++)
           	if (radio[i].checked == true) return radio[i].value;
           	return "no sex checked";
          }
          .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