simple javascript question :)

Desova · Oct 2, 2004

how do i get javascript to tell me the value of a radio button in a form?

the form is called dates:

Code:

<script language="javascript">
function test(){
         alert(document.dates.start_day.value); //returns "undefined"
         alert(document.dates.start_day); //returns "[object]"

}
</script>

Shadow2531 · Oct 2, 2004

If the form has name="dates" and the form input has name="start_day", alert(document.dates.start_day.value); should work.

If it doesn't (like you say), try

alert(document.forms.dates.start_day.value);

If that doesn't work, add id="start_day" to the radio button input and use

alert(document.getElementById("start_day").value);

You can also do

alert(document.forms[0].start_day.value);

if the radio input is in the first form of the page.

Desova · Oct 2, 2004

with the byId it always returns "1"
so i'm thinking it'll return that its been checked, but not the value of the one thats been checked, if you know what i mean?

Shadow2531 · Oct 2, 2004

Here's an example.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Alert input value</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <meta http-equiv="Content-Style-Type" content="text/css"/>
        <meta http-equiv="Content-Script-Type" content="text/javascript"/>
    </head>
    <body>
        <form name="dates" action="" method="post">
           <div>
                <input type="radio" checked="checked" id="start_day" name="start_day" value="44"/>
           </div>
        </form>
        <script type="text/javascript">
            alert(document.dates.start_day.value);
            alert(document.forms.dates.start_day.value);
            alert(document.forms[0].start_day.value);
            alert(document.getElementById("start_day").value);
            if (document.getElementById("start_day").getAttribute("checked")) {
               alert("start_day is checked");
            } else {
                alert("start_day is not checked");
            }
        </script>
    </body>
</html>

document.getElementById("start_day").getAttribute("checked") will return true if it's checked.

The first 4 alerts should output 44. The last alert will output, "start_day is checked".

Desova · Oct 3, 2004

heres the html code:
its still only outputting undefined or 1

Code:

<script language="javascript">
function test(){
         alert(document.dates.start_day.value); //outputs "undefined"
         alert(document.forms.dates.start_day.value); //outputs "undefined"
         alert(document.forms[0].start_day.value);  //outputs "undefined"
         alert(document.getElementById("start_day").value);  //outputs "1"
}
</script>

<form name="dates" method="POST" action="diary.php">
Please select a starting date for your hire:
<table class="nav" width="70%" align="center" border="1px" bordercolor="#000000" cellpadding="0"><tr>
<td width="100%" colspan="7" align="center"><b>April, 2004</b></td></tr><tr>
<td width="15%" align="center"><b>Sunday</b></td>
<td width="15%" align="center"><b>Monday</b></td>
<td width="15%" align="center"><b>Tuesday</b></td>
<td width="15%" align="center"><b>Wednesday</b></td>
<td width="15%" align="center"><b>Thursday</b></td>
<td width="15%" align="center"><b>Friday</b></td>
<td width="15%" align="center"><b>Saturday</b></td>
</tr><tr>
<td bgcolor="" align="center"><font color="#FFFFFF">-</font></td>
<td bgcolor="" align="center"><font color="#FFFFFF">-</font></td>
<td bgcolor="" align="center"><font color="#FFFFFF">-</font></td>
<td bgcolor="" align="center"><font color="#FFFFFF">-</font></td>
<td align="center" class="navtext">1<br><input type="radio" value="1" name="start_day" id="start_day"></td>
<td align="center" class="navtext">2<br><input type="radio" value="2" name="start_day" id="start_day"></td>
<td align="center" class="navtext">3<br><input type="radio" value="3" name="start_day" id="start_day"></td>
</tr><tr>
<td align="center" class="navtext">4<br><input type="radio" value="4" name="start_day" id="start_day"></td>
<td align="center" class="navtext">5<br><input type="radio" value="5" name="start_day" id="start_day"></td>
<td align="center" class="navtext">6<br><input type="radio" value="6" name="start_day" id="start_day"></td>
<td align="center" class="navtext">7<br><input type="radio" value="7" name="start_day" id="start_day"></td>
<td align="center" class="navtext">8<br><input type="radio" value="8" name="start_day" id="start_day"></td>
<td align="center" class="navtext">9<br><input type="radio" value="9" name="start_day" id="start_day"></td>
<td align="center" class="navtext">10<br><input type="radio" value="10" name="start_day" id="start_day"></td>
</tr><tr>
<td align="center" class="navtext">11<br><input type="radio" value="11" name="start_day" id="start_day"></td>
<td align="center" class="navtext">12<br><input type="radio" value="12" name="start_day" id="start_day"></td>
<td align="center" class="navtext">13<br><input type="radio" value="13" name="start_day" id="start_day"></td>
<td align="center" class="navtext">14<br><input type="radio" value="14" name="start_day" id="start_day"></td>
<td align="center" class="navtext">15<br><input type="radio" value="15" name="start_day" id="start_day"></td>
<td align="center" class="navtext">16<br><input type="radio" value="16" name="start_day" id="start_day"></td>
<td align="center" class="navtext">17<br><input type="radio" value="17" name="start_day" id="start_day"></td>
</tr><tr>
<td align="center" class="navtext">18<br><input type="radio" value="18" name="start_day" id="start_day"></td>
<td align="center" class="navtext">19<br><input type="radio" value="19" name="start_day" id="start_day"></td>
<td align="center" class="navtext">20<br><input type="radio" value="20" name="start_day" id="start_day"></td>
<td align="center" class="navtext">21<br><input type="radio" value="21" name="start_day" id="start_day"></td>
<td align="center" class="navtext">22<br><input type="radio" value="22" name="start_day" id="start_day"></td>
<td align="center" class="navtext">23<br><input type="radio" value="23" name="start_day" id="start_day"></td>
<td align="center" class="navtext">24<br><input type="radio" value="24" name="start_day" id="start_day"></td>
</tr><tr>
<td align="center" class="navtext">25<br><input type="radio" value="25" name="start_day" id="start_day"></td>
<td align="center" class="navtext">26<br><input type="radio" value="26" name="start_day" id="start_day"></td>
<td align="center" class="navtext">27<br><input type="radio" value="27" name="start_day" id="start_day"></td>
<td align="center" class="navtext">28<br><input type="radio" value="28" name="start_day" id="start_day"></td>
<td align="center" class="navtext">29<br><input type="radio" value="29" name="start_day" id="start_day"></td>
<td align="center" class="navtext">30<br><input type="radio" value="30" name="start_day" id="start_day"></td>
<td align="center"><font color="#FFFFFF">-</font></td>
</tr>

  <tr>
    <td colspan="7" align="right">
    <b>Change:</b>
    <select size="1" name="start_month">
    <option value="4" selected>April</option>
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
    </select>
    <select size="1" name="start_year">
    <option value="2004" selected>2004</option>
    <option>2004</option>
    <option>2005</option>
    </select>
  <input type="submit" value="Submit" name="B1"></td>
  </tr>
</table>


Please select a ending date for your hire:
<table class="nav" width="70%" align="center" border="1px" bordercolor="#000000" cellpadding="0"><tr>
<td width="100%" colspan="7" align="center"><b>July, 2004</b></td></tr><tr>
<td width="15%" align="center"><b>Sunday</b></td>
<td width="15%" align="center"><b>Monday</b></td>
<td width="15%" align="center"><b>Tuesday</b></td>
<td width="15%" align="center"><b>Wednesday</b></td>
<td width="15%" align="center"><b>Thursday</b></td>
<td width="15%" align="center"><b>Friday</b></td>
<td width="15%" align="center"><b>Saturday</b></td>
</tr><tr>
<td bgcolor="" align="center"><font color="#FFFFFF">-</font></td>
<td bgcolor="" align="center"><font color="#FFFFFF">-</font></td>
<td bgcolor="" align="center"><font color="#FFFFFF">-</font></td>
<td bgcolor="" align="center"><font color="#FFFFFF">-</font></td>
<td align="center" class="navtext">1<br><input type="radio" value="1" name="end_day"></td>
<td align="center" class="navtext">2<br><input type="radio" value="2" name="end_day"></td>
<td align="center" class="navtext">3<br><input type="radio" value="3" name="end_day"></td>
</tr><tr><td align="center" class="navtext">4<br><input type="radio" value="4" name="end_day"></td>
<td align="center" class="navtext">5<br><input type="radio" value="5" name="end_day"></td>
<td align="center" class="navtext">6<br><input type="radio" value="6" name="end_day"></td>
<td align="center" class="navtext">7<br><input type="radio" value="7" name="end_day"></td>
<td align="center" class="navtext">8<br><input type="radio" value="8" name="end_day"></td>
<td align="center" class="navtext">9<br><input type="radio" value="9" name="end_day"></td>
<td align="center" class="navtext">10<br><input type="radio" value="10" name="end_day"></td>
</tr><tr><td align="center" class="navtext">11<br><input type="radio" value="11" name="end_day"></td>
<td align="center" class="navtext">12<br><input type="radio" value="12" name="end_day"></td>
<td align="center" class="navtext">13<br><input type="radio" value="13" name="end_day"></td>
<td align="center" class="navtext">14<br><input type="radio" value="14" name="end_day"></td>
<td align="center" class="navtext">15<br><input type="radio" value="15" name="end_day"></td>
<td align="center" class="navtext">16<br><input type="radio" value="16" name="end_day"></td>
<td align="center" class="navtext">17<br><input type="radio" value="17" name="end_day"></td>
</tr><tr><td align="center" class="navtext">18<br><input type="radio" value="18" name="end_day"></td>
<td align="center" class="navtext">19<br><input type="radio" value="19" name="end_day"></td>
<td align="center" class="navtext">20<br><input type="radio" value="20" name="end_day"></td>
<td align="center" class="navtext">21<br><input type="radio" value="21" name="end_day"></td>
<td align="center" class="navtext">22<br><input type="radio" value="22" name="end_day"></td>
<td align="center" class="navtext">23<br><input type="radio" value="23" name="end_day"></td>
<td align="center" class="navtext">24<br><input type="radio" value="24" name="end_day"></td>
</tr><tr><td align="center" class="navtext">25<br><input type="radio" value="25" name="end_day"></td>
<td align="center" class="navtext">26<br><input type="radio" value="26" name="end_day"></td>
<td align="center" class="navtext">27<br><input type="radio" value="27" name="end_day"></td>
<td align="center" class="navtext">28<br><input type="radio" value="28" name="end_day"></td>
<td align="center" class="navtext">29<br><input type="radio" value="29" name="end_day"></td>
<td align="center" class="navtext">30<br><input type="radio" value="30" name="end_day"></td>
<td align="center" class="navtext">31<br><input type="radio" value="31" name="end_day"></td>
</tr>
  <tr>
    <td colspan="7" align="right">
    <b>Change:</b>
    <select size="1" name="end_month">
    <option value="7" selected>July</option>
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
    </select>
    <select size="1" name="end_year">
    <option value="2004" selected>2004</option>
    <option>2004</option>
    <option>2005</option>
    </select>
  <input type="submit" value="Submit" name="B1"></td>
  </tr>

</table>

</form>

<a href="javascript:test()">Test</a>

Desova · Oct 3, 2004

Shadow2531 said:

Here's an example.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Alert input value</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <meta http-equiv="Content-Style-Type" content="text/css"/>
        <meta http-equiv="Content-Script-Type" content="text/javascript"/>
    </head>
    <body>
        <form name="dates" action="" method="post">
           <div>
                <input type="radio" checked="checked" id="start_day" name="start_day" value="44"/>
           </div>
        </form>
        <script type="text/javascript">
            alert(document.dates.start_day.value);
            alert(document.forms.dates.start_day.value);
            alert(document.forms[0].start_day.value);
            alert(document.getElementById("start_day").value);
            if (document.getElementById("start_day").getAttribute("checked")) {
               alert("start_day is checked");
            } else {
                alert("start_day is not checked");
            }
        </script>
    </body>
</html>

document.getElementById("start_day").getAttribute("checked") will return true if it's checked.

The first 4 alerts should output 44. The last alert will output, "start_day is checked".

if you add the line

Code:

<input type="radio" id="start_day" name="start_day" value="45"/>

then it'll output undefined, undefined, undefined, 44 (regardless of which one is checked)

so it is possible to get the value of the one thats checked or would i need to loop through them all and check manually which one is checked?

Desova · Oct 3, 2004

is there any kind of error handling in javascript for exceptions?

i know in java theres try{}catch{} and in VB theres OnErrorResumeNext, so is there something in javascript that does the same?

lomn75 · Oct 3, 2004

Desova said:
if you add the line

Code:

<input type="radio" id="start_day" name="start_day" value="45"/>

then it'll output undefined, undefined, undefined, 44 (regardless of which one is checked)

so it is possible to get the value of the one thats checked or would i need to loop through them all and check manually which one is checked?

Try removing the id="start_day" specification, as I think that's what's causing problems. name is the expected means of linking radio buttons together, whereas id should (I think) always be unique.

vxspiritxv · Oct 3, 2004

Ahh hehe, simple.
alert(window.document.dates.start_day.value);

Forgot window

Shadow2531 · Oct 4, 2004

Desova said:
if you add the line

Code:

<input type="radio" id="start_day" name="start_day" value="45"/>

then it'll output undefined, undefined, undefined, 44 (regardless of which one is checked)

At least the document.getElementByID method works for you.

What browser are you testing this with? Safari or konqueror? Opera, Firefox and IE all do as I described. (it might not if the form is in another window or something like said above).

Desova · Oct 5, 2004

Shadow2531 said:
At least the document.getElementByID method works for you.

What browser are you testing this with? Safari or konqueror? Opera, Firefox and IE all do as I described. (it might not if the form is in another window or something like said above).

IE. i've written out a proper script that handles it for now, basically looping through all the values and noting the one thats checked.

simple javascript question :)

Desova

Limp Gawd

Shadow2531

[H]ard|Gawd

Desova

Limp Gawd

Shadow2531

[H]ard|Gawd

Desova

Limp Gawd

Desova

Limp Gawd

Desova

Limp Gawd

lomn75

Purple Ace

vxspiritxv

[H]ard|Gawd

Shadow2531

[H]ard|Gawd

Desova

Limp Gawd