How do I pass the id value to the function? - php

Question

How do I pass the id value to the function?
What I am doing is, When the user changes the dropdown then it will get the value of dropdown and also get the input value which is hidden inside foreach.
I tried from my side I am getting on change the value from the dropdown but how do I get the input value in the jquery? now I am getting the last value of the input field.
$x=1;
foreach ($duration as $row) {?>
<input type="hidden" name="activeID" id="activeID<?php echo $x;?>" value="<?php echo $row->activity_name_id;?>">
<select name="Duration<?php echo $x;?>" class="form-control" id="Duration<?php echo $x;?>">
<option selected disabled >Select year</option>
<option value="12m" <?php if($row->Duration == '12m' ){ echo 'selected="selected"'; } ?>>1 Year</option>
<option value="6m" <?php if($row->Duration == '6m' ){ echo 'selected="selected"'; } ?>>6 months</option>
</select>
<div id="results<?php echo $x;?>"></div>
<?php $x++;}
jquery
$('[id^="Duration"]').change(function () {
var a=$('input[id^="activeID"]').attr('id');// how to I display the input id here
alert(a);
var value = $('input[id^="activityID"]').val();// i tried this one as well
alert(value);
var end = this.value;
alert(end);//getting drodpown id value
});

Answer 1

You can put your input and select inside a div. When the dropdowns are changed, get the input sibling
<?php
$x=1;
foreach ($duration as $row) {
?>
<div>
//Your input and select here
</div>
<?php } ?>
<script>
$('[id^="Duration"]').change(function () {
var input = $($(this).siblings("input")[0]); // get the input element
var id = input.attr("id"); //id of the input
var value = input.val(); //value of the input
alert(value);
});
</script>

Answer 2

One thing I have observed in your code:
$x=1;
foreach ($duration as $row) {
<input type="hidden" name="activeID" id="activeID<?php echo $x;?>" value="<?php echo $row->activity_name_id;?>">
<select name="Duration<?php echo $x;?>" class="form-control" id="Duration<?php echo $x;?>">
<option selected disabled >Select year</option>
<option value="12m" <?php if($row->Duration == '12m' ){ echo 'selected="selected"'; } ?>>1 Year</option>
<option value="6m" <?php if($row->Duration == '6m' ){ echo 'selected="selected"'; } ?>>6 months</option>
</select>
<div id="results<?php echo $x;?>"></div>
}
You are not at all increasing $x anywhere and hence each and every hidden input tag is getting id = 'activeId1'

Answer 3

<?php
$x=1;
foreach ($duration as $row) {
?>
<input type="hidden" name="activeID" id="activeID<?php echo $x;?>" value="<?php echo $row->activity_name_id;?>">
<select name="Duration<?php echo $x;?>" class="form-control DurationClass" id="Duration<?php echo $x;?>">
<option selected disabled >Select year</option>
<option value="12m" <?php if($row->Duration == '12m' ){ echo 'selected="selected"'; } ?>>1 Year</option>
<option value="6m" <?php if($row->Duration == '6m' ){ echo 'selected="selected"'; } ?>>6 months</option>
</select>
<div id="results<?php echo $x;?>"></div>
<?php } ?>
<script>
$('.DurationClass').change(function () {
var a=$('input[id^="activeID"]').attr('id');
var selectID=$(this).attr('id');
//alert(a);
var value = $(this).val(); // in loop every dropdown select current option value return
alert(value);
});
</script>

Answer 4

You can use onchange event in your HTML part of the code
$x=1;
foreach ($duration as $row) {?>
<input type="hidden" class="activeID" name="activeID" id="activeID<?php echo $x;?>" value="<?php echo $row->activity_name_id;?>">
<select name="Duration<?php echo $x;?>" onchange="myfunction();" class="form-control" id="Duration<?php echo $x;?>">
<option selected disabled >Select year</option>
<option value="12m" <?php if($row->Duration == '12m' ){ echo 'selected="selected"'; } ?>>1 Year</option>
<option value="6m" <?php if($row->Duration == '6m' ){ echo 'selected="selected"'; } ?>>6 months</option>
</select>
<div id="results<?php echo $x;?>"></div>
<?php $x++;}
Here is the function
function myfunction () {
alert($(this).parent()); //what are you getting
alert($(this).parent().find(".activeID").value()); //what are you getting?
alert("Id of the select box is "+ this.id);
alert("Value of the select box is "+this.value );
};

Answer 5

$(".select").change(function(){
alert("Id of the select box is "+ this.id);
alert("Value of the select box is "+this.value );
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Form control: select</h2>
<p>The form below contains two dropdown menus (select lists):</p>
<form>
<div class="form-group">
<label for="sel1">Select list (select one):</label>
<select class="form-control select" id="Sell">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<label for="sel1-item">Select list sell item (select one):</label>
<select class="form-control select" id="Sell-item">
<option>car</option>
<option>bike</option>
<option>cycle</option>
<option>auto</option>
</select>
</div>
</form>
</div>
</body>
</html>