How to set value of input field on select from form created using loop

Question

I need to set value of text box on change from select box created using jquery

 <?php for($i=0;$i<5 ;$i++) { ?>
<select  id="<?php echo 'aaa'.$i ?>" class="<?php echo 'aaa'.$i ?>">
                    <?php for($i=0;$i<5 ;$i++) { ?>
  <option value="1112" data-xyz="dynamic_value " data-abc="dynamic_value">dynamic_value</option>
            </select>
             <input  type="hidden"  class="<?php echo 'bbb'.$i ?>" id="bbb" name="<?php echo 'bbb'.$i ?>"/>
            <input type="hidden"   class="<?php echo 'ccc'.$i ?>" name="<?php echo 'ccc'.$i ?>" id="ccc" />
                       <?php } ?>
                         <?php } ?>






            <script>
$('.aaa').change(function () {
var otherValue=$(this).find('option:selected').attr('data-xyz');
var someOtherValue=$(this).find('option:selected').attr('data-abc');
$('.bbb').val(otherValue);
$('.ccc').val(someOtherValue);
});
</script>

How to change value class bbb0-bbb5 in jquery without using loop in jquery

Why are you giving us PHP code? Just give the source HTML.

Spencer Wieczorek
– Spencer Wieczorek

2016-06-27 18:33:01 +00:00
Commented Jun 27, 2016 at 18:33 — Spencer Wieczorek
– Spencer Wieczorek, Commented Jun 27, 2016 at 18:33

Rayon · Accepted Answer · 2016-06-27 18:54:07Z

1

Do not update the class names in php-loop, classes need not be unique.

To select input:hidden elements, no need to specify ID attribute

$('.aaa').change(function() {
  var otherValue = $(this).find('option:selected').attr('data-xyz');
  var someOtherValue = $(this).find('option:selected').attr('data-abc');
  $(this).siblings('.bbb').val(otherValue);
  $(this).siblings('.ccc').val(someOtherValue);
});

<?php for($i=0;$i<5 ;$i++) { ?>
<select id="<?php echo 'aaa'.$i ?>" class="aaa">
  <?php for($i=0;$i<5 ;$i++) { ?>
  <option value="1112" data-xyz="dynamic_value " data-abc="dynamic_value">dynamic_value</option>
</select>
<input type="hidden" class="bbb" name="<?php echo 'bbb'.$i ?>" />
<input type="hidden" class="ccc" name="<?php echo 'ccc'.$i ?>" />
<?php } ?>
<?php } ?>

edited Jun 27, 2016 at 18:54

answered Jun 27, 2016 at 18:32

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

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

3 Comments

Barmar Over a year ago

$(this).next('.ccc') won't work, since the ccc element isn't the next one. I think you mean $(this).siblings('.ccc').

Rayon Over a year ago

@Barmar Right! Have updated it.. Was curious about better approach if all the elements are in same level..without any parent.. .nextAll('.css:first') ?

Barmar Over a year ago

That's another way to do it.

Collectives™ on Stack Overflow

How to set value of input field on select from form created using loop

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related