undefined field error message

Discussion in 'Javascript' started by Xerxes, Feb 27, 2006.

  1. Xerxes

    Xerxes Guest

    Hi,
    I have a script that is supposed to check if one of the radio buttons
    in a form is checked and either display an "alert" or go to another
    page.

    <html>
    <head>
    <title></title>
    </head>
    <body>
    <script type="text/Javascript">
    function getRadioButtonChecked (radio){
    for (var i = 0; i < radio.length; i++){
    if (radio.checked){
    return true;
    }
    }
    return false;
    }
    </script>

    <form name="myform" method="post" action="somefile.php">
    <input id="req_any" name="req_any" type="radio" value="AVM-MC1"
    onClick="if (this.checked)
    document.getElementById('qty_AVM-MC1').value='1'; else
    document.getElementById('qty_AVM-MC1').value='0'">Product1<br />
    <input type="hidden" id="qty_AVM-MC1" name="qty_AVM-MC1" value="0">
    <input id="req_any" name="req_any" type="radio" value="AVM-HTC1"
    onClick="if (this.checked)
    document.getElementById('qty_AVM-HTC1').value='1'; else
    document.getElementById('qty_AVM-HTC1').value='0'">Product2<br />
    <input type="hidden" id="qty_AVM-HTC1" name="qty_AVM-HTC1" value="0">
    <br />
    <span style="margin-left:40%;">
    <input name="OK" type="submit" value="Add" onClick="if
    (getRadioButtonChecked(document.getElementById('req_any'))){document.location.href='anotherfile.php';
    return true;} else{ alert('You must select one of the required
    options.'); return false;}">
    </span>
    <span style="margin-left:50;">
    <input name="Cancel" type="button" value="Cancel"
    onClick="document.location.href='cancel.php'">
    </span>
    </form>
    </body>

    When I click on the "Add" button, I get a javascript error saying
    "radio is not defined". What am I doing wrong?
     
    Xerxes, Feb 27, 2006
    #1
    1. Advertising

  2. Xerxes

    Lee Guest

    Xerxes said:
    >
    >Hi,
    >I have a script that is supposed to check if one of the radio buttons
    >in a form is checked and either display an "alert" or go to another
    >page.
    >
    ><html>
    ><head>
    ><title></title>
    ></head>
    ><body>
    ><script type="text/Javascript">
    >function getRadioButtonChecked (radio){
    > for (var i = 0; i < radio.length; i++){
    > if (radio.checked){
    > return true;
    > }
    > }
    > return false;
    >}
    ></script>
    >
    ><form name="myform" method="post" action="somefile.php">
    ><input id="req_any" name="req_any" type="radio" value="AVM-MC1"
    >onClick="if (this.checked)
    >document.getElementById('qty_AVM-MC1').value='1'; else
    >document.getElementById('qty_AVM-MC1').value='0'">Product1<br />
    ><input type="hidden" id="qty_AVM-MC1" name="qty_AVM-MC1" value="0">
    ><input id="req_any" name="req_any" type="radio" value="AVM-HTC1"
    >onClick="if (this.checked)
    >document.getElementById('qty_AVM-HTC1').value='1'; else
    >document.getElementById('qty_AVM-HTC1').value='0'">Product2<br />
    ><input type="hidden" id="qty_AVM-HTC1" name="qty_AVM-HTC1" value="0">
    ><br />
    ><span style="margin-left:40%;">
    ><input name="OK" type="submit" value="Add" onClick="if
    >(getRadioButtonChecked(document.getElementById('req_any'))){document.location.href='anotherfile.php';
    >return true;} else{ alert('You must select one of the required
    >options.'); return false;}">
    ></span>
    ><span style="margin-left:50;">
    ><input name="Cancel" type="button" value="Cancel"
    >onClick="document.location.href='cancel.php'">
    ></span>
    > </form>
    ></body>
    >
    >When I click on the "Add" button, I get a javascript error saying
    >"radio is not defined". What am I doing wrong?


    Arranged roughly from serious to minor:

    1. You've got two elements with the same id, which is illegal.
    2. The action of your form specifies one URL, but the onclick handler of your
    submit button specifies another. Maybe you just forgot which bogus name you
    were using?
    3. You're using getElementById() to get a reference to an element in the same
    form.
    4. You're validating in the onclick handler of the submit button instead of in
    the onsubmit handler of the form.
    5. You're including too much Javascript in-line with your HTML instead of in
    functions in a <script> block.
    6. You've got a script block in the body that would be better in the head.

    <html>
    <head>
    <title></title>
    <script type="text/Javascript">
    function getRadioButtonChecked (radio){
    for (var i = 0; i < radio.length; i++){
    if (radio.checked){
    return true;
    }
    }
    alert('You must select one of the required options.');
    return false;
    }
    </script>
    </head>
    <body>
    <form name="myform"
    method="post"
    action="somefile.php"
    onsubmit="return getRadioButtonChecked(req_any)">
    <input name="req_any"
    type="radio"
    value="AVM-MC1"
    onclick="this.form.qty_AVM_MC1=this.checked?1:0">Product1<br />
    <input type="hidden"
    id="qty_AVM-MC1"
    name="qty_AVM-MC1"
    value="0">
    <input name="req_any"
    type="radio"
    value="AVM-HTC1"
    onclick="this.form.qty_AVM_HTC1=this.checked?1:0">Product2<br />
    <input type="hidden"
    id="qty_AVM-HTC1"
    name="qty_AVM-HTC1"
    value="0">
    <br />
    <span style="margin-left:40%;">
    <input name="OK"
    type="submit"
    value="Add">
    </span>
    <span style="margin-left:50;">
    <input name="Cancel"
    type="button"
    value="Cancel"
    onClick="document.location.href='cancel.php'">
    </span>
    </form>
    </body>
    </html>
     
    Lee, Feb 27, 2006
    #2
    1. Advertising

  3. Xerxes

    Xerxes Guest

    Hi Lee,
    thanks a lot for the info.
    The page is generated dynamically through a php file. I made the
    changes you suggested and thsi the resuting page, which seems to
    satisfy your suggestions. Thejavascript console still shows the same
    error message: "error: radio is not defined".

    <html>
    <head>
    <title></title>
    <script type="text/Javascript">
    function getRadioButtonChecked (radio){
    for (var i = 0; i < radio.length; i++){
    if (radio.checked){
    alert(radio+i+' is checked');
    return true;
    }
    }
    alert("You must select one of the required options.");
    return false;
    }
    </script>
    </head>

    <body topmargin="70">
    <form name="error_form" method="post" action="add_additional.php"
    onsubmit="return getRadioButtonChecked('req_any')">
    <div class="msgDiv">
    <div width="300" class="contentMsgHeader">
    Error message is printed here...<br />
    </div>
    <span class="contentMsg">
    <input class="errorFormInput"
    name="req_any"
    type="radio"
    value="AVM-MC1"
    onClick="this.form.qty_AVM-MC1.value=if
    (this.checked)?1:0">Prodcut1</span><br />
    <input type="hidden"
    id="qty_AVM-MC1"
    name="qty_AVM-MC1" value="0">
    <span class="contentMsg">
    <input class="errorFormInput"
    name="req_any"
    type="radio"
    value="AVM-HTC1"
    onClick="this.form.qty_AVM-HTC1.value=if
    (this.checked)?1:0">Prodcut2</span><br />
    <input type="hidden"
    id="qty_AVM-HTC1"
    name="qty_AVM-HTC1"
    value="0">
    </div>
    </div>
    <br /><span style="margin-left:40%;">
    <input name="OK"
    type="submit"
    value="Add Additional">
    </span>
    <span style="margin-left:50;">

    <input name="Cancel"
    type="button"
    value="Cancel"
    onClick="document.location.href='cancel_addition.php'">
    </span>
    </form>
    </body>

    Thanks for your help.
     
    Xerxes, Feb 28, 2006
    #3
  4. Xerxes

    web.dev Guest

    Xerxes wrote:
    > Hi Lee,
    > thanks a lot for the info.
    > The page is generated dynamically through a php file. I made the
    > changes you suggested and thsi the resuting page, which seems to
    > satisfy your suggestions. Thejavascript console still shows the same
    > error message: "error: radio is not defined".


    The error message is correct.

    > function getRadioButtonChecked (radio){
    > for (var i = 0; i < radio.length; i++){
    > if (radio.checked){
    > alert(radio+i+' is checked');
    > return true;
    > }
    > }
    > alert("You must select one of the required options.");
    > return false;
    > }


    You have an input element with the value of "req_any" for the name
    attribute. When the form gets submitted, you pass a _string_ to your
    function getRadioButtonChecked. However, in your function, you're
    trying to use "radio" as an object, when in reality you passed to it a
    string. Try modifying your code like so:

    javascript:

    function getRadioButtonChecked(myForm)
    {
    for(var i = 0; i < myForm.elements["req_any"].length; i++)
    {
    if(myForm.elements["req_any"].checked)
    {
    alert("radio " + i + " is checked");

    return true;
    }
    }

    alert("You must select one of the required options.");

    return false;
    }

    html:

    <form [...add form attributes...] onsubmit = "return
    getRadioButtonChecked(this)">
    [...add your form controls...]
    </form>
     
    web.dev, Feb 28, 2006
    #4
  5. Xerxes

    Xerxes Guest

    Thanks alot for your help. Your suggestion worked.
     
    Xerxes, Feb 28, 2006
    #5
  6. Xerxes

    Lee Guest

    Xerxes said:
    >
    >Hi Lee,
    >thanks a lot for the info.
    >The page is generated dynamically through a php file. I made the
    >changes you suggested and thsi the resuting page, which seems to
    >satisfy your suggestions. Thejavascript console still shows the same
    >error message: "error: radio is not defined".
    >
    ><html>
    ><head>
    ><title></title>
    ><script type="text/Javascript">
    >function getRadioButtonChecked (radio){
    > for (var i = 0; i < radio.length; i++){
    > if (radio.checked){
    > alert(radio+i+' is checked');
    > return true;
    > }
    > }
    > alert("You must select one of the required options.");
    > return false;
    >}
    ></script>
    ></head>
    >
    ><body topmargin="70">
    ><form name="error_form" method="post" action="add_additional.php"
    >onsubmit="return getRadioButtonChecked('req_any')">


    Remove the quotes from around req_any.
    You want to pass a reference to the form element req_any,
    not the name of the element.
     
    Lee, Feb 28, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Mantorok Redgormor
    Replies:
    70
    Views:
    1,801
    Dan Pop
    Feb 17, 2004
  2. Replies:
    0
    Views:
    342
  3. Sound
    Replies:
    2
    Views:
    465
    Randy Webb
    Sep 28, 2006
  4. Replies:
    2
    Views:
    184
    Praveen
    Feb 3, 2007
  5. jr
    Replies:
    3
    Views:
    450
Loading...

Share This Page