Question

I’m trying to use hidden fields in a form to pass along state selections instead of checkboxes so that I can improve ui a bit and also not have to deal with the cumbersome posting of checkbox fields to classic asp server pages.

I created a test example of what I’m trying to do here: jsFiddle example of problem

I’m using the 2 character state text value of the div to update the value of the hidden fields. When I hit the select all link, I’m check the value for ‘#statesTX’ expecting it to be ‘TX’ but finding that it contains all of the text values for each div.

Is there a way to get that select all link to up date each hidden field with the text value of its individual parent div?

Answer 1

Check below code and see if this is something that you want,

DEMO

var $boxes = $('.boxes');

$('#lightall').click(function() {
    $boxes.each(function () {
        $(this).find('input[type=hidden]').val($(this).text());
    });
    $boxes.addClass('lights');
    alert('statesAL: ' + $('#statesAL').val());
});

$('#lightnone').click(function() {
    $('.boxes input[type=hidden]').val('');
    $boxes.removeClass('lights');
    alert('statesTX: ' + $('#statesTX').val());
});