Enabling inactive fields by clicking on field

Is it possible to have a group of inactive fields where if one of the fields is clicked some of the fields become mandatory and some segments of code are run? Say for example you have three fields which are shown:

<input type="text" id="gov1" name="gov1">

<input type="text" id="parentb" name="parentb">

<input type="checkbox" name="child" id="child">

All three of these fields are initially inactive; but say you click on one of the fields it now makes the rest active and mandatory, and some segment of code is run on the field "parentb" and it is attributed at readonly.

window.onload = function(event)
{
    var $input2 = document.getElementById('dec');
    var $input1 = document.getElementById('parentb');
    $input1.addEventListener('keyup', function()
    {
        $input2.value = $input1.value;
    });
}

I have done a bit of searching around but i can't seem to find anything of use for this specific situation and i'm quite new to JavaScript so any sort of help would be great. Is this at all possible using JavaScript? Or is something similar to this possible?

Answers:

Answer

This method you are looking is called 'chained-select' method.

jQuery framework is used for example below:

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<form action="" method="get">
    <label>
    <input name="Government" type="checkbox" value="">Government</label>
    <br>
    <label>
    <input name="Parent" type="checkbox" id="parent_child_group" value="">Parent</label>
    <br>
    <label>Name of Child
    <input type="text" name="parent_child" value="" class="parent_child_group"></label>
    <br>
    <label>Other
    <input type="text" name="parent_other" value="" class="parent_child_group"></label>
</form>

<script type="text/javascript">
    $(document).ready(function () {
         $(function() {
             enable_cb();
             $("#parent_child_group").click(enable_cb);
         });

         function enable_cb() {
             if (this.checked) {
                 $("input.parent_child_group").removeAttr("disabled");
             } else {
                 $("input.parent_child_group").attr("disabled", true);
             }
         }
    });        
    </script>
    </body>
    </html>

Working example on JSFiddle: http://jsfiddle.net/farondomenic/fg7p8/1/

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.