CODEWITHSUNDEEP
javascriptjqueryhtml
H Dindi
H Dindi

Reputation: 1552

Jquery , Html Append value to textfield when Checkbox is checked

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?

Upvotes: 0

Views: 2331

Answers (3)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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 : "/>

Upvotes: 1

Diptox
Diptox

Reputation: 1809

Demo

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

});

Upvotes: 0

Ahmad Baktash Hayeri
Ahmad Baktash Hayeri

Reputation: 5880

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.

Upvotes: 0

Related Questions