CODEWITHSUNDEEP
javascriptjqueryhtmlformscheckbox
valdroni
valdroni

Reputation: 168

Update form fields based on checkbox selections

I have a form with 6 check-boxes and 6 hidden text fields which need to be changed based on checkbox selections

HTML:

<input type="checkbox" value="Auto" id="auto_Auto" name="auto" class="checkbox form_elem_auto"><label for="auto_Auto" id="label_auto">Auto</label>
<br />

<input type="checkbox" value="Home" id="home_Home" name="home" class="checkbox form_elem_home"><label for="home_Home" id="label_home">Home</label>
<br />

<input type="checkbox" value="Life" id="life_Life" name="life" class="checkbox form_elem_life"><label for="life_Life" id="label_life">Life</label>
<br />

<input type="checkbox" value="Health" id="health_Health" name="health" class="checkbox form_elem_health"><label for="health_Health" id="label_health">Health</label>
<br />

<input type="checkbox" value="Medicare" id="medicare_Medicare" name="medicare" class="checkbox form_elem_medicare"><label for="medicare_Medicare" id="label_medicare">Medicare</label>
<br />

<input type="checkbox" value="Renters" id="renters_Renters" name="renters" class="checkbox form_elem_renters"><label for="renters_Renters" id="label_renters">Renters</label>
<br />


<input id="auto_h" name="auto_h" class="hidden" value="FALSE" ><br />
<input id="home_h" name="home_h" class="hidden" value="FALSE" ><br />
<input id="life_h" name="life_h" class="hidden" value="FALSE" ><br />
<input id="health_h" name="health_h" class="hidden" value="FALSE" ><br />
<input id="medicare_h" name="medicare_h" class="hidden" value="FALSE" ><br />
<input id="renters_h" name="renters_h" class="hidden" value="FALSE" >

I would like to when checkbox id="auto_Auto" name="auto" is checked, the hidden field be updated with TRUE and when left unchecked to be updated/remain at FALSE. Similarly with other check-boxes and their hidden form equivalents

I have tried modifying the jQuery triggers from this SO answer but whenever check-boxes are checked, all the hidden fields get updated with TRUE

Here's the demo

Upvotes: 1

Views: 1503

Answers (4)

Jimish Gamit
Jimish Gamit

Reputation: 1024

$(function () {
    $("input[type=checkbox]").on('change', function () {
       var name = $(this).attr('name');
       $("#"+name+"_h").val($(this).is(':checked') ? 'TRUE' : 'FALSE'); 

    });
    var name = $(this).attr('name').replace(/_h$/, '');
    if ($(this).val()) {
      $('[name="' + name + '"]').prop('checked', true);
   } else {
      $('[name="' + name + '"]').prop('checked', false);
   }
});

You always have reference using name. Your hidden input has id: CLICKED_OBJECT.name+"_h" UPDATE:

Set value to "false" by default

<input type="text" id="auto_h" name="auto_h" class="hidden" value='FALSE'><br />
<input type="text" id="home_h" name="home_h" class="hidden"  value='FALSE'><br />
<input type="text" id="life_h" name="life_h" class="hidden"  value='FALSE'><br />
<input type="text" id="health_h" name="health_h" class="hidden"  value='FALSE'><br />
<input type="text" id="medicare_h" name="medicare_h" class="hidden"  value='FALSE'><br />
<input type="text" id="renters_h" name="renters_h" class="hidden"  value='FALSE'>

Upvotes: 4

Charly Arnold Geddam
Charly Arnold Geddam

Reputation: 44

Looks like $.nextAll is setting values for all the fields. 

$(function () {
    $("input[type=checkbox]").on('change', function () {

        //$(this).nextAll('.hidden').val($(this).is(':checked') ? 'TRUE' : 'FALSE');
        $('#'+$(this).attr('name')+'_h').val($(this).is(':checked') ? 'TRUE' : 'FALSE');
    });
    $("input[type=text]").on('keyup', function () {
        if ($(this).val()) {
            $(this).prevAll('.auto_h:first').prop('checked', true);
        } else {
            $(this).prevAll('.auto_h:first').prop('checked', false);
        }
    });
});

Upvotes: 1

jcubic
jcubic

Reputation: 66488

You can target specific input with this code:

$("input[type=checkbox]").on('change', function () {
    var name = $(this).attr('name') + '_h';
    $('#' + name).val($(this).is(':checked') ? 'TRUE' : 'FALSE');
}).change();
$("input[type=text]").on('keyup', function () {
    var name = $(this).attr('name').replace(/_h$/, '');
    if ($(this).val()) {
        $('[name="' + name + '"]').prop('checked', true);
    } else {
        $('[name="' + name + '"]').prop('checked', false);
    }
});

FIDDLE

Upvotes: 4

Yash Vora
Yash Vora

Reputation: 61

Try searching for the hidden field based on it's attribute

$("[name="+$(this).attr('name')+"_h]").val($(this).is(':checked') ? 'TRUE' : 'FALSE');

Here's the fiddle

Upvotes: 1

Related Questions