Display/Hide Fields using radio buttons

Discussion in 'Javascript' started by DettCom, Sep 29, 2004.

  1. DettCom

    DettCom Guest

    Hello,

    I would like to be able to display or hide fields based on whether a
    specific Yes/No radio button is selected. This is in conjunction with
    a posting a just made here in the same group related to checkboxes.

    Thanks!!!
     
    DettCom, Sep 29, 2004
    #1
    1. Advertising

  2. You can do this with divs and showing and hiding the divs as required based
    on the radios selected.
    I do this all the time with stuff I do for work.

    Stu

    "DettCom" <> wrote in message
    news:...
    > Hello,
    >
    > I would like to be able to display or hide fields based on whether a
    > specific Yes/No radio button is selected. This is in conjunction with
    > a posting a just made here in the same group related to checkboxes.
    >
    > Thanks!!!
     
    Stuart Palmer, Sep 29, 2004
    #2
    1. Advertising

  3. DettCom

    DettCom Guest

    Stuart, thanks for the reply. However, that is what I have been trying
    with checkboxes (assume it is the same in theory). Here is the simple
    code that i have been experiencing with:

    <input type="checkbox"
    onclick="if(document.all)del.style.display='none'"">
    <div id ="del">
    Your address <input type="text" name="address">
    .....the rest of the deleivery fields
    </div>



    For the life of me.... I cannot figure it out.


    "Stuart Palmer" <> wrote in message news:<>...
    > You can do this with divs and showing and hiding the divs as required based
    > on the radios selected.
    > I do this all the time with stuff I do for work.
    >
    > Stu
    >
    > "DettCom" <> wrote in message
    > news:...
    > > Hello,
    > >
    > > I would like to be able to display or hide fields based on whether a
    > > specific Yes/No radio button is selected. This is in conjunction with
    > > a posting a just made here in the same group related to checkboxes.
    > >
    > > Thanks!!!
     
    DettCom, Sep 29, 2004
    #3
  4. DettCom

    Evertjan. Guest

    DettCom wrote on 29 sep 2004 in comp.lang.javascript:

    > Stuart, thanks for the reply. However, that is what I have been trying
    > with checkboxes (assume it is the same in theory). Here is the simple
    > code that i have been experiencing with:
    >
    > <input type="checkbox"
    > onclick="if(document.all)del.style.display='none'"">
    > <div id ="del">
    > Your address <input type="text" name="address">
    > ....the rest of the deleivery fields
    > </div>


    <input type="checkbox" checked
    onclick="getElementById('del').style.display=
    (this.checked)?'':'none'">


    <div id ="del">
    Your address <input type="text" name="address">
    .....the rest of the deleivery fields
    </div>

    IE6 tested, cross browser suspected.

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress,
    but let us keep the discussions in the newsgroup)
     
    Evertjan., Sep 29, 2004
    #4
  5. DettCom

    RobG Guest

    Evertjan. wrote:

    [snip]
    > <input type="checkbox" checked
    > onclick="getElementById('del').style.display=
    > (this.checked)?'':'none'">
    >
    >
    > <div id ="del">
    > Your address <input type="text" name="address">
    > .....the rest of the deleivery fields
    > </div>

    [snip]

    You should also play with the element's visibility attribute
    to see if that suits your purpose too. If you set
    display='none', the element takes up zero space on the page
    and all the other elements whose position on the page is
    based on the one you just hid will move (maybe quite a lot).
    Similarly in reverse when you display it, both of which
    can be quite disconcerting for users.

    Using the visibility attribute, the element still takes up
    room on the page so when you hide/reveal it, nothing moves
    (well, sometimes things move a little bit in some browsers...).

    Lastly, make sure your page still works with JavaScript
    turned off - sometimes things are hidden using an in-line
    stylen or CSS then revealed using JS to modify the style.
    Users with JS turned of can't get to see the hidden do-dad.

    Cheers, Rob.
     
    RobG, Sep 30, 2004
    #5
  6. DettCom

    Evertjan. Guest

    RobG wrote on 30 sep 2004 in comp.lang.javascript:
    > Lastly, make sure your page still works with JavaScript
    > turned off - sometimes things are hidden using an in-line
    > stylen or CSS then revealed using JS to modify the style.
    > Users with JS turned of can't get to see the hidden do-dad.


    I don't agree completely.

    If users want to have their JS turned off,
    one should have them recognize what they miss,
    not accommodate them with a subquality page,
    unless you really need them as customers.


    <noscript>
    You silly ass!<br>
    Without javascript this page is not what it should be<br>
    Better look elswhere or change your ways
    </noscript>

    or

    <div id='scripted'>
    You silly ass!<br>
    Without javascript this page is not what it should be<br>
    Better look elswhere or change your ways
    </div>
    <script>
    document.getElementById('scripted').style.display='none'
    </script>


    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress,
    but let us keep the discussions in the newsgroup)
     
    Evertjan., Sep 30, 2004
    #6
  7. DettCom

    DettCom Guest

    Robert, that works!!! I have another posting that basically needs to
    do the same thing, but will use a single checkbox. Can you help???

    Thanks!!!





    Robert <> wrote in message news:<>...
    > In article <>,
    > (DettCom) wrote:
    >
    > > I would like to be able to display or hide fields based on whether a
    > > specific Yes/No radio button is selected. This is in conjunction with
    > > a posting a just made here in the same group related to checkboxes.

    >
    >
    > This javascript should help. The validation is very simple and there
    > are a lot of alerts so you can follow what is happening.
    >
    > Robert
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    > "http://www.w3.org/TR/html4/loose.dtd">
    > <html>
    > <head>
    > <title>Radio buttons</title>
    >
    > <style type="text/css">
    > .formStyle {position:relative;}
    > </style>
    >
    > <script type="text/javascript">
    >
    > function validate()
    > {
    >
    > var x = document.forms["myForm"];
    > var checkedButton;
    >
    > // Figure out which radio button was pressed
    > checkedButton = findValue(x.receiveVia);
    >
    > var varName = x.theName.value;
    > var varEmail = x.theEmail.value;
    > var varAddress = x.theAddress.value;
    >
    > alert("checkedButton = " + checkedButton +
    > " varName = " + varName +
    > " varEmail = " + varEmail +
    > " varAddress = " + varAddress);
    >
    > // I changed submitOK to a boolean variable.
    > var submitOK = true;
    >
    > // Validate email: name and email
    >
    > if (checkedButton == "byEmail")
    > {
    > alert("verifying email fields.");
    >
    > if (varName == '')
    > {
    > alert("Please fill in your Name");
    > submitOK = false;
    > }
    > if (varEmail == '')
    > {
    > alert("Please fill in Email");
    > submitOK = false;
    > }
    > if (varAddress != '')
    > {
    > alert("Please erase the address field.");
    > submitOK = false;
    > }
    >
    > return submitOK;
    >
    > }
    >
    > // Validate print: name, email, and address
    >
    > else if (checkedButton=="printed")
    > {
    > alert("Verifying printed fields");
    > // Error message should be in the order on the form
    > if (varName.length == '')
    > {
    > alert("Please fill in your Name");
    > submitOK = false;
    > }
    > if (varEmail == '')
    > {
    > alert("Please fill in Email");
    > submitOK = false;
    > }
    > if (varAddress == '')
    > {
    > alert("You must enter your Address");
    > submitOK = false;
    > }
    >
    > return submitOK;
    > }
    > else
    > {
    > alert("You need to select either email or print.");
    > return false;
    > }
    >
    > }
    >
    > function showHidden(doWhat)
    > {
    > // Check if the getElementById method is available
    > if (document.getElementById)
    > {
    > document.getElementById("field3").style.display = doWhat;
    > }
    > else if (document.all)
    > {
    > alert("Running an older version of IE.");
    > document.all.field3.style.display = doWhat;
    > }
    > else
    > { alert("Cannot change visibility of address field"); }
    > }
    >
    > // See which radio button is selected and return its value
    > function findValue(obj)
    > {
    > var i, theValue;
    > theValue = null;
    >
    > for (i=0;i<obj.length;i++)
    > {
    > if (obj.checked == true)
    > {
    > theValue = obj.value;
    > break;
    > }
    > }
    >
    > return theValue;
    > }
    > </script>
    >
    > </head>
    >
    > <body>
    >
    > <p>Please try out our form.</p>
    >
    > <form name="myForm"
    > action="http://www.nonamedomain.com"
    > method="POST"
    > onsubmit="alert('submitting');return validate();">
    > <p><input type="radio" name="receiveVia" value="printed"
    > onclick="showHidden('');">&nbsp;Printed
    > brochure</p>
    > <p><input type="radio" name="receiveVia" value="byEmail"
    > onclick="showHidden('none');
    > document.forms['myForm'].theAddress.value = '';">&nbsp;Via
    > Email</p>
    > <p>Name:<br>
    > <input type="text" name="theName" size="20"><br><br>
    > Email:<br>
    > <input type="text" name="theEmail" size="20"><br>
    > <script type="text/javascript">
    > // Only insert a div if we can change it
    > if (document.getElementById || document.all)
    > { document.write("<div id='field3' class='formStyle'>");}
    > </script>
    > Postal address:<br>
    > <input type="text" name="theAddress" size="40">
    > <script type="text/javascript">
    > if (document.getElementById || document.all)
    > { document.write("</div>");}
    > </script>
    > </p>
    >
    > <p><input type="submit"
    > border="0"
    > value="Submit form"
    > width="75"
    > height="17"
    > ALT="Submit button"></p>
    >
    > </form>
    >
    > <script type="text/javascript">
    > // In the case of a reload, the radio button may already be clicked.
    > // This code needs to be after the form.
    > var x = document.forms["myForm"];
    > if (x.receiveVia[0].checked == true)
    > { showHidden('');}
    > else if (x.receiveVia[1].checked == true)
    > { showHidden('none');}
    > else
    > { ;}
    >
    > </script>
    > </body>
    > </html>
     
    DettCom, Sep 30, 2004
    #7
  8. On 30 Sep 2004 07:41:49 GMT, Evertjan. <>
    wrote:

    > RobG wrote on 30 sep 2004 in comp.lang.javascript:
    >
    >> Lastly, make sure your page still works with JavaScript
    >> turned off - sometimes things are hidden using an in-line
    >> stylen or CSS then revealed using JS to modify the style.
    >> Users with JS turned of can't get to see the hidden do-dad.

    >
    > I don't agree completely.
    >
    > If users want to have their JS turned off,
    > one should have them recognize what they miss,
    > not accommodate them with a subquality page,
    > unless you really need them as customers.


    And if they have no control over the settings? What good does that do?

    A page is hardly substandard if it just shows a few more elements than one
    that is scripted. It is functional, and that is what matters!

    [snip]

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Sep 30, 2004
    #8
  9. DettCom

    Robert Guest

    (DettCom) wrote in message news:<>...
    > Robert, that works!!! I have another posting that basically needs to
    > do the same thing, but will use a single checkbox. Can you help???


    OK, the coding is vary similiar.

    The code fragment accesses a true/false variable:
    document.forms["myForm"].elements["receiveVia"].checked

    Robert

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Radio buttons</title>

    <style type="text/css">
    ..formStyle {position:relative;}
    </style>

    <script type="text/javascript">

    function validate()
    {

    var x = document.forms["myForm"];


    var varName = x.theName.value;
    var varEmail = x.theEmail.value;
    var varAddress = x.theAddress.value;

    alert(
    " varName = " + varName +
    " varEmail = " + varEmail +
    " varAddress = " + varAddress);

    // I changed submitOK to a boolean variable.
    var submitOK = true;

    // Validate email: name and email

    if(x.elements["receiveVia"].checked)
    {
    alert("verifying email fields.");

    if (varName == '')
    {
    alert("Please fill in your Name");
    submitOK = false;
    }
    if (varEmail == '')
    {
    alert("Please fill in Email");
    submitOK = false;
    }
    if (varAddress != '')
    {
    alert("Please erase the address field.");
    submitOK = false;
    }

    return submitOK;

    }

    // Validate print: name, email, and address

    else
    {
    alert("Verifying printed fields");
    // Error message should be in the order on the form
    if (varName.length == '')
    {
    alert("Please fill in your Name");
    submitOK = false;
    }
    if (varEmail == '')
    {
    alert("Please fill in Email");
    submitOK = false;
    }
    if (varAddress == '')
    {
    alert("You must enter your Address");
    submitOK = false;
    }

    return submitOK;
    }

    }

    function showHidden(doWhat)
    {
    // Check if the getElementById method is available
    if (document.getElementById)
    {
    document.getElementById("field3").style.display = doWhat;
    }
    else if (document.all)
    {
    alert("Running an older version of IE.");
    document.all.field3.style.display = doWhat;
    }
    else
    { alert("Cannot change visibility of address field"); }
    }

    function decideDisplay()
    {
    var x = document.forms["myForm"];
    if (x.receiveVia.checked == true)
    { showHidden('none');
    document.forms['myForm'].theAddress.value = '';
    }
    else
    { showHidden('');}
    }

    </script>

    </head>

    <body>

    <p>Please try out our form.</p>

    <form name="myForm"
    action="http://www.nonamedomain.com"
    method="POST"
    onsubmit="alert('submitting');return validate();">
    <p><input type="checkbox"
    name="receiveVia"
    value=""
    onclick="decideDisplay();">&nbsp;Via
    email</p>
    <p>Name:<br>
    <input type="text" name="theName" size="20"><br><br>
    Email:<br>
    <input type="text" name="theEmail" size="20"><br>
    <script type="text/javascript">
    // Only insert a div if we can change it
    if (document.getElementById || document.all)
    { document.write("<div id='field3' class='formStyle'>");}
    </script>
    Postal address:<br>
    <input type="text" name="theAddress" size="40">
    <script type="text/javascript">
    if (document.getElementById || document.all)
    { document.write("</div>");}
    </script>
    </p>

    <p><input type="submit"
    border="0"
    value="Submit form"
    width="75"
    height="17"
    ALT="Submit button"></p>

    </form>

    <script type="text/javascript">
    // In the case of a reload, the radio button may already be clicked.
    // This code needs to be after the form.
    decideDisplay();
    </script>
    </body>
    </html>
     
    Robert, Sep 30, 2004
    #9
  10. DettCom

    Robert Guest

    RobG <> wrote in message news:<YxK6d.1504$>...

    > You should also play with the element's visibility attribute
    > to see if that suits your purpose too.



    In this example, I use both the display and visibility attributes.

    Robert

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <META http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>CSS Display and Visibility</title>

    <script type="text/javascript">

    function validate(x)
    {
    var checkedButton;

    // Figure out which radio button was pressed

    checkedButton = findValue(x.receiveVia);

    var varName = x.theName.value;
    var varEmail = x.theEmail.value;
    var varAddress = x.theAddress.value;

    // I changed submitOK to a boolean variable.
    var submitOK = true;

    // Validate email: name and email

    if (checkedButton == "byEmail")
    {

    if (varName == '')
    {
    alert("Please fill in your Name");
    submitOK = false;
    }
    if (varEmail == '')
    {
    alert("Please fill in Email");
    submitOK = false;
    }
    if (varAddress != '')
    {
    alert("Please erase the address field.");
    submitOK = false;
    }

    return submitOK;

    }

    // Validate print: name, email, and address

    else if (checkedButton=="printed")
    {
    // Error messages should be in the order on the form
    if (varName.length == '')
    {
    alert("Please fill in your Name");
    submitOK = false;
    }
    if (varEmail == '')
    {
    alert("Please fill in Email");
    submitOK = false;
    }
    if (varAddress == '')
    {
    alert("You must enter your Address");
    submitOK = false;
    }

    return submitOK;
    }
    else
    {
    alert("You need to select either email or print.");
    return false;
    }

    }

    function vanishHidden(doWhat)
    {
    // Check if the getElementById method is available
    if (document.getElementById)
    {
    document.getElementById("hideSpan").style.display = doWhat;
    }
    else if (document.all)
    {
    alert("Running an older version of IE.");
    document.all.hideSpan.style.display = doWhat;
    }
    else
    { alert("Cannot change visibility of address field"); }
    }


    function hideHidden(doWhat)
    {
    // Check if the getElementById method is available
    if (document.getElementById)
    {
    document.getElementById("vanishSpan").style.visibility = doWhat;
    }
    else if (document.all)
    {
    alert("Running an older version of IE.");
    document.all.vanishSpan.style.visibility = doWhat;
    }
    else
    { alert("Cannot change display value of address field"); }
    }

    // See which radio button is selected and return its value
    function findValue(obj)
    {
    var i, theValue;
    theValue = null;

    for (i=0;i<obj.length;i++)
    {
    if (obj.checked == true)
    {
    theValue = obj.value;
    break;
    }
    }

    return theValue;
    }
    </script>

    </head>

    <body>

    <p>Please try out our form.</P>
    <P>This form uses the CSS display
    and visibility style attributes. When you click on the
    radio button email, Javascript code uses the display attribute
    property of hidden to exclude the address field from the display.
    No space will be taken up in the window.
    When you click on the no radio button, Javascript code uses the
    visibility attribute property of none to make the literature
    catagories invisible. Space will be taken up in the window.</p>

    <form name="myForm"
    action="http://www.notavalidurl.com"
    method="GET"
    onsubmit="return validate(document.forms['myForm']);">
    <p>
    <input type="radio"
    name="receiveVia"
    value="printed"
    onclick="vanishHidden('');">
    Printed brochure</p>
    <p>
    <input type="radio"
    name="receiveVia"
    value="byEmail"
    onclick="vanishHidden('none');
    document.forms['myForm'].theAddress.value = '';">
    Via Email</p>
    <p>Name:<br>
    <input type="text"
    name="theName"
    size="20"><br><br>
    Email:<br>
    <input type="text" name="theEmail" size="20">
    <br><br>
    <span id="hideSpan">
    Postal address:<br>
    <input type="text" name="theAddress" size="40">
    </span>
    </p>
    <p>
    Do you wish to receive additional literature?
    <br>
    <input type="radio"
    name="literature"
    value="yes"
    onclick="hideHidden('visible')";>&nbsp;Yes&nbsp;&nbsp;
    <!-- use visibility. -->
    <span id="vanishSpan">
    <input type="checkbox"
    name="gardening"
    value"gardening">&nbsp;Gardening
    <input type="checkbox"
    name="kitchen"
    value"kitchen">&nbsp;Kitchen
    <input type="checkbox"
    name="vacation"
    value"vacation">&nbsp;Vacation
    <!-- Just get it done. I know there are better ways. -->
    <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox"
    name="office"
    value"office">&nbsp;Office
    <input type="checkbox"
    name="secondhome"
    value"secondhome">&nbsp;Second Home
    </span>

    <br>
    <input type="radio"
    name="literature"
    value="no"
    onclick="hideHidden('hidden');
    var d=document.forms['myForm'];
    d.elements['gardening'].checked=false;
    d.elements['kitchen'].checked=false;
    d.elements['vacation'].checked=false;
    d.elements['office'].checked=false;
    d.elements['secondhome'].checked=false;">
    No
    </p>
    <p><input type="submit"
    border="0"
    value="Submit form"
    width="75"
    height="17"
    ALT="Submit button"></p>

    </form>

    <script type="text/javascript">
    // In the case of a reload, the radio button may already be clicked.
    // This code needs to be after the form.
    var x = document.forms["myForm"];
    if (x.receiveVia[0].checked == true)
    { vanishHidden('');}
    else if (x.receiveVia[1].checked == true)
    { vanishHidden('none');}
    else
    { ;}

    if (x.literature[0].checked == true)
    { hideHidden('visible');}
    else if (x.literature[1].checked == true)
    { hideHidden('hidden');}
    else
    { ;}

    </script>
    </body>
    </html>
     
    Robert, Oct 2, 2004
    #10
    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. Scott D Johnson
    Replies:
    1
    Views:
    1,075
    Scott D Johnson
    Sep 27, 2006
  2. Hiten
    Replies:
    1
    Views:
    626
    Vidar Petursson
    May 26, 2004
  3. Pat Scott
    Replies:
    0
    Views:
    110
    Pat Scott
    May 24, 2004
  4. Dr. Leff
    Replies:
    3
    Views:
    299
    David Mark
    Oct 15, 2007
  5. Dr. Leff
    Replies:
    3
    Views:
    231
    David Mark
    Oct 15, 2007
Loading...

Share This Page