Yes, I've tried to search answer for this problem and I found many similar questions but none of them seemed to help me.
I have drop down list with few options and when user selects one option, another drop down list appears with correct choices. Yes, this was the easy part but I need to send selected options to a server and that's the tricky part for me. I have created two different drop down lists which pop up after the user has selected one option from the main drop down list. Problem is that correct values goes to the server only from the first list that pops up. If I choose value from the 2nd list that pops up, the first option of the 1st list goes to server.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type=text/css>
.hiddenMenu {display: none;}
.visibleMenu {display: inline;}
</style>
<script type=text/javascript>
var lastDiv = ;
function showDiv(divName) {
// hide last div
if (lastDiv) {
document.getElementById(lastDiv).className = hiddenMenu;
}
//if value of the box is not nothing and an object with that name exists, then change the class
if (divName && document.getElementById(divName)) {
document.getElementById(divName).className = visibleMenu;
lastDiv = divName;
}
}
</script>
</head>
<body>
<form action=http://url.here method=post enctype=multipart/form-data>
<label for=shirttype>T-shirt </label>
<select name=category id=shirttype onchange=showDiv(this.value);>
<option value=>Choose type…</option>
<option value=female>Female</option>
<option value=male>Male</option>
</select>
<br/>
<p id=female class=hiddenMenu>
<label for=shirtsizefemale>Size </label>
<select name=subjectCategory id=shirtsizefemale>
<option value=femaleXS>XS</option>
<option value=femaleS>S</option>
</select>
</p>
<p id=male class=hiddenMenu>
<label for=shirtsizemale>Size </label>
<select name=subjectCategory id=shirtsizemale>
<option value=maleXS>XS</option>
<option value=maleS>S</option>
</select>
</p>
<br/>
<input type=submit value=Upload>
</form>
</body>
</html>
So, if I select male S to be my shirt. I receive value femaleXS in the server. But if I select female S to be my shirt, value goes correctly to server. Only the value from the 1st popping up list goes correctly to the server.
Ok, so then I decided to make only one list that pops up and this list would have all the options. I would just hide the wrong options depending on what type of shirt user selects. Problem is, I run out of JS skills :) This JS code I'm using I got from here.
Help me out. I guess one drop down list with hidden values would be the best choice but I just don't know how to do it :P
