Jquery change hidden input value in for loop

Question

I try to change each hidden input value if checkbox is checked using jquery

I need to using for loop because html input field is generate by php loop from db too. so here is generated html code look like :

Html :

<input id="gift0" value="1" type="checkbox">
<input id="gift-true0" value="" type="hidden">

<input id="gift1" value="1" type="checkbox">
<input id="gift-true1" value="" type="hidden">

<input id="gift2" value="1" type="checkbox">
<input id="gift-true2" value="" type="hidden">

Jquery :

   var tot = <?php echo $tot; ?>;

   jQuery(function($){
     for (var i = 0; i< tot; i++ ){
       var chk = '#gift' + i;

       var val = '#gift-true' + i;
       $(chk).change(function(e) {
         for (var a = 0; a<= jml; a++ ){
         $(val).val(($(this).is(':checked')) ? "yes" : "no");
         }
         console.log(e);
       });
     }
  });

but this code didn't work.

P.S :

code to generate html input is look like this :

<?php
for ($i=0; $i<$total; $i++){
 echo "<input type='checkbox' id='gift$i' name='exm$i' value='1'> <br>
       <input type='hidden' id='gift-true$i' value=''></td> <br><br>";
}

your code is incorrect ,why do you need hidden inputs, how do you trigger this code? — madalinivascu
– madalinivascu, Commented Nov 29, 2016 at 5:11
because i need to get value even if the checkbox i not checked — NinjaCode
– NinjaCode, Commented Nov 29, 2016 at 5:25

jafarbtech · Accepted Answer · 2016-11-29 05:17:59Z

1

You can do this by using next() function as all the inputs are next to the checkbox. please replace var tot = 3; with var tot = <?php echo $tot; ?>; and type="text" with type="hidden"

var tot = 3;

   jQuery(function($){
     for (var i = 0; i< tot; i++ ){
       $('#gift' + i).on('change', function(e) {
         $(this).next().val(($(this).is(':checked')) ? "yes" : "no");
       });
     }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="gift0" value="1" type="checkbox">
<input id="gift-true0" value="no" type="text">

<input id="gift1" value="1" type="checkbox">
<input id="gift-true1" value="no" type="text">

<input id="gift2" value="1" type="checkbox">
<input id="gift-true2" value="no" type="text">

answered Nov 29, 2016 at 5:17

jafarbtech

7,0551 gold badge41 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pravin Vavadiya · Accepted Answer · 2016-11-29 05:12:04Z

1

Changes this two value in your code

var chk = $('#gift' + i).val();
var val = $('#gift-true' + i).val();

answered Nov 29, 2016 at 5:12

Pravin Vavadiya

3,2171 gold badge19 silver badges34 bronze badges

Comments

Rasika · Accepted Answer · 2016-11-29 05:36:31Z

1

This is what u want i guess

var tot = 3;

 jQuery(function($){
 for (var i = 0; i< tot; i++ ){
   $('#gift' + i).on('change', function(e) {
     $(this).next().val(($(this).is(':checked')) ? "yes" : "no");
   });
 }
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="gift0" value="1" type="checkbox">
<input id="gift-true0" value="no" type="text">
<input id="gift1" value="1" type="checkbox">
<input id="gift-true1" value="no" type="text">
<input id="gift2" value="1" type="checkbox">
<input id="gift-true2" value="no" type="text">

edited Nov 29, 2016 at 5:36

answered Nov 29, 2016 at 5:15

Rasika

1757 bronze badges

3 Comments

NinjaCode Over a year ago

it didn't work but if i change $('#gift-true0').val(($(this).is(':checked')) ? "yes" : "no"); it works but still i need to change each hidden input based on checkbox

Rasika Over a year ago

Hey go with the answer given by @jafarbtech

NinjaCode Over a year ago

yeah it's worked now but i give the first one choise answer BTW thanks a lot @Rasika :)

Mairaj Ahmad · Accepted Answer · 2016-11-29 05:08:24Z

0

Try this

 var tot = <?php echo $tot; ?>;

   jQuery(function($){
     for (var i = 0; i< tot; i++ ){
       var chk = $('#gift' + i);

       var val = $('#gift-true' + i);
       $(chk).change(function(e) {
         for (var a = 0; a<= jml; a++ ){
         $(val).val(($(this).is(':checked')) ? "yes" : "no");
         }
         console.log(e);
       });
     }
  });

You need to get object instead of string right now you are getting a string which is '#gift' + i. Wrap it inside $('#gift' + i) to get the object.

answered Nov 29, 2016 at 5:08

Mairaj Ahmad

14.6k2 gold badges29 silver badges43 bronze badges

Comments

ScanQR · Accepted Answer · 2016-11-29 05:13:03Z

0

Only relevant input should be set on change of a checkbox. You should not loop again for each input on change event.

var tot = <?php echo $tot; ?>;

   jQuery(function($){
     for (var i = 0; i< tot; i++ ){
       $('#gift' + i).on('change', function(e) {
           // no need for another loop as you should target only relevant input field
           $('input#gift-true' + i).val(($(this).is(':checked')) ? "yes" : "no");
       });
     }
   });

answered Nov 29, 2016 at 5:13

ScanQR

3,8202 gold badges16 silver badges34 bronze badges

1 Comment

ScanQR Over a year ago

check your value of tot?

rNix · Accepted Answer · 2016-11-29 05:15:15Z

0

Yo do not need loop here. Just change the value of the next input.

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

    var $hidden = $(this).next('input[type="hidden"]');
    if ($hidden.length) {
        var checked = $(this).is(':checked');
        if (checked) {
             $hidden.val('yes');
        } else {
             $hidden.val('no');
        }
    }
});

//call function for every checkbox which are already on page
$('input[type="checkbox"]').change();

This code will work for every checkbox on the page. To avoid this just use stronger selector: $('.some-class input[type="checkbox"]')

answered Nov 29, 2016 at 5:15

rNix

2,6071 gold badge25 silver badges28 bronze badges

Comments

Bindrid · Accepted Answer · 2016-11-29 05:23:09Z

0

My answer, similar to a few others, also eliminates the for loop.

            jQuery(function ($) {
                // do this if you do not know the state of the generated checkbox
                $("input[type='checkbox']").each(function () {

                    $(this).next().val($(this).prop("checked") ? "yes" : "no");
                });

                // then this for your event handler
                $("input[type='checkbox']").on("change", function (e) {
                    $(e.target).next().val($(e.target).prop("checked")?"yes":"no");
                })
            });

answered Nov 29, 2016 at 5:23

Bindrid

3,7552 gold badges21 silver badges19 bronze badges

Comments

madalinivascu · Accepted Answer · 2016-11-29 05:28:05Z

Change you id to class

<?php
for ($i=0; $i<$total; $i++){
 echo "<input type='checkbox' class='gift' name='exm$i' value='1'> <br>
       <input type='hidden' name='gift-exm$i' class='gift-true' value=''></td> <br><br>";
}

refactor your code as follows

 $('.gift').change(function(e) {//remove any loops /keep the change event
         var el = $(this);
        el.next('.gift-true').val(el.is(':checked') ? "yes" : "no");//select the hidden input using next()
 });

ps: don't forget to add a name to the hidden input

$('.gift').change(function(e) {
             var el = $(this);
            el.next('.gift-true').val(el.is(':checked') ? "yes" : "no");
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="gift" value="1" type="checkbox">
<input class="gift-true" value="no" type="text">

<input class="gift" value="1" type="checkbox">
<input class="gift-true" value="no" type="text">

<input class="gift" value="1" type="checkbox">
<input class="gift-true" value="no" type="text">

Collectives™ on Stack Overflow

Jquery change hidden input value in for loop

8 Answers 8

Comments

Comments

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related