Reputation: 31
I have already fetched the value from a table to a drop down list, Now in a table there are 3 column
Name Type Price car Sedan 1000 car Hatchback 1500 enter image description here
So in the drop down I am getting the Type in a drop down list and based on the drop down I need the price should also get filled in the payment form once user select the vechile type and click on submit.
I have tried getting the drop down value to a form but the price for that relevant selection its not fetching.Its blank
<form method="post" class="cart" action="Booking_form.php">
<div class="quantity btn-quantity pull-left m-r10">
<select name="vechile_type" class="form-control">
<option>Select Vechile</option>
<option value="Hatchback">Hatchback</option>
<option value="Sedan">Sedan</option>
</select>
</div>
<button class="btn btn-primary site-button pull-left"><i class="fa"></i> Book Now</button>
I expect on the drop down selection of any vechile type the amount should also get selected at the backend process and in the booking form the vechile type and the price should be displayed. Now only vechile type is being displayed.
Upvotes: 1
Views: 231
Reputation: 289
You can do like this:
<form method="post" class="cart" action="Booking_form.php">
<div class="quantity btn-quantity pull-left m-r10">
<select name="vechile_type" class="form-control veh_type">
<option value="">Select Vechile</option>
<option value="Hatchback" data-price="1500">Hatchback</option>
<option value="Sedan" data-price="1000">Sedan</option>
</select>
<input type="hidden" name="price" class="hidd_price">
</div>
<button class="btn btn-primary site-button pull-left"><i class="fa"></i> Book Now</button>
<script>
$(document).ready(function () {
$('body').on('change', '.veh_type', function(e){
if($(this).val() != ''){
$('.hidd_price').val($(this).find('option:selected').attr("data-price"));
}else{
$('.hidd_price').val('');
}
});
});
</script>
Upvotes: 1