dropdown menu and javascript form change

Question

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>

1. You don't seem to be having an onChange event for the select tag to modify the grades contents based on selection. 2. The script as it stands will execute only once and on load. 3. You don't have any default selected value for the drop-down. — Harry
– Harry, Commented Aug 11, 2013 at 6:00
@user2363217 use for loops and arrays instead of hardcoding whole form. — Ashwani
– Ashwani, Commented Aug 11, 2013 at 6:03
How would I add that to make it work? If you just showed an example that would be fine. — user2363217
– user2363217, Commented Aug 11, 2013 at 6:04

Harry · Accepted Answer · 2013-08-11 06:36:00Z

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>

Collectives™ on Stack Overflow

dropdown menu and javascript form change

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related