Home/ Questions/Q 6245643
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T12:32:33+00:00

Yes, I’ve tried to search answer for this problem and I found many similar

  • 0

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&hellip;</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 😛

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your javascript code could be a lot simpler, but to just answer your question add:

    document.getElementById('shirtsize' + lastDiv).disabled = true;

    after:

    document.getElementById(lastDiv).className = "hiddenMenu";

    And add:

    document.getElementById('shirtsize' + divName).disabled = false;

    after:

    document.getElementById(divName).className = "visibleMenu";

    Then add disabled to both hidden select tags.

    Like:

    <select name="subjectCategory" id="shirtsizemale" disabled>

    disabled means it does not get sent to the server.

    • 0