I have a select form with kinds of hotel rooms like ordinary, family, deluxe, executive and so on each of it has a corresponding price let us say in ordinary room i will set $300 price.
At the right side of the select form everytime I choose let us say ordinary room the right side input text field it will reveal the price $300. So basically I use java script with the code var ordinary=document.getElementByID("ord").value
so that i can set the price so, var ordinary= 3500
. The next is getting the value from variable ordinary to be reveal in input text field every time I choose the Ordinary room in the selection form, but how am i going to do that?
Here's the code
<script language="javascript" type="text/javascript">
var ordinary= document.getElementById("ord").value;
var ordinary= 5300;
</script>
<form action="insert.php" method="post">
<table align="center"><tr><td>
<font face="Arial, Helvetica, sans-serif">RESERVATIONS</font>
</td></tr><hr color="#00CC99"/> <br/>
</table>
<table border="0" align="center">
<tr>
<th align="justify"> Name:   </th>
<td><input type="text" name="name"></td>
</tr>
<tr>
<th align="justify"> Contact Number: </th>
<td><input type="text" name="contact"></td>
</tr>
<tr>
<th align="justify">Room Type: </th>
<td>
<select name="roomType">
<option value="---">---------------------------</option>
<option value="Ordinary " id="ord">Ordinary</option>
<option value="Family ">Family</option>
<option value="Superior ">Superior</option>
<option value="Deluxe ">Deluxe</option>
<option value="Corner Suite King">Corner Suite King</option>
<option value="Executive ">Executive</option>
<option value="Executive Suite">Executive Suite</option>
<option value="Grand Executive">Grand Executive</option>
<option value="Presidential ">Presidential</option>
</select>
</td>
<td>
</td>
</tr>
<tr>
<th align="justify">AddOn Services: </th>
</tr>
</table>
</form>
Give the select
an id
of roomType
and then use this
var e = document.getElementById("roomType");
var desiredValue = e.options[e.selectedIndex].value;
The value for options should be the desired data for your script. You should call the selectedIndex
of the select element rather than the options
, otherwise that would be a lot of code we would all have to type...no fun
<select name="roomType" id="roomType">
<option value="---">---------------------------</option>
<option value="5300">Ordinary</option>
<option value="SomePrice">Family</option>
<option value="SomePrice">Superior</option>
<option value="SomePrice">Deluxe</option>
<option value="SomePrice">Corner Suite King</option>
<option value="SomePrice">Executive</option>
<option value="SomePrice">Executive Suite</option>
<option value="SomePrice">Grand Executive</option>
<option value="SomePrice">Presidential</option>
</select>
Change SomePrice to your desired values.