I am trying to get the radio buttons for bat mobile, gauss hog, and light cycle to calculate into the cost. The other calculations work for the other variables but not for radCar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cars4You Car Rentals</title>
<link rel="stylesheet" type="text/css" href="mystylesheet.css">
<script type="text/javascript">
function calculateCost()
{
var cost = 0
var radCar;
var chkGPS = 0
var rentalDay = parseInt(document.rentalForm.rentalDay.value);
var insurance = 0
radCar = document.rentalForm.radCar.value
if (radCar=="batmobile")
{
cost = 100
}
if (radCar=="gausshog")
{
cost = 85
}
if (radCar=="lightcycle")
{
cost = 40
}
if ( document.rentalForm.chkGPS.checked )
{
chkGPS = chkGPS+5;
}
if ( document.rentalForm.insurance.value=="Yes" )
{
insurance = insurance+20;
}
if (document.rentalForm.rentalDay.value>=7)
{
cost = cost-10;
}
finalPrice = (cost + chkGPS)*rentalDay + insurance;
alert("Your rental cost is $" + finalPrice);
}
</script>
</head>
<body>
<div id="header">
<h1>Cars4You Car Rentals</h1>
Home
<----------------------------------------------------->
Contact
</div>
<div id="main_content">
<form name=rentalForm>
First Name:
<input type="text" name="txtFirstName"> <br>
Last Name:
<input type="text" name="txtLastName"> <br>
<h2>Vehicle Type</h2>
Batmobile ($100/day) :
<input type="radio" name="radCar" value="batmobile"> <br>
Gausshog ($85/day) :
<input type="radio" name="radCar" value="gausshog"> <br>
Lightcycle ($40/day) :
<input type="radio" name="radCar" value="lightcycle"> <br><br>
How many rental days?
<select name="rentalDay">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option> <br>
</select> <br>
*$10 discount for 7 or more days <br>
<h2>Extras</h2>
Insurance ($20)?
<select name="insurance">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select> <br>
GPS:
<input type="checkbox" name="chkGPS"> <br>
Special Requests: <br>
<textarea style="width:200px" name="txtarRequests" rows=5></textarea> <br>
<input type="button" name="btnsubmit" value="Book My Rental!" onclick="calculateCost()">
</div>
</form>
</body>
</html>
You need a function to get the value of the checked radio from a set of radios.
Replace
radCar = document.rentalForm.radCar.value
with
radCar = getRadio('radCar');
where the argument, in this case radCar is the name of the radio, i.e. <input type="radio" name="radCar"
This is the function
function getRadio(name) {
var radios = document.getElementsByName(name);
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) return radios[i].value;
}
}
Working example http://jsfiddle.net/VX9Ge/
Aside: I find switch is much cleaner than an if/elseif/else jungle.
switch (radCar){
case "batmobile":
cost=100;
break;
case "gausshog":
cost=85;
break;
case "lightcycle":
cost=40;
break;
default: // none selected
cost=0;
}
A simple example using modern methods
HTML
<form id="pickCar">
<fieldset>
<label for="radCar">Rad Cars:
<input type="radio" name="radCar" value="batmobile">Batmobile</input>
<input type="radio" name="radCar" value="gausshog">Gausshog</input>
<input type="radio" name="radCar" value="lightcycle">Lightcycle</input>
</label>
</fieldset>
<input type="submit" value="Submit"></input>
</form>
Javascript
document.getElementById('pickCar').addEventListener('submit', function (evt) {
evt.preventDefault();
var radCars = evt.target.firstElementChild.firstElementChild.children,
value;
Array.prototype.some.call(radCars, function (radCar) {
if (radCar.checked) {
value = radCar.value;
}
return radCar.checked;
});
alert(value);
}, false);
On jsFiddle
Related
I'm trying to code a sample rate calculator and I need the compute() function to display text with certain parameters each time it's pressed, but it's not working
I'll paste the code samples below.
var principal = document.getElementById("principal").value;
var rate = document.getElementById("rate").value;
var years = document.getElementById("years").value;
var interest = principal * years * rate /100;
var year = new Date().getFullYear()+parseInt(years);
function compute()
{
var result = document.getElementById("result").value;
document.getElementById("result").innerHTML = "If you deposit "+principal+",\<br\>at an interest rate of "+rate+"%\<br\>You will receive an amount of "+amount+",\<br\>in the year "+year+"\<br\>";
}
function checkdata() {
//create references to the input elements we wish to validate
var years = document.getElementById("years");
var principal = document.getElementById("Principal");
//Check if "No of Years" field is actual year
if (years.value != "year") {
alert("Please input the actual year");
years.focus();
return false;
}
//Check if principal field is zero or negative
if (principal.value == "0" || principal.value == "negativ no") {
alert("Enter a positive number");
principal.focus();
return false;
}
//If all is well return true.
alert("Form validation is successful.")
return true;
}
function updateValue(event) {
document.getElementById("rate_val").innerText = event.value;
}
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
<title>Simple Interest Calculator</title>
</head>
<body>
<div class="container">
<h1>Simple Interest Calculator</h1>
<form id="form1">
<label for="Amount"></label>
Amount <input type="number" id="principal">
<br/>
<br/>
<label for="Interest Rate"></label>
<label for="Interest Rate">Interest Rate</label>
<input onchange=updateValue(this) type="range" id="rate" min="1" max="20" step="0.25" default value="10.25">
<span id="rate_val">10.25%</span>
<br/>
<br/>
<label for="No. of Years"></label>
No. of Years <select id="years">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<!-- fill in the rest of the values-->
</select>
<br/>
<br/>
<label for="Compute Interest"></label>
<button onclick="compute()">Compute Interest</button>
<br/>
<br/>
<span id="result"></span>
<br/>
<br/>
</form>
<br/>
<br/>
<footer>© Everyone Can get Rich.<br/>This Calculator belongs to Igho Emorhokpor</footer>
</div>
</body>
</html>
The main issue in your code is because you've attached the onclick attribute to the button which submits the form. As the form submission is not being prevented, the page is redirected before you can update the DOM.
To fix this, hook the event handler to the submit event of the form and call preventDefault() on the event which is passed to the handler as an argument.
In addition, there's some other issues in your code.
You should avoid using onX attributes as they are no longer good practice. Attach your event handlers using unobtrusive JS, such as addEventListener().
amount is not defined anywhere. You will need to declare and set this variable. I've used a dummy value for it in the code below.
You need to retrieve the value properties of your form controls when the button is clicked, not when the page loads. This is to ensure that the values the user enters are retrieved from the DOM.
Wrap the field controls and the label text within the label element. Leaving them empty serves no purpose.
Avoid using the <br /> tag as much as possible. Given the above change to your label elements, apply CSS to add the margin underneath them instead.
In the checkData() function, years is a selection of integer values, so comparing those values to a "year" string is redundant.
In addition, to detect a negative number compare it to < 0, not the string "negative no"
With all that said, try this:
let principalEl = document.querySelector("#principal");
let rateEl = document.querySelector("#rate");
let rateOutputEl = document.querySelector('#rate_val');
let yearsEl = document.querySelector("#years");
let formEl = document.querySelector('#form1');
let result = document.querySelector('#result');
let amount = '???';
formEl.addEventListener('submit', e => {
e.preventDefault();
if (!checkData())
return;
let principal = principalEl.value;
let rate = rateEl.value;
let year = yearsEl.value;
let interest = principal.value * years.value * rate.value / 100;
let endYear = new Date().getFullYear() + parseInt(years.value);
result.innerHTML = `If you deposit ${principal},<br \>at an interest rate of ${rate}%<br \>You will receive an amount of ${amount},<br \>in the year ${endYear}<br \>`;
});
rateEl.addEventListener('input', e => {
rateOutputEl.textContent = e.target.value + '%';
});
function checkData() {
let principal = principalEl.value;
if (!principal || parseFloat(principal) < 0) {
alert("Enter a positive number");
principalEl.focus();
return false;
}
return true;
}
label {
display: block;
margin-bottom: 20px;
}
form {
margin-bottom: 50px;
}
<div class="container">
<h1>Simple Interest Calculator</h1>
<form id="form1">
<label for="Amount">
Amount
<input type="number" id="principal">
</label>
<label for="Interest Rate">Interest Rate
<input type="range" id="rate" min="1" max="20" step="0.25" value="10.25" />
<span id="rate_val">10.25%</span>
</label>
<label for="No. of Years">
No. of Years
<select id="years">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<!-- fill in the rest of the values-->
</select>
</label>
<label for="Compute Interest">
<button type="submit">Compute Interest</button>
</label>
<span id="result"></span>
</form>
<footer>© Everyone Can get Rich.<br/>This Calculator belongs to Igho Emorhokpor</footer>
</div>
function compute()
{
var result = document.getElementById("result").value;
document.getElementById("result").innerHTML = ~If you deposit ${principal} at an ${interest} rate of ${rate}% You will receive an amount of ${amount} in the year ${year}~;
}
I have created a button with an action function as you can see below but the alert messages fires before I click the action button (click me). How can I make the alert messages appear only when I click the button (click me), and not when I choose "one" in the dropdown option value.
<p align="center">
<button style="height:50px;width:100px" onclick"=dropdownChange();">click me</button>
</p>
<p align="right">
<select dir="rtl" name="test2" id="experience" onchange="dropdownChange()" >
<option value="one"> one</option>
<option value="five">five</option>
<option value="six">six</option>
<option value="seven">seven</option>
<option value="" disabled selected>choose</option>
</select>
<font size="3"> number of experience</font>
</p>
<script>
function dropdownChange() {
var experience=document.getElementById("experience").value;
if(experience==="one") {
alert("ok");
document.getElementById('experience').value = "";
}
}
</script>
<p align="center"><button style="height:50px;width:100px" onclick=
dropdownChange();>click me </button></p>
<p align="right"><select dir="rtl" name="test2" id="experience"
>
<option value="one"> one</option>
<option value="five">five</option>
<option value="six">six</option>
<option value="seven">seven</option>
<option value="" disabled selected>choose</option>
</select> <font size="3"> number of experience</font>
</p>
<script>
function dropdownChange() {
var experience=document.getElementById("experience").value;
if(experience==="one") {
alert("ok");
document.getElementById('experience').value = "";
}
}
This should do the trick
Hi you forgot the " before and after dropdownChange().
< button style="height:50px;width:100px" onclick="dropdownChange();" >click me < / button>
There is nothing wrong with your code, it works fine as you can see below. Post some more code, the problem is somewhere else.
function dropdownChange()
{
var age = document.getElementById('age').value;
var major = document.getElementById('major').value;
var experience = document.getElementById('experience').value;
if ( age == "" || major == "" || experience == "" )
alert("fields cannot be empty!");
else
alert("Age: " + age + "\nMajor: " + major + "\nExperience: " + experience);
}
<!-- Sample elements -->
<input type="text" id="age" value="99" />
<input type="text" id="major" value="Physics" />
<input type="text" id="experience" value="Hmm" />
<p align="center"><button style="height:50px;width:100px"onclick="dropdownChange();" >click me </button></p>
I have to fix a program which calculates a total cost for a group of people to go on a certain tour. There are three tours, each with their individual cost for children and adults. I believe I have written the correct java and html to do so, although it appears not to work.
Javascript:
function calculateTotal (){
"use strict";
var adults = document.tour.adults.value;
var children = document.tour.children.value;
var costAdults = [180,120,80]; //stored prices for adults for each tour in an array
var costChildren = [155,120,70];
var tour = document.tour.tours.value; //isnt used
var cost = 0;
if (document.tour.tours.options[0].selected) {
//if option 0 (All Day Dreamer) is selected, then cost = cost of adult [0]*number of adults + cost of children [0]*number of children
cost = costAdults[0]*adults + costChildren[0]*children;
}
if (document.tour.tours.options[1].selected) {
cost = costAdults[1]*adults + costChildren[1]*children;
}
if (document.tour.tours.options[2].selected) {
cost = costAdults[2]*adults + costChildren[2]*children;
}
document.getElementById("cost").innerHTML = "Cost is" + cost;
}
HTML:
<title>Captain Joes Tours</title>
<script src="Captain Joes Tours.js" type="text/javascript"></script>
</head>
<body>
<form id="tour">
Adults:
<select name="adults">
<option name="1" value="1">1</option>
<option name="2" value="2">2</option>
<option name="3" value="3">3</option>
<option name="4" value="4">4</option>
</select>
<br>
Children:
<select name="children">
<option name="1" value="1">1</option>
<option name="2" value="2">2</option>
<option name="3" value="3">3</option>
<option name="4" value="4">4</option>
</select>
<br>
Tour:
<select name="tours">
<option name="All Day Dreamer">All Day Dreamer</option>
<option name="Half-Day Safari">Half-Day Safari</option>
<option name="2-Hour Adventure">2-Hour Adventure</option>
</select>
<input id = "submit" type = "button" value = "Submit" onclick = "calculateTotal();">
</form>
<div id="price">
<p id="cost">Cost:</p>
</div>
</body>
The number of adults and children can be from 1 to 4. The value selected is the same as the var adults and var children in the javascript.
If tour [0] is selected which would be All Day Dreamer, the cost can be calculated by multiplying the number of adults by the [0] variable in the costAdults array and adding that to the children's equivalent. The same process can be done for the other tours with the respective variables.
The page looks like this, yes very basic I will fix it later
The problem is, the submit button does not display any cost. It's a very simple program and I'm not experienced in javascript so I cannot find the problem.
Help is much appreciated.
var adults = 1;
var children = 1;
var costAdults = [180,120,80]; //stored prices for adults for each tour in an array
var costChildren = [155,120,70];
var tour = "All Day Dreamer"; //isnt used
var cost = 0;
function myFunctionAdult(sel)
{
adults = parseInt(sel.options[sel.selectedIndex].text);
}
function myFunctionChildren(sel)
{
children = parseInt(sel.options[sel.selectedIndex].text);
}
function myFunctionDreamer(sel)
{
tour = sel.options[sel.selectedIndex].text;
}
function calculateTotal (){
if (tour === "All Day Dreamer") {
//if option 0 (All Day Dreamer) is selected, then cost = cost of adult [0]*number of adults + cost of children [0]*number of children
cost = costAdults[0]*adults + costChildren[0]*children;
}
if (tour === "Half-Day Safari") {
cost = costAdults[1]*adults + costChildren[1]*children;
}
if (tour === "2-Hour Adventure") {
cost = costAdults[2]*adults + costChildren[2]*children;
}
document.getElementById("cost").innerHTML = "Cost is: " + cost;
}
<title>Captain Joes Tours</title>
<script src="Captain Joes Tours.js" type="text/javascript"></script>
</head>
<body>
<form id="tour">
Adults:
<select name="adults" id="adults" onChange="myFunctionAdult(this);">
<option name="1" value="1">1</option>
<option name="2" value="2">2</option>
<option name="3" value="3">3</option>
<option name="4" value="4">4</option>
</select>
<br> Children:
<select name="children" onChange="myFunctionChildren(this)">
<option name="1" value="1">1</option>
<option name="2" value="2">2</option>
<option name="3" value="3">3</option>
<option name="4" value="4">4</option>
</select>
<br> Tour:
<select name="tours" onChange="myFunctionDreamer(this)">
<option name="All Day Dreamer">All Day Dreamer</option>
<option name="Half-Day Safari">Half-Day Safari</option>
<option name="2-Hour Adventure">2-Hour Adventure</option>
</select>
<input id="submit" type="button" value="Submit" onclick="calculateTotal();">
</form>
<div id="price">
<p id="cost">Cost:</p>
</div>
</body>
// Register a listener to the form submit event
document.getElementById("tour").addEventListener("submit", showCost);
// Presentation.
function showCost (event) {
var form = event.target.elements;
document.getElementById("cost").innerHTML = "Cost is " +
calculateTotal(
Number(form.adults.value),
Number(form.children.value),
form.tours.selectedIndex
);
event.preventDefault();
}
// Logic.
function calculateTotal (numbOfAdults, numbOfChildren, tourIndex) {
var costAdults = [180,120,80]; //stored prices for adults for each tour in an array
var costChildren = [155,120,70];
var totalCost = costAdults[tourIndex] * numbOfAdults + costChildren[tourIndex] * numbOfChildren;
return totalCost;
}
html
<title>Captain Joes Tours</title>
<script src="Captain Joes Tours.js" type="text/javascript"></script>
</head>
<body>
<form id="tour">
Adults:
<select name="adults">
<option name="1" value="1">1</option>
<option name="2" value="2">2</option>
<option name="3" value="3">3</option>
<option name="4" value="4">4</option>
</select>
<br>
Children:
<select name="children">
<option name="1" value="1">1</option>
<option name="2" value="2">2</option>
<option name="3" value="3">3</option>
<option name="4" value="4">4</option>
</select>
<br>
Tour:
<select name="tours">
<option name="All Day Dreamer">All Day Dreamer</option>
<option name="Half-Day Safari">Half-Day Safari</option>
<option name="2-Hour Adventure">2-Hour Adventure</option>
</select>
<button type="submit">Calculate</button>
</form>
<div id="price">
<p id="cost">Cost:</p>
</div>
</body>
See the Pen qPzQXg by Jorge Gonzalez (#donmae) on CodePen.
<input type="checkbox" name="KingBed" id="KingBed" />
<input type="checkbox" name="queenbed" id="queenbed" />
<input type="checkbox" name="FullBed" id="FullBed" />
<input type="checkbox" name="headboard" id="headboard" />
check = document.getElementById("headboard").checked;
if(check) { maxTotal += 25 /*PRICE*/; minTotal += 17/*PRICE*/; }
I am looking for an if then statement that if bed1 is chosen, then when headboard is chosen, it will issue one set of prices, but if queenbed, and so forth is chosen, it will list another price.
I think you should take it in a different direction:
<div>
<h1>Buy a new bed now!</h1>
<p>
<label for="size">Size</label><br />
<select id="size">
<option value="twin">Twin</option>
<option value="full">Full</option>
<option value="queen">Queen</option>
<option value="king">King</option>
</select>
</p>
<p>
<label for="headBoard">Head Board</label><br />
<select id="headBoard">
<option value="none">None</option>
<option value="modelA">Model A</option>
<option value="modelB">Model B</option>
<option value="modelC">Model C</option>
</select>
</p>
<p>
<input type="button" onclick="buy()" value="Buy!" />
</p>
</div>
Then include the following JavaScript
var pricing = {
size: {
twin: 100,
full: 200,
queen: 300,
king: 400
},
headBoard: {
none: 0,
modelA: 100,
modelB: 200,
modelC: 300
}
};
function buy() {
var sizeSelection = document.getElementById("size").value,
headBoardSelection = document.getElementById("headBoard").value,
sizePrice = pricing.size[sizeSelection],
headBoardPrice = pricing.headBoard[headBoardSelection],
grandTotal = sizePrice + headBoardPrice;
alert("Grand Total: $" + grandTotal.toFixed(2));
}
i have two radio buttons: in-campus and off-campus. when in-campus is selected the dropdown will have some options and when off-campus is selected there will be a different set of options. how can i do this in javascript?
i'm trying to use this. i have this code
function setInCampus(a) {
if(a == "true") {
setOptions(document.form.nature.options[document.form.nature.selectedIndex].value) }
}
function setOptions(chosen)
{
//stuff
}
it won't work. what's wrong?
First of all, make form usable and accessible even with JavaScript is disabled. Create an HTML markup that contains the dropdown lists for the radio buttons.
Then when JavaScript is enabled, hide element the dropdown elements on document load, and attach and event handler to radio buttons, so when of one them was checked, toggle visibility of the proper dropdown list.
<form>
<input type="radio" onclick="campus(0)" value="On" id="campus_on" />
<label for="campus_on" />
<input type="radio" onclick="campus(1)" value="off" />
<label for="campus_off" />
<select id="some_options">
</select>
</form>
<script>
function campus(type) {
document.getElementById('some_options').innerHTML = type ?
'<option>option 1</option><option>option 2</option>'
:
'<option>option 3</option><option>option 4</option>';
}
}
</script>
<form name="form" id="form" action="">
<input type="radio" id="radioButton1" name="radioButton" value="in-campus" />
<label for="radioButton1">in-campus</label>
<input type="radio" id="radioButton2" name="radioButton" value="of-campus" />
<label for="radioButton2">off-campus</label>
<select name="noOptions" id="noOptions" style="display: none">
<option value="Choose an Option" selected="selected">Choose an Option</option>
</select>
<select name="icOptions" id="icOptions" style="display: none">
<option value="Choose an Option" selected="selected">Choose an in-campus option</option>
<option value="icOption1">in-campus option 1</option>
<option value="icOption2">in-campus option 2</option>
</select>
<select name="ocOptions" id="ocOptions" style="display: none">
<option value="Choose an Option" selected="selected">Choose an off-campus option</option>
<option value="ocOption1">off-campus option 1</option>
<option value="ocOption2">off-campus option 2</option>
</select>
<select name="allOptions" id="allOptions" style="display: block">
<option value="Choose an Option" selected="selected">Choose an Option</option>
<option value="icOption1">in-campus option 1</option>
<option value="icOption2">in-campus option 2</option>
<option value="ocOption1">off-campus option 1</option>
<option value="ocOption2">off-campus option 2</option>
</select>
</form>
<script>
window.document.getElementById("noOptions").style.display = "block";
window.document.getElementById("allOptions").style.display = "none";
function changeOptions() {
var form = window.document.getElementById("form");
var icOptions = window.document.getElementById("icOptions");
var ocOptions = window.document.getElementById("ocOptions");
window.document.getElementById("noOptions").style.display = "none";
if (form.radioButton1.checked) {
ocOptions.style.display = "none";
icOptions.style.display = "block";
icOptions.selectedIndex = 0;
} else if (form.radioButton2.checked) {
icOptions.style.display = "none";
ocOptions.style.display = "block";
ocOptions.selectedIndex = 0;
}
}
window.document.getElementById("radioButton1").onclick = changeOptions;
window.document.getElementById("radioButton2").onclick = changeOptions;
</script>
Radio buttons can have an onClick handler.
<INPUT TYPE="radio" NAME="campustype" VALUE="incampus" onClick="setInCampus(true)">in-campus
<INPUT TYPE="radio" NAME="campustype" VALUE="offcampus" onClick="setInCampus(false)">off-campus
You could just define both 's in the code, and toggle visibility with javascript.
Something like this:
<html>
<head>
<script type="text/javascript">
function toggleSelect(id)
{
if (id == 'off')
{
document.getElementById('in-campus').style['display'] = 'none';
document.getElementById('off-campus').style['display'] = 'block';
}
if (id == 'in')
{
document.getElementById('off-campus').style['display'] = 'none';
document.getElementById('in-campus').style['display'] = 'block';
}
}
</script>
</head>
<body>
<select id='in-campus'>
<option>a</option>
</select>
<select id='off-campus' style='display: none;'>
<option>b</option>
</select>
<br />
<input type='radio' name='campustype' value='in' onclick="toggleSelect('in');" checked='1' /><label for='incampus'>In-campus</label><br />
<input type='radio' name='campustype' value='off' onclick="toggleSelect('off');" /><label for='offcampus'>Off-campus</label>
</body>
</html>
A prettier variant of this approach would not require support for javascript, it would gracefully fallback on basic html.
if you need to fetch the options from a database or something, you might consider using AJAX.
<html>
<head>
<script language="javascript">
var current = false;
function onChange()
{
var rad = document.getElementById("radIn").checked;
if(rad == current)
return;
current = rad;
var array = rad ? ["in1","in2","in3","in4","in5"] :
["out1","out2","out3","out4","out5"];
var sel = document.getElementById("dropDown");
sel.innerHTML = "";
var opt;
for each(var k in array)
{
//alert(k + " asdsd");
opt = document.createElement("option");
opt.innerHTML = k;
sel.appendChild(opt);
}
}
</script>
</head>
<body onload="onChange();">
<input type="radio" value="in" name="campus" onclick="onChange()"
id="radIn" checked="true"/>
<label for="radIn">In Campus</label>
<br/>
<input type="radio" value="out" name="campus" onclick="onChange()"
id="radOut"/>
<label for="radOut">Out Campus</label>
<br/>
<select id="dropDown"/>
</body>
</html>