Jquery , Html Append value to textfield when Checkbox is checked

Question

I have a list of four check boxes which are as shown below :

<input type="checkbox" class="checkboxstyle"  id="id_peer_educator" value="Peer Educator"/>Peer Educator<br>
<input type="checkbox" class="checkboxstyle"  id="id_chw" value="CHW"/>CHW<br>
<input type="checkbox" class="checkboxstyle"  id="id_health_provider" value="Health Prvider"/>Health Provider<br>
<input type="checkbox" class="checkboxstyle"  id="id_purchase" value="Purchase"/>Purchase<br>
<input type="text" id="CD_Supplr" class="CD_Supplr" name="CD_Supplr" placeholder=" Suppliers : "/>

The first four are check boxes while the last one is a textbox. How can I append data to the text-field Suppliers ? (When it is checked , it should be appended to the text field Supplier, if it is unchecked, then the value should be removed from the text field supplier) .

I tried implementing it the following way :

var CD_Supplr = $('#CD_Supplr').val();
var id_peer_educator = $('#id_peer_educator').val();
var id_chw = $('#id_chw').val();
var id_health_provider = $('#id_health_provider').val();
var id_purchase = $('#id_purchase').val();

$('#id_peer_educator').click(function () {
    $('#CD_Supplr').val(CD_Supplr + "," + id_peer_educator;
});

$('#id_chw').click(function () {
    $('#CD_Supplr').val(CD_Supplr + "," + id_chw;
});

But it's not working,what's the best way to implement it?

You're missing a closing bracket for the .val(CD_Supplr + .... — D4V1D
– D4V1D, Commented Sep 27, 2015 at 14:54

Zakaria Acharki · Accepted Answer · 2015-09-27 16:17:28Z

You can use an array to add value when checkbox is checked and remove it when unchecked and use join() function to join the array values by dispay in input.

Hope this helps.

var selected_checkbox=[];

$('.checkboxstyle').change(function()
{
   if($(this).is(':checked'))
   {
        //If checked add it to the array
        selected_checkbox.push($(this).val());
   } 
   else 
   {
      //If unchecked remove it from array
      for (var i=selected_checkbox.length-1; i>=0; i--) 
      {
          if (selected_checkbox[i] === $(this).val()) 
              selected_checkbox.splice(i, 1);
      }
   }
    $('#CD_Supplr').val(selected_checkbox.join(','));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="checkboxstyle"  id="id_peer_educator" value="Peer Educator"/>Peer Educator<br>
<input type="checkbox" class="checkboxstyle"  id="id_chw" value="CHW"/>CHW<br>
<input type="checkbox" class="checkboxstyle"  id="id_health_provider" value="Health Prvider"/>Health Provider<br>
<input type="checkbox" class="checkboxstyle"  id="id_purchase" value="Purchase"/>Purchase<br>
<input type="text" id="CD_Supplr" class="CD_Supplr" name="CD_Supplr" size='50' placeholder=" Suppliers : "/>

Diptox · Accepted Answer · 2015-09-27 15:56:05Z

0

Demo

$('.checkboxstyle').on("change",function () 
{
    var str ="";
    $('.checkboxstyle:checked').each(function()
    {
        str+= $(this).val()+" ";
    });
    $('#CD_Supplr').val(str);

});

edited Sep 27, 2015 at 15:56

answered Sep 27, 2015 at 15:00

Diptox

1,80912 silver badges20 bronze badges

1 Comment

Diptox Over a year ago

did you try the Demo ?

Ahmad Baktash Hayeri · Accepted Answer · 2015-09-27 15:41:33Z

Add listeners to the change event on the checkboxex, then using match() find out if the value of a checkbox is NOT already there in the CD_Suplr textbox. Then, use the result of this condition to add/remove the checkbox values:

var $target = $('#CD_Supplr');
$('[type="checkbox"]').change(function(){
    if($target.val() == ''){
        $target.val('Supplier: '); //default text
    }
    if(!$target.val().match($(this).val())){
        var text = $target.val();
        $target.val(text + ' ' + $(this).val() + ', ');
    } else {
        var text = $target.val();
        $target.val(text.replace($(this).val()+', ', ''));
    }
    //make sure the last comma is removed
    $target.val($target.val().replace(/\,$/, ''));
});

JSFiddle Demo.

Collectives™ on Stack Overflow

Jquery , Html Append value to textfield when Checkbox is checked

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related