How to Make a Checkbox to Change a Hidden Field Value

Written by rick leander
  • Share
  • Tweet
  • Share
  • Email

Developers who build high volume, high performance web sites know that the less done on the web server, the better. One way to avoid server activity is by saving critical data in hidden input fields on a web page. Hidden fields are not secure, but work well for record identifiers, intermediate results and other application-specific data. It's not easy, but by following several steps you can learn how to modify hidden fields on the browser using JavaScript.

Skill level:
Easy

Other People Are Reading

Things you need

  • Notepad or other text editor
  • Internet Explorer, Firefox or other web browser

Show MoreHide

Instructions

  1. 1

    Open Notepad and copy the following HTML code to create a simple web form.

    <html>

    <head>

    <title>Checkbox Demo</title>

    <script language="javascript">

    </script>

    </head>

    <body>

    <form name="form1">

    <input type="checkbox" name="ckBox" id="ckBox" />

    <label for="ckbox">Check here</label>

    <br/><br/>

    <input type="hidden" name="hiddenBox" id="hiddenBox" value="" />

    </form>

    This code creates a simple web form with a checkbox and a hidden field.

  2. 2

    Save the file as checkBoxDemo.htm. In Notepad, click "File" then "Save As" from the pull-down menus. When the file save dialogue appears, change the file type to "All Files" then enter checkBoxDemo.htm in the file name and click "Save".

  3. 3

    Add a JavaScript function to update the hidden field when the check box gets clicked. Copy the following code between the start and end script tags:

    <script language="javascript">

    function ckBox_click() {

    var ckBox = document.forms.form1.ckBox;

    var hidden Box = document.forms.form1.hiddenBox;

    if (ckBox.checked == true)

    hiddenBox.value = "Checked";
    

    else

    hiddenBox.value = "Not checked";
    

    }

    </script>

    The function creates variables that represent the two input fields ckBox and hidden Box. It then determines the state of the check box - true if checked, false if not checked - then sets the value of the hidden field to "Checked" or "Not Checcked" depending on the state of the check box.

  4. 4

    Ad an event handler to the checkbox that calls the new function ckBox_click when the checkbox gets clicked. Change the checkbox tag as follows:

    <input type="checkbox" name="ckBox" id="ckBox" onClick='ckBox_click();' />

    The on Click event handler was selected because it fires any time the box gets clicked. The on Change event only fires in Internet Explorer when the check box gets checked, not when it gets cleared.

  5. 5

    Change the hidden input field to a text input field. This allows us to view the results of the JavaScript function.

    <input type="text" name="hiddenBox" id="hiddenBox" value="" />

  6. 6

    Save the changes by clicking "File" then "Save".

  7. 7

    Test the code. Open Internet Explorer or any JavaScript-enabled web browser then load the file. In Internet Explorer, click "File" then "Open" then click the "Browse" button and navigate to the checkBoxDemo.htm file. When the file loads, click the checkbox several times to observe how the text input field changes.

Tips and warnings

  • On the server side, the hidden input fields can be accessed in the same manner as a text input box.
  • Do not store passwords or other sensitive data in hidden fields. Anyone can click "View" then "Source" to see the contents of the hidden fields.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.