CODEWITHSUNDEEP
javascriptjqueryhtmlform-submithidden-field
jumps4fun
jumps4fun

Reputation: 4132

How can I filter out which hidden form input types are posted?

I'm doing a custom checkbox variant, which uses hidden input elements. My problem is that normal checkboxes only post their value to the server, if the checkbox is checked. These custom checkboxes post values no matter what, so I have no way of knowing if the checkbox is actually checked or not, when reading the data server side.

Here is the fiddle I have used as an example

HTML:

<div class="row" id="checkboxes">
      <div class="col-xs-12">
         <div class="form-group">       
            <div class="col-md-6">
               <input name="checkbox1" type="hidden" value="0"/>
               <input name="checkbox2" type="hidden" value="0"/>
               <input name="checkbox3" type="hidden" value="0"/>
               <div class="btn-group" data-toggle="buttons">
                  <button type="button" class="btn btn-default" data-checkbox-name="checkbox1">Yes</button>
                  <button type="button" class="btn btn-default" data-checkbox-name="checkbox2">Maybe</button>
                  <button type="button" class="btn btn-default" data-checkbox-name="checkbox3">No</button>
               </div>
            </div>
         </div>
      </div>
   </div>

JavaScript:

$('.btn[data-checkbox-name]').click(function() {
    $('input[name="'+$(this).data('checkboxName')+'"]').val(
        $(this).hasClass('active') ? 0 : 1
    );
});

Now, in this matter, it actually uses the value of the checkbox to signal if it is checked or not. I however, need an arbitrary number of checkboxes, and I need all of the checkboxes to be able to send a specific value, instead of a name and a 0/1. Yes it is possible for me to programmatically give the checkboxes names where my needed value is a part of the name, and then substring-interpret it server side, but I'd rather return them seperately, for overview and simplicity.

So here is my version of the code:

HTML:

   <div class="row" id="checkboxes">
      <div class="col-xs-12">
         <div class="form-group">       
            <div class="col-md-6">
               <input name="checkbox1" type="hidden" value="A" data-value="0"/>
               <input name="checkbox2" type="hidden" value="B" data-value="0"/>
               <input name="checkbox3" type="hidden" value="C" data-value="0"/>
               <div class="btn-group" data-toggle="buttons">
                  <button type="button" class="btn btn-default" data-checkbox-name="checkbox1">Yes</button>
                  <button type="button" class="btn btn-default" data-checkbox-name="checkbox2">Maybe</button>
                  <button type="button" class="btn btn-default" data-checkbox-name="checkbox3">No</button>
               </div>
            </div>
         </div>
      </div>
   </div>

JavaScript:

$('.btn[data-checkbox-name]').click(function() {
    $('input[name="'+$(this).data('checkboxName')+'"]').data("value",
        $(this).hasClass('active') ? 0 : 1
    );
});

I've pretty much just changed so that it uses data-value instead of value, to keep track of it's 0/1 state, which leaves value unchanged. But now I have no way of knowing if it is checked or not. Is there a way I can filter the results client side, before sending them, using the data-value as a filter value?

I'm already using JQuery, if that helps.

Upvotes: 0

Views: 105

Answers (1)

Alessandro
Alessandro

Reputation: 1453

Let's assume we don't use AJAX, no need to overcomplicate things. As Paul stated, the general approach is to use standard checkboxes.

<div class="row" id="checkboxes">
   <div class="col-xs-12">
      <div class="form-group">       
         <div class="col-md-6">
            <input name="checkbox1" type="checkbox" value="A" class="hide"/>
            <input name="checkbox2" type="checkbox" value="B" class="hide"/>
            <input name="checkbox3" type="checkbox" value="C" class="hide"/>
            <div class="btn-group" data-toggle="buttons">
               <button type="button" class="btn btn-default" data-checkbox-name="checkbox1">Yes</button>
               <button type="button" class="btn btn-default" data-checkbox-name="checkbox2">Maybe</button>
               <button type="button" class="btn btn-default" data-checkbox-name="checkbox3">No</button>
            </div>
         </div>
      </div>
   </div>
</div>

And

$('.btn[data-checkbox-name]').click(function() {
    $('input[name="'+$(this).data('checkboxName')+'"]').prop('checked',
        !$(this).hasClass('active')
    );
});

When the form is submitted the default behavior of the checkboxes is preserved: only the checked checkboxes will be sent.

Upvotes: 1

Related Questions