Auto-select Dropdown option based on previous answer - Javascript HTML Form
Question
First time posting so apologies if it may question is at first unclear, although I hope it's fairly straight forward. I'm new to Javascript and need some help.
WHAT I WANT TO ACHIEVE:
I have an HTML form and when someone selects a letter from the 'letter' dropdown menu in the HTML form (eg A, B, or C), I want the 'number' dropdown menu to change automatically based on the select in the 'letter' dropdown (eg if letter selected was 'A' then select '1', if 'B' then select '2' and so on.)
[[ As a bonus, it also like the 'number' dropdown to be disabled, so automatic variable generated cannot be changed by the front-end user filling out the form]]
FURTHER INFORMATION
I had seen something similar down on a form I had permission to use so I tried to ammend the code but I can't make it work. If you could provide tips on how to ammend the code or provide a new answer to my problem that would be fantastic.
MY CODE (so far...)
The Javascript Part
<html>
<head>
<?php
echo "var campus='none';";
?>
<script language ="javascript">
function changeDropdown(number) {
numberSelection = document.getElementById("number");
for (var i = 0; i < numberSelection.length; i++)
{
if (number == numberSelection[i].value)
{
numberSelection[i].selected = true;
return;
}
}
}
function load() {
if (number == 'none')
{
letterSelection = document.getElementById("letter");
if letter == letterSelection("0")
{
changeDropdown("A");
}
else if letter == letterSelection("1")
{
changeDropdown("B");
}
else if letter == letterSelection("2")
{
changeDropdown("C");
}
}
else
{
changeDropdown(number);
}
}
</script>
</head>
<body>
The Form
<form name ="form1">
<select name ="letter" onclick="load()">
<option value ="A">A
<option value ="B">B
<option value ="C">C
</option>
</select>
<br />
<select name ="number">
<option value ="1">1
<option value ="2">2
<option value ="3">3
</option>
</select>
</body>
</html>
Any clarification, just ask and I'm very happy to respond :)
1 answers
solution1
0 2015-06-24 11:23:02
change this
numberSelection = document.getElementById("number")
to this
numberSelection = $("number").val();
and
<select name ="number">
<option value ="1">1
<option value ="2">2
<option value ="3">3
</option>
</select>
to
<select name ="number">
<option value ="1">1</option>
<option value ="2">2</option>
<option value ="3">3</option>
</select>
remember, a openening tag must have a closing tag
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.