Redirection of URL - javascript

Redirection of URL - javascript

I have a VM file with the following codes:
UPDATED:
<html>
<head>
<title>Input Form</title>
<style>
#FW{
display: none;
}
</style>
<script type="text/javascript">
function showSelect()
{
var post = document.getElementById('post');
var fwork = document.getElementById('FW');
fwork.style.display = post.selectedIndex == 1 ? 'block' : 'none';
}
function getMeThere(){
var post = document.getElementById('post');
var fwork = document.getElementById('frwork');
if( post.value.toString() == "dpost"){
document.forms["adform"].action="https://google.com" ;
document.forms["adform"].method="post" ;
}
else{
if(fwork.value.toString() == "wap"){
document.forms["adform"].action="https://mail.yahoo.com" ;
document.forms["adform"].method="post" ;
}
else {
document.forms["adform"].action="bbc.co.uk" ;
document.forms["adform"].method="post" ;
}
}
document.forms["adform"].submit() ;
}
</script>
</head>
<body>
<form name="forum" id="adform" >
<label>Payment Amount:</label>
<input type = "text" name="paymentAmount" value=""/>
<label> Reference:</label>
<input type = "text" name="Reference" value=""/><br />
<label>Choose post</label><br/>
<select name="postCode" onchange="showSelect()" id = "post">
<option value="dpost">Desktop post</option>
<option value="mpost">Mobile post</option>
</select><br/>
<div id = "FW">
<label>Choose Your Toolkit</label><br/>
<select name="frwork" id = "frwork">
<option id=""></option>
<option id="jqm">jQuery Mobile</option>
<option id = "wap">Webapp-Net</option>
<option id = "tst">a Test</option>
</select>
</div>
<input type="submit" onclick="getMeThere()"/>
</form>
</body>
The redirection doesn't work at all, and I can't seem to find the problem. please notice that the URLs are fake, because I could post the real URL due to security issues.

Typo? it would work if you changed:
document.forms[this].action
to
document.forms["adform"].action
Edit
You also have var fwork = document.getElementById('FW');then later fwork.value.toString() but FW is a DIV not the SELECT.
Change the select to <select id="frwork" name="frwork"> and read it with var fwork = document.getElementById('frwork');
Edit 2
Your fwork.value.toString() == "wap" will never be true as the only occurence of "WAP" is <option id = "wap">w-Net</option> which is not a .value.
Change the HTML to:
<select name="frwork" id = "frwork">
<option value=""></option>
<option value="jqm">jQuery Mobile</option>
<option value = "wap">Webapp-Net</option>
<option value = "tst">a Test</option>
</select>
And to read the selected value replace:
if (fwork.value.toString() == "wap") {
with:
if (fwork.options[fwork.selectedIndex].value == "wap") {

Related

How to select dropdown by inserting value in the text box

Hello i have a dropdown which is fetching data from a database. Forget about the database, i have a text box in front of the dropdown select. The logic is if i type in the text the value should be selected automatically from the dropdown if the value typed in the text not matched with the values in the dropdown, then the user can select the dropdown. Any help would be much appreciated.
Here is my html code!
<div class="form-group">
<label class="col-sm-4 control-label">Scheme**</label>
<div class="col-sm-4">
<select class="form-control" name="scheme" id="scheme">
<?php
for ($column = 'A'; $column <= $lastcol; $column++) {
echo '<option value="' . $column . '">' . $worksheet->getCell($column . '1')->getValue() . '</option>';
}
?>
</select>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="txt_scheme" name="txt_scheme" placeholder="Or Type here">
</div>
</div>
In dropdown i m getting these values
QC code
Analyte
Assay Value
Assigned Value
STANDARDDEVIATION
ACCEPTABLEMIN
ACCEPTABLEMAX
Sample ID
Date

Try this code, then you can modified with your need.
$("#product").on("change keyup paste", function(){
var valuefound ='';
$("#platformid option").each(function(i){
if($(this).text().substring(0, 2).toLowerCase()==$("#product").val().substring(0, 2).toLowerCase() ){ valuefound = $(this).val(); } });
$('option:selected', 'select[name="platformid"]').removeAttr('selected'); $('#platformid option[value="' + valuefound + '"]').prop('selected', true); })
Working fiddle here https://jsfiddle.net/8xfqeb9y/

<label for="">Enter Value</label>
<input type="text" class="textVal">
<select name="" id="listItems">
</select>
var listItems = ["One","Two","Three","Four","Five","Six"];
for (var i = 0; i < listItems.length; i++) {
console.log(listItems[i]);
$("#listItems").append("<option>" + listItems[i] + "</option>")
}
$(".textVal").on("focusout",function(){
for (var i = 0; i < listItems.length; i++) {
console.log(listItems[i]);
if(listItems[i] == $(this).val()) {
$("#listItems").val($(this).val());
}
}
})

check now that values and texts are different and you can even select now by typing one
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#txtselect").keyup(function(){
$("#selbox > option").each(function() {
if($(this).text()==$("#txtselect").val())
{
$(this).attr('selected', 'selected');
}
});
});
});
</script>
</head>
<body>
<select id="selbox">
<option val="select">select</option>
<option val="123">one</option>
<option val="abc">two</option>
<option val="23sfd">three</option>
<option val="27345">four</option>
</select>
<input type="text" id="txtselect"/>
</body>
</html>
check this you will get solution run snippet and type "one"
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#txtselect").keyup(function(){
$("#selbox").val($("#txtselect").val());
});
});
</script>
</head>
<body>
<select id="selbox">
<option val="select">select</option>
<option val="one">one</option>
<option val="two">two</option>
<option val="three">three</option>
<option val="four">four</option>
</select>
<input type="text" id="txtselect"/>
</body>
</html>

Try this
<script type="text/javascript">
function getselected(elem)
{
var textvalue = $(elem).val();
if(textvalue != '')
{
$('select').removeAttr('disabled');
$('select option').removeAttr('selected');
$('select option').each(function(){
if ($(this).html().indexOf(textvalue) > -1)
{
$('select').val($(this).attr('value'));
}
});
}
else
{
$('select').val('');
$('select').attr('disabled','disabled');
}
}
</script>
<input type="text" name="name" value="" onkeydown="getselected(this)">
<select disabled="disabled">
<option value="">Select</option>
<option value="1">QC code</option>
<option value="2">Analyte</option>
<option value="3">Assay Value</option>
<option value="4">Assigned Value</option>
<option value="5">STANDARDDEVIATION</option>
<option value="6">ACCEPTABLEMIN</option>
<option value="7">ACCEPTABLEMAX</option>
<option value="8">Sample ID</option>
<option value="9">Date</option>
</select>

Using Javascript to check form elements and enabling/disabling the search button

I need your help,
Using javascript, how could I add some sort of data form validation that would be two-fold:
1st Event, [OnKeyUp] attached to all of the input boxes
2nd Event, [OnChange] attached to all of the select boxes
Typical User Scenarios
If there is any data present in any of the input boxes and no selected option values then { enable the search button } else { keep the search button disabled }
If there are any selected option values who’s option value is not null and no data present in all of then { enable the search button } else { keep the search button disabled }
<!DOCTYPE html>
<html>
<head></head>
<body>
<form id="myform">
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br><br>
Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br><br>
Vegetable
<input type="input" id="veggie">
<br><br>
Number
<input type="input" id="number">
<br><br>
<input type="button" value="search" id="search" disabled>
</form>
</body>
</html>

var car=$('#car'); var fruits=$('#fruits');
var veggie=$('#veggie'); var number = $('#number');
$('select').change(function(){
validate();
});
$('input').keyup(function(){
validate();
});
function validate(){
if(($(veggie).val()!='' || $(number).val()!='') &&
$(car).val()=='' && $(fruits).val()==''){
$('#search').prop('disabled',false);
}else if($(veggie).val()=='' && $(number).val()=='' &&
($(car).val()!='' || $(fruits).val()!='')){
$('#search').prop('disabled',false);
}else{
$('#search').prop('disabled',true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<form id="myform">
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br><br>
Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br><br>
Vegetable
<input type="input" id="veggie">
<br><br>
Number
<input type="input" id="number">
<br><br>
<input type="button" value="search" id="search" disabled>
</form>
</body>

I'm not 100% sure, but it looks like you want to enable the button if only one of the select elements has a value or one of the input elements has a value, but not if both (or neither) do.
If that's the case then this should work, and it allows you you add as many elements to it as you need by adding IDs to the arrays at the top.
https://jsfiddle.net/j7by6bsz/
var selectInputIds = ['fruits', 'car'];
var textInputIds = ['veggie', 'number'];
function setButtonState() {
var hasVal = function(arr) {
for(var i = 0; i < arr.length; i++) {
if(document.getElementById(arr[i]).value) {
return true;
}
}
return false;
};
var hasSelectValue = function () {
return hasVal(selectInputIds);
}
var hasTextValue = function () {
return hasVal(textInputIds);
}
var theButton = document.getElementById('search');
var s = hasSelectValue();
var t = hasTextValue();
theButton.disabled = ((s && t) || (!t && !s)); // you can do this bit smarter, but this is explicit
}
(function attachStuff (arr, evt) {
function listenIn(arr, evt) {
for(var i = 0; i < arr.length; i++) {
document.getElementById(arr[i]).addEventListener(evt, setButtonState);
}
}
listenIn(selectInputIds, 'change');
listenIn(textInputIds, 'keyup');
}())
Your requirements could use some clarification around what happens if both input types have values though.

javascript to update price of 4 dropdown & 2 check box button.

The above code is not working the way I want. The user should be able to select one option from each drop down menu & as soon as he selects a option price should be updated (at this point an alert box will do). User should be able to re-select any drop down menu if he/she wants and proper calculations needs to be done accordingly.
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="file.css">
<script type="text/javascript">
function dropdown() {
var drp = document.getElementById("numberlist");
var optn = document.createElement("OPTION");
optn.text="3";
optn.value="3";
drp.add(optn);
}
function Add() {
var e = document.getElementById('numberlist');
var txt = e.options[e.selectedIndex].text;
var txt_int = parseInt(txt);
var final_txt = show(txt_int);
//return final_txt;
//alert(txt_int);
}
function show(price) {
if(document.my_form.but1.checked == true) {
//alert("Box1 is checked");
price += 10;
}
else if(document.my_form.but2.checked == true) {
//alert("Box 2 is checked");
price += 15;
}
//return price;
alert(price);
}
</script>
</head>
<body onload="dropdown();">
<form name="my_form">
<select id="numberlist" onchange="Add()">
<option>Select</option>
<option>12</option>
<option>24</option>
<option>36</option>
</select>
<select id="numberlist" onchange="Add()">
<option>Select</option>
<option>12</option>
<option>24</option>
<option>36</option>
</select>
<select id="numberlist" onchange="Add()">
<option>Select</option>
<option>12</option>
<option>24</option>
<option>36</option>
</select>
<select id="numberlist" onchange="Add()">
<option>Select</option>
<option>12</option>
<option>24</option>
<option>36</option>
</select>
<br /> <p>
<input type="checkbox" name=but1 onchange="show()"> Gift Wrap $10 <br />
<input type="checkbox" name=but2 onchange="show()"> Express Shipping $15<br /> <p>
</form>
</body>
</html>

There are a couple of issues I see right of the bat.
Your select elements all have the same id attribute. This is a definite no-no. The use of document.getElementById() will only return one element.
If you want to get a handle on all of the select fields in your Add() and dropdown() functions, you should use the name attribute instead of the id attribute and query for these elements with document.getElementsByName(nameValue). This will return an array of all of your select elements which you would want to iterate over with a for loop.
The other issue is with your show() function. You have the parameter "price" defined in the function, buy you are not calling the function with a "price" argument. You can define a global price variable that will be accessible by all the functions with the window.
//Define a global price variable that will be visible to every function
var price;
//Add extra option to 'numberlist' select elements
function initDropdownOptions() {
//Grab all select elements by their name attribute
var selectElements = document.getElementsByName("numberlist");
//Initialize/Define for loop conditions variables
var numberOfDropdowns = selectElements.length;
var i;
//Define a reusable temp option variable to be reused
var optn;
//Iterate over select elements
for( i = 0; i < numberOfDropdowns; i++ ){
//Create a new option element and save it to the optn variable
optn = document.createElement("OPTION");
//Set the text of the option
optn.text="3";
//Set the value of the option
optn.value="3";
//Add the option to the ith select element
selectElements[i].add( optn );
}
}
function calculatePrice() {
//Grab all select elements by their name attribute
var selectElements = document.getElementsByName("numberlist");
//Initilize/Define for loop conditions variables
var i;
var numberOfDropdowns = selectElements.length;
//Define a temp holder for the select values
var tmpSelectValue;
//Initialize the global price variable to 0
price = 0;
for( i = 0; i < numberOfDropdowns; i++ ){
//Extract the value from the select element
tmpSelectValue = selectElements[i].options[ selectElements[i].selectedIndex ].value
//Parse the tmpSelectValue into a number and add it to the global price
price += parseFloat( tmpSelectValue );
}
//Add additional Charges if they are applicable
var giftWrapChecked = (document.my_form.but1.checked == true);
var expressShippingChecked = (document.my_form.but2.checked == true);
if( giftWrapChecked ) {
//Add aditional 10$
price += 10;
}
if( expressShippingChecked ) {
//Add additional 15$
price += 15;
}
//Output the price to the currentPrice div
document.getElementById("currentPrice").innerHTML = price;
}
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="file.css">
</head>
<body onload="initDropdownOptions();">
<form name="my_form">
<select name="numberlist" onchange="calculatePrice()">
<option value='0'>Select</option>
<option value='12'>12</option>
<option value='24'>24</option>
<option value='36'>36</option>
</select>
<select name="numberlist" onchange="calculatePrice()">
<option value='0'>Select</option>
<option value='12'>12</option>
<option value='24'>24</option>
<option value='36'>36</option>
</select>
<select name="numberlist" onchange="calculatePrice()">
<option value='0'>Select</option>
<option value='12'>12</option>
<option value='24'>24</option>
<option value='36'>36</option>
</select>
<select name="numberlist" onchange="calculatePrice()">
<option value='0'>Select</option>
<option value='12'>12</option>
<option value='24'>24</option>
<option value='36'>36</option>
</select>
<br />
<p>
<input type="checkbox" name=but1 onchange="calculatePrice()"> Gift Wrap $10 <br />
<input type="checkbox" name=but2 onchange="calculatePrice()"> Express Shipping $15<br />
<p>
<div id='currentPrice'></div>
</form>
</body>
</html>

This can be easily done using jQuery:
Try it:
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="file.css" />
</head>
<body>
<form name="my_form">
<select id="numberlist1" class="dropdown">
<option value="0">Select</option>
<option value="12">12</option>
<option value="24">24</option>
<option value="36">36</option>
</select>
<select id="numberlist2" class="dropdown">
<option value="0">Select</option>
<option value="12">12</option>
<option value="24">24</option>
<option value="36">36</option>
</select>
<select id="numberlist3" class="dropdown">
<option value="0">Select</option>
<option value="12">12</option>
<option value="24">24</option>
<option value="36">36</option>
</select>
<select id="numberlist4" class="dropdown">
<option value="0">Select</option>
<option value="12">12</option>
<option value="24">24</option>
<option value="36">36</option>
</select>
<br />
<p>
<input type="checkbox" name="but1" value="10" />
Gift Wrap $10 <br />
<input type="checkbox" name="but2" value="15" />
Express Shipping $15<br />
<p>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$('input:checkbox, select.dropdown').change(function(){
var price = 0;
$('input:checkbox, select.dropdown').each(function(){
// Your Show function
if($(this).is('input:checkbox') )
{
if($(this).is(':checked'))
price += parseInt($(this).val());
}
else
price += parseInt($(this).val());
});
alert(price);
});
</script>
</body>
</html>

Changing one form value based on onChange of another with javascript

I can't seem to get this function to work out. I'm trying to change the "business" input value of my form based on an amount selected in the "amount" dropdown. What am I missing!!! I've been trying this for an hour.
<script type="text/javascript">
function chPy()
{
var businessvar = "paypals#ramatico.com";
if (document.forms['5'].amount.value > 11){
businessvar = "paypall#ramatico.com"
}
document.forms['5'].business.value = businessvar;
}
</script>
<form name="5">
<select name="amount" OnChange="chPy()">
<option value="na">Select</option>
<option value="1.00">$1</option>
<option value="5.00">$5</option>
<option value="10.00">$10</option>
<option value="15.00">$15</option>
<option value="20.00">$20</option>
<option value="25.00">$25</option>
</select>
<input name="business" type="text" value="">
</form>
Ok. The next step. I have about 100 of these forms on a page. Instead of creating one for each form, I'd like to have one script that changes based on which form is being changed with "onChange". Each of the forms on the page have values of the same name (but not ID) (they are for paypal). I think it will be ok if I can change the"formname" in the following: "document.forms['formname']" based on a variable populated by something like chPy("formname") etc..... I can't seem to get that to work either.

Removing the form reference would take care of both of your items.
<script type="text/javascript">
function chPy(oSelect)
{
var businessvar = "paypals#ramatico.com";
if (oSelect.form.amount.value > 11){
businessvar = "paypall#ramatico.com"
}
oSelect.form.business.value = businessvar;
}
</script>
<form name="5">
<select name="amount" OnChange="chPy(this)">
<option value="na">Select</option>
<option value="1.00">$1</option>
<option value="5.00">$5</option>
<option value="10.00">$10</option>
<option value="15.00">$15</option>
<option value="20.00">$20</option>
<option value="25.00">$25</option>
</select>
<input name="business" type="text" value="">
</form>

Problem is that you are using a number as form name.
Add some letters to the name and it will work:
<script type="text/javascript">
function chPy()
{
var businessvar = "paypals#XYZ.com";
if (document.forms['form5'].amount.value > 11){
businessvar = "paypall#XYZ.com"
}
document.forms['form5'].business.value = businessvar;
}
</script>
<form name="form5">
<select name="amount" OnChange="chPy()">
<option value="na">Select</option>
<option value="1.00">$1</option>
<option value="5.00">$5</option>
<option value="10.00">$10</option>
<option value="15.00">$15</option>
<option value="20.00">$20</option>
<option value="25.00">$25</option>
</select>
<input name="business" type="text" value="">
</form>

HTML:
<form name="form5">
<select name="amount">
<option value="na">Select</option>
<option value="1.00">$1</option>
<option value="5.00">$5</option>
<option value="10.00">$10</option>
<option value="15.00">$15</option>
<option value="20.00">$20</option>
<option value="25.00">$25</option>
</select>
<input type="text" name="business">
</form>
JavaScript:
var form5 = document.forms['form5'];
form5.amount.onchange = function() {
form5.business.value =
(this.value > 11 ? 'paypall' : 'paypals') + '#ramatico.com';
}
Live demo: http://jsfiddle.net/Fx7zh/
For multiple forms, you can use this JavaScript code:
for (var i = 0, l = document.forms.length; i < l; i++) {
document.forms[i].amount.onchange = function(i) {
this.form.business.value =
(this.value > 11 ? 'paypall' : 'paypals') + '#ramatico.com';
}
}
Live demo: http://jsfiddle.net/Fx7zh/2/

drop down options depending on the selected radio button in javascript

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>

Develop Reference

JavaScript is the programming language of the Web.

Redirection of URL - javascript

Related

How to select dropdown by inserting value in the text box

Using Javascript to check form elements and enabling/disabling the search button

javascript to update price of 4 dropdown & 2 check box button.

Changing one form value based on onChange of another with javascript

drop down options depending on the selected radio button in javascript

Categories

Resources