Set value of input field based on selected option
Question
I´m creating a booking form for a group of hotels. Each hotel has a special offer page, which can be accessed by adding the parameter &ratePlanID=xxx to the request URL.
How can I add the ratePLanID dynamically when a user selects the hotel from a dropdown list?
I´ve tried to write a function that sets the value of an input field with the correct ratePlanID when a user selects the hotel, but I can´t get it to work.
This is what I came up with: http://jsbin.com/oduhet/3/edit#javascript,html,live
Any ideas what I did wrong here or another way to accomplish this?
4 answers
solution1
0 2011-09-01 09:35:24
$(document).ready(function() {
$('#destination').change(function() {
var hotel = $('#destination').val();
$('[name=ratePlanID]').val(hotel);
});
});
replace this in you javascript code
And for switch case
$(document).ready(function() {
$('#destination').change(function() {
var hotel = $('#destination').val();
switch(hotel)
{
case '15205':
$('[name=ratePlanID]').val('1');
break;
case '15206':
$('[name=ratePlanID]').val('2');
break;
case '15207':
$('[name=ratePlanID]').val('3');
break;
}
});
});
solution2
0 ACCPTED 2011-09-01 09:35:57
I think the problem is in your case statement you should be looking for string values (vals are Strings not Ints).
Like:
switch(hotel)
{
case '15205':
$('[name=ratePlanID]').val(1);
break;
case '15206':
$('[name=ratePlanID]').val(2);
break;
case '15207':
$('[name=ratePlanID]').val(3);
break;
}
solution3
0 2011-09-01 09:37:30
Your "case" statement needs to look for "strings" not "ints". Put '' around each case.
solution4
0 2011-09-01 09:51:57
A few things. I'm using a much newer version of JQuery since I'm not sure what v1.0 is missing.
I add a listener to the select list using jQuery AFTER the DOM Is ready to be manipulated. This is done by adding a listener to the 'document' waiting for the 'ready' event which, when fired, will execute the function passed to the listener. I've also given the input field the id ratePlanInput so that I can refer to it in the JavaScript.
<!DOCTYPE html><html><head>
<script class="jsbin" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function() { // add listener for document ready
$('#destination').change(function() { //add a listener for change
var selectedValue = $(this).find(":selected").val();
$('#ratePlanInput').val(selectedValue);
});
});
</script>
</head><body>
<form action="http://www.example.com" method="get">
<select name="hotelID" id="destination">
<option value="" class="first_option" selected="selected" disabled="disabled">Select a property:</option>
<option value="15205">City Hotel</option>
<option value="15206">Beach Hotel</option>
<option value="15207">Business Hotel</option>
</select>
<input type="text" name="ratePlanID" value="" id="ratePlanInput" />
<button type="submit">Check availability</button>
</form>
</body></html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.