#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    13
    Rep Power
    0

    Radio button length and checked does not work


    Hi I have simple html file with Javascript.

    The html has a radio button DogCat.
    My JS script is to display the selected value.
    I entered some value into the inut box to trigger the JS function.

    I encountered two problems:
    1) I cannot display the length of the radio button because I got the following alert:
    length of radi button is = undefined

    2) I don't get any output from the 'alert' statement inside the loop to display the selected value. It is as if nothing was selected.


    Can someone help?

    Here is my code:

    <html>
    <head>

    <script language="javascript">
    function checkDogCat()
    {
    var whichField = '';

    alert("entering checkDogCat() ");

    whichField = document.getElementById('DogCat');

    alert("length of radi button is = " + whichField.length);

    for (var j = 0; j < 2; j++) {
    if (whichField[j].checked) {
    alert(whichField[j].value);
    break;
    }
    }
    }
    </script>
    </head>

    <body>
    <form name="CatDogform">

    <INPUT TYPE="radio" id = "DogCat" NAME= "DogCat" VALUE="Dog" CHECKED>Dog<BR>
    <INPUT TYPE="radio" id = "DogCat" NAME= "DogCat" VALUE="Cat" >Cat<BR>

    <input type="text" id="Dog1" maxlength=5 onkeyup="checkDogCat();">

    <input type="text" id="Cat1" maxlength=2 onkeyup="checkDogCat()">

    </form>
    </body>
    </html>
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,136
    Rep Power
    120
    Is this what you were wanting to do (I wasn't 100% sure, so I took at stab at it)?
    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    function checkDogCat()
    {
    
    var whichField = document.getElementsByTagName('input');
    
    var radios = 0;
    
    for(i=0;i<whichField.length-1;i++){
     if(whichField[i].getAttribute("type") == "radio"){
      radios++;
     }
    }
    
    alert("There are " + radios + " radio buttons.");
    
    for (var j = 0; j < whichField.length-1; j++) {
     if (whichField[j].checked) {
      alert(whichField[j].value);
     }
    }
    
    }
    </script>
    </head>
    
    <body>
    <form name="CatDogform">
    
    <INPUT TYPE="radio" NAME="DogCat" VALUE="Dog" CHECKED>Dog<BR>
    <INPUT TYPE="radio" NAME="DogCat" VALUE="Cat" >Cat<BR>
    
    <input type="text" id="Dog1" maxlength=5 onkeyup="checkDogCat();">
    
    <input type="text" id="Cat1" maxlength=2 onkeyup="checkDogCat()">
    
    </form>
    </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo