PHP AJAX Change value based on combobox - php

Question

What I want is every time I have change the value from combobox (value from combobox is from database ) the input type will change too
here
<div class="col-md-12" >
<label>Charge</label>
<select id="name" name="name" class="form-control">
<?php
while ($reserve=mysqli_fetch_array($charge)) { ?>
<option value=" <?php echo $reserve['name']?>">
<?php echo $reserve['name']; ?>
</option><?php } ?>
</select>
</div>
<div class="col-md-12">
<br>
<label>Price</label>
<input type="number" class="form-control" id="Price" name="Price" disabled>
</div>
on database the name has a corresonding price for example chair has 200 price
what I want is every time I changed the combobox the value at inputtype will change too

Answer 1

I am not sure why you use ajax if you want to show option value . please check this code .
$('#name').change(function () {
var option_value = $(this).val();
$('#Price').val(option_value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="name" name="name">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div class="col-md-12">
<br>
<label>Price</label>
<input type="number" class="form-control" id="Price" name="Price" disabled>
</div>
</form>
so update select code using your this code
<select id="name" name="name" class="form-control">
<?php
while ($reserve=mysqli_fetch_array($charge)) { ?>
<option value=" <?php echo $reserve['name']?>">
<?php echo $reserve['name']; ?>
</option><?php } ?>
</select>

Answer 2

You need to add Jquery code to accomplish this task.
Your Html :
<div class="col-md-12" >
<label>Charge</label>
<select id="name" name="name" id="name" class="form-control">
<?php while ($reserve=mysqli_fetch_array($charge)) { ?>
<option value=" <?php echo $reserve['name']?>">
<?php echo $reserve['name']; ?>
</option><?php } ?>
</select>
</div>
<div class="col-md-12"><br>
<label>Price</label>
<input type="number" class="form-control" id="Price" name="Price" disabled>
</div>
Jquery Code :
$( document ).ready(function() {
$("#name").change(function () {
var value = this.value;
$('#Price').val(value);
});
});

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select id="name" name="name" class="form-control" onchange="callAjax(this)">
<?php
while ($reserve=mysqli_fetch_array($charge)) { ?>
<option value=" <?php echo $reserve['name']?>">
<?php echo $reserve['name']; ?>
</option><?php } ?>
</select>
<script>
function callAjax(val){
var selectedVal = val.value;
alert(selectedVal+" "+val)
$.ajax({
url: "<some_Url>", // Use PHP url from where you can get Data from Database
data: selectedVal,
success: function(result){
$("#Price").val(result);
}});
}
</script>