Reputation: 735

dropdown menu and javascript form change

I am trying to change some form options based on a dropdown selection. I think I wrote the javascript correctly but I am not sure. If someone could atleast get me pointed in the right direction or if there is a better way to accomplish the same thing that would be fine as well. I am a newbie to javascript.

Here is the code.

<form method="post">
    <div class="row requiredRow">
        <label for="ClassName" id="ClassName-ariaLabel">Class Name:</label>
        <input id="ClassName" name="ClassName" type="text" aria-labelledby="ClassName-ariaLabel" class="required" title="Class Name:. This is a required field">
    </div>
    <div class="row">
        <label for="ProfessorName" id="ProfessorName-ariaLabel">Professor Name:</label>
        <input id="ProfessorName" name="ProfessorName" type="text" aria-labelledby="ProfessorName-ariaLabel">
    </div>
    <div class="row requiredRow">
        <label for="GradingScale" id="GradingScale-ariaLabel">Grading Scale:</label>
        <select id="GradingScale" name="GradingScale" aria-labelledby="GradingScale-ariaLabel" class="required" title="Grading Scale:. This is a required field">
            <option value="1">A,A-,B+,B,B-,C+,C,C-,D+,D,D-,F</option>
            <option value="2">A,B,C,D,F</option>
        </select>
    </div>
    <div class='grades'>
        <script>
            var e = document.getElementById("GradingScale");
            var scale = e.options[e.selectedIndex].value;

            if (scale = 2) {
                document.write("<p>Grading Scale:</p><br />");
                document.write("A: <input type='text' name='grade-a'><br />");
                document.write("B: <input type='text' name='grade-b'><br />");
                document.write("C: <input type='text' name='grade-c'><br />");
                document.write("D: <input type='text' name='grade-d'><br />");
                document.write("F: <input type='text' name='grade-f'><br />");
            } else if (scale = 1) {
                document.write("<p>Grading Scale:</p><br />");
                document.write("A: <input type='text' name='grade-a'><br />");
                document.write("A-: <input type='text' name='grade-a-'><br />");
                document.write("B+: <input type='text' name='grade-b+'><br />");
                document.write("B: <input type='text' name='grade-b'><br />");
                document.write("B-: <input type='text' name='grade-b-'><br />");
                document.write("C+: <input type='text' name='grade-c+'><br />");
                document.write("C: <input type='text' name='grade-c'><br />");
                document.write("C-: <input type='text' name='grade-c-'><br />");
                document.write("D+: <input type='text' name='grade-d+'><br />");
                document.write("D: <input type='text' name='grade-d'><br />");
                document.write("D-: <input type='text' name='grade-d-'><br />");
                document.write("F: <input type='text' name='grade-f'><br />");
            }
        </script>
    </div>
    <div class="row">
        <input type="submit" value="Add Class">
    </div>
</form>

Upvotes: 0

Answers (1)

Harry

Reputation: 89780

First thing, you should look into the suggestions provided by Ashwin.

You can modify your current code as below to work for now though. (Demo)

JS Changes

I have moved your entire script into the function scaleChange. This would make it easier for you to call the script whenever the option is changed.
Avoid using document.write lines, they are not a good practice as they repaint the page when called again.
= is an assignment operator and not a comparison operator. You should use == or === in the If/Else-If statements to compare the values.
I have added a window.onload line to populate your grades div based on the default selected value for your drop-down.
Put the modified code into your <script> tag and place it inside the <head> tag.

HTML Changes

I have added a onChange attribute to your select tag. This will make the scaleChange function be called whenever the selected option is changed.
I have made the first option as the default selected one by adding selected property to it.

JS Code

function scaleChange() {
    var e = document.getElementById("GradingScale");
    var scale = e.options[e.selectedIndex].value;
    var gradeDiv = document.getElementsByClassName("grades")[0];
    if (scale == 2) {
        gradeDiv.innerHTML = "<p>Grading Scale:</p><br />";
        gradeDiv.innerHTML += "A: <input type='text' name='grade-a'><br />";
        gradeDiv.innerHTML += "B: <input type='text' name='grade-b'><br />";
        gradeDiv.innerHTML += "C: <input type='text' name='grade-c'><br />";
        gradeDiv.innerHTML += "D: <input type='text' name='grade-d'><br />";
        gradeDiv.innerHTML += "F: <input type='text' name='grade-f'><br />";
    } else if (scale == 1) {
        gradeDiv.innerHTML = "<p>Grading Scale:</p><br />";
        gradeDiv.innerHTML += "A: <input type='text' name='grade-a'><br />";
        gradeDiv.innerHTML += "A-: <input type='text' name='grade-a-'><br />";
        gradeDiv.innerHTML += "B+: <input type='text' name='grade-b+'><br />";
        gradeDiv.innerHTML += "B: <input type='text' name='grade-b'><br />";
        gradeDiv.innerHTML += "B-: <input type='text' name='grade-b-'><br />";
        gradeDiv.innerHTML += "C+: <input type='text' name='grade-c+'><br />";
        gradeDiv.innerHTML += "C: <input type='text' name='grade-c'><br />";
        gradeDiv.innerHTML += "C-: <input type='text' name='grade-c-'><br />";
        gradeDiv.innerHTML += "D+: <input type='text' name='grade-d+'><br />";
        gradeDiv.innerHTML += "D: <input type='text' name='grade-d'><br />";
        gradeDiv.innerHTML += "D-: <input type='text' name='grade-d-'><br />";
        gradeDiv.innerHTML += "F: <input type='text' name='grade-f'><br />";
    }
}

window.onload = scaleChange;

HTML Code (only the select tag)

    <select id="GradingScale" name="GradingScale" aria-labelledby="GradingScale-ariaLabel" 
            class="required" title="Grading Scale:. This is a required field" 
            onChange='scaleChange();'>
        <option value="1" selected>A,A-,B+,B,B-,C+,C,C-,D+,D,D-,F</option>
        <option value="2">A,B,C,D,F</option>
    </select>

Upvotes: 1

dropdown menu and javascript form change

Answers (1)

Related Questions