Dynamic checkbox with Javascript

Discussion in 'Javascript' started by Steph, Jan 9, 2005.

  1. Steph

    Steph Guest

    Hello,

    Can someone tell me the script to use for having a change on the same page
    when using checkbox function ?

    For example, i would to check one condition and display dynamically a button
    if the condition is checked on the same page.

    Thanks in advance for your help

    Steph
     
    Steph, Jan 9, 2005
    #1
    1. Advertising

  2. Steph

    RobG Guest

    Steph wrote:
    [...]
    > For example, i would to check one condition and display dynamically a button
    > if the condition is checked on the same page.


    The script below uses an onload function to fire the click when the
    document loads. This is for two reasons:

    1. If the user has javascript disabled or their browser does not
    support it, the text box will still display and they can use it.
    Otherwise, it will not be shown when the checkbox is checked.

    2. You can set the checkbox to checked or not and the text input will
    display/not display on opening the page without you having to change
    the properties of the checkbox.

    One note of caution: if the user puts something into the input then
    unchecks the checkbox, the inupt is hidden but the text in it will
    still be submitted. So maybe you want to disable it when it is not
    displayed.

    You can also use:

    inp.style.visibility = 'visible' or 'hidden'

    if you want the text box to still take up space on the page when
    hidden.

    Lastly, if the page is big, the onload will fire after all content is
    loaded, so your text box may appear the disappear. To prevent that,
    move the onload to a script immediately after the input so the body tag
    becomes:

    <body>

    and put:

    <script type="text/javascript">
    clickIt('aForm','aCheckbox');
    </script>

    immediately after the text input. I think putting it in the body
    onload is cleaner, but obviously having the input flash on then off may
    be disconcerting for users.



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html><head>
    <title>Dynamic text box</title>
    <script type="text/javascript">
    function showHide(chk,inp){
    if (chk.checked) {
    inp.style.display = '';
    } else {
    inp.style.display = 'none';
    }
    }

    function clickIt(frm,chk) {
    var x = document.forms[frm].elements[chk];
    if (x) x.click();
    }
    </script>
    </head>
    <body onload="clickIt('aForm','aCheckbox');">
    <form action="" name="aForm">
    <label for="aCheckbox">Click me&nbsp;<input type="checkbox"
    name="aCheckbox" id="aCheckbox" onclick="
    showHide(this,this.form.txtInput);
    ">
    </label><br>
    <input type="text" size="30" name="txtInput">
    </form>
    </body></html>


    --
    Rob
     
    RobG, Jan 10, 2005
    #2
    1. Advertising

  3. Steph

    Robert Guest

    In article <41e1c337$0$29419$>,
    "Steph" <> wrote:

    > For example, i would to check one condition and display dynamically a button
    > if the condition is checked on the same page.


    This may help:

    <!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>Radio buttons</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 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 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"
    valuegardening>&nbsp;Gardening
    <input type="checkbox"
    name="kitchen"
    valuekitchen>&nbsp;Kitchen
    <input type="checkbox"
    name="vacation"
    valuevacation>&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"
    valueoffice>&nbsp;Office
    <input type="checkbox"
    name="secondhome"
    valuesecondhome>&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
     
    Robert, Jan 10, 2005
    #3
  4. Steph

    Steph Guest

    "RobG" <> a écrit dans le message de news:
    aslEd.74$...
    > Steph wrote:
    > [...]
    >> For example, i would to check one condition and display dynamically a
    >> button if the condition is checked on the same page.

    >
    > The script below uses an onload function to fire the click when the
    > document loads. This is for two reasons:
    >
    > 1. If the user has javascript disabled or their browser does not
    > support it, the text box will still display and they can use it.
    > Otherwise, it will not be shown when the checkbox is checked.
    >
    > 2. You can set the checkbox to checked or not and the text input will
    > display/not display on opening the page without you having to change
    > the properties of the checkbox.
    >
    > One note of caution: if the user puts something into the input then
    > unchecks the checkbox, the inupt is hidden but the text in it will
    > still be submitted. So maybe you want to disable it when it is not
    > displayed.
    >
    > You can also use:
    >
    > inp.style.visibility = 'visible' or 'hidden'
    >
    > if you want the text box to still take up space on the page when
    > hidden.
    >
    > Lastly, if the page is big, the onload will fire after all content is
    > loaded, so your text box may appear the disappear. To prevent that,
    > move the onload to a script immediately after the input so the body tag
    > becomes:
    >
    > <body>
    >
    > and put:
    >
    > <script type="text/javascript">
    > clickIt('aForm','aCheckbox');
    > </script>
    >
    > immediately after the text input. I think putting it in the body
    > onload is cleaner, but obviously having the input flash on then off may
    > be disconcerting for users.
    >
    >
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    > <html><head>
    > <title>Dynamic text box</title>
    > <script type="text/javascript">
    > function showHide(chk,inp){
    > if (chk.checked) {
    > inp.style.display = '';
    > } else {
    > inp.style.display = 'none';
    > }
    > }
    >
    > function clickIt(frm,chk) {
    > var x = document.forms[frm].elements[chk];
    > if (x) x.click();
    > }
    > </script>
    > </head>
    > <body onload="clickIt('aForm','aCheckbox');">
    > <form action="" name="aForm">
    > <label for="aCheckbox">Click me&nbsp;<input type="checkbox"
    > name="aCheckbox" id="aCheckbox" onclick="
    > showHide(this,this.form.txtInput);
    > ">
    > </label><br>
    > <input type="text" size="30" name="txtInput">
    > </form>
    > </body></html>
    >
    >
    > --
    > Rob


    Thanks Rob,
    I will test and let you know ...
    Steph
     
    Steph, Jan 10, 2005
    #4
  5. Steph

    Steph Guest

    "Robert" <> a écrit dans le message de news:
    ...
    > In article <41e1c337$0$29419$>,
    > "Steph" <> wrote:
    >
    >> For example, i would to check one condition and display dynamically a
    >> button
    >> if the condition is checked on the same page.

    >
    > This may help:
    >
    > <!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>Radio buttons</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 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 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"
    > valuegardening>&nbsp;Gardening
    > <input type="checkbox"
    > name="kitchen"
    > valuekitchen>&nbsp;Kitchen
    > <input type="checkbox"
    > name="vacation"
    > valuevacation>&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"
    > valueoffice>&nbsp;Office
    > <input type="checkbox"
    > name="secondhome"
    > valuesecondhome>&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


    Thanks again for your help !
    Steph
     
    Steph, Jan 10, 2005
    #5
    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. tshad
    Replies:
    0
    Views:
    577
    tshad
    Apr 15, 2005
  2. Vikram

    disable checkbox list checkbox

    Vikram, Jan 25, 2006, in forum: ASP .Net
    Replies:
    1
    Views:
    1,429
    ThunderMusic
    Jan 25, 2006
  3. Michael Champagne
    Replies:
    4
    Views:
    358
    Matt Kruse
    Apr 20, 2004
  4. pizzy
    Replies:
    0
    Views:
    185
    pizzy
    Mar 23, 2005
  5. pizzy
    Replies:
    5
    Views:
    407
    pizzy
    Apr 12, 2005
Loading...

Share This Page