Question
Okay, so this may be a stupid question, but I'm attempting to write a simple JavaScript app-thing (please excuse my terminology, I'm new to this) which includes a form, except I'm doing it using only HTML and JS (and CSS), so I'm accessing the values in the form by using document.getElementById.
The thing is the Javascript function is supposed to display something, based on the form values (it's basically a GPA calculator), but the things to display simply flash on the screen, and then disappear when I run the HTML file as is, and don't show up at all when I run it through my actual domain. I feel like the reason for this is that after you submit the form, a bunch of URL parameters get tacked on, thus refreshing the HTML, and deleting the newly added innerHTML.
Here's the code for my form:
https://stackoverflow.com/questions/18189187
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<form id="calculator" name="calculator">
<table>
<thead>
<tr>
<td>Class Number</td>
<td>Grade</td>
<td>AP/Non-AP</td>
<td>GPA</td>
</tr>
</thead>
<tbody>
<tr>
<td class="classnumber">Class 1</td>
<td>
<select id="class1GPA" name="class1GPA">
<option value=4.4 selected>A+</option>
<option value=4.0>A</option>
<option value=3.7>A-</option>
<option value=3.4>B+</option>
<option value=3.0>B</option>
<option value=2.7>B-</option>
<option value=2.4>C+</option>
<option value=2.0>C</option>
<option value=1.7>C-</option>
<option value=1.4>D+</option>
<option value=1.0>D</option>
<option value=0.7>D-</option>
<option value=0>F</option>
</select>
</td>
<td>
<select id="class1AP" name="class1AP">
<option value=False selected>Regular Class</option>
<option value=True>AP Class</option>
</select>
</td>
<td id="class1disp">
</td>
</tr>
<tr>
<td class="classnumber">Class 2</td>
<td>
<select id="class2GPA" name="class2GPA">
<option value=4.4 selected>A+</option>
<option value=4.0>A</option>
<option value=3.7>A-</option>
<option value=3.4>B+</option>
<option value=3.0>B</option>
<option value=2.7>B-</option>
<option value=2.4>C+</option>
<option value=2.0>C</option>
<option value=1.7>C-</option>
<option value=1.4>D+</option>
<option value=1.0>D</option>
<option value=0.7>D-</option>
<option value=0>F</option>
</select>
</td>
<td>
<select id="class2AP" name="class2AP">
<option value=False selected>Regular Class</option>
<option value=True>AP Class</option>
</select>
</td>
<td id="class2disp">
</td>
</tr>
<tr>
<td class="classnumber">Class 3</td>
<td>
<select id="class3GPA" name="class3GPA">
<option value=4.4 selected>A+</option>
<option value=4.0>A</option>
<option value=3.7>A-</option>
<option value=3.4>B+</option>
<option value=3.0>B</option>
<option value=2.7>B-</option>
<option value=2.4>C+</option>
<option value=2.0>C</option>
<option value=1.7>C-</option>
<option value=1.4>D+</option>
<option value=1.0>D</option>
<option value=0.7>D-</option>
<option value=0>F</option>
</select>
</td>
<td>
<select id="class3AP" name="class3AP">
<option value=False selected>Regular Class</option>
<option value=True>AP Class</option>
</select>
</td>
<td id="class3disp">
</td>
</tr>
<tr>
<td class="classnumber">Class 4</td>
<td>
<select id="class4GPA" name="class4GPA">
<option value=4.4 selected>A+</option>
<option value=4.0>A</option>
<option value=3.7>A-</option>
<option value=3.4>B+</option>
<option value=3.0>B</option>
<option value=2.7>B-</option>
<option value=2.4>C+</option>
<option value=2.0>C</option>
<option value=1.7>C-</option>
<option value=1.4>D+</option>
<option value=1.0>D</option>
<option value=0.7>D-</option>
<option value=0>F</option>
</select>
</td>
<td>
<select id="class4AP" name="class4AP">
<option value=False selected>Regular Class</option>
<option value=True>AP Class</option>
</select>
</td>
<td id="class4disp">
</td>
</tr>
<tr>
<td class="classnumber">Class 5</td>
<td>
<select id="class5GPA" name="class5GPA">
<option value=4.4 selected>A+</option>
<option value=4.0>A</option>
<option value=3.7>A-</option>
<option value=3.4>B+</option>
<option value=3.0>B</option>
<option value=2.7>B-</option>
<option value=2.4>C+</option>
<option value=2.0>C</option>
<option value=1.7>C-</option>
<option value=1.4>D+</option>
<option value=1.0>D</option>
<option value=0.7>D-</option>
<option value=0>F</option>
</select>
</td>
<td>
<select id="class5AP" name="class5AP">
<option value=False selected>Regular Class</option>
<option value=True>AP Class</option>
</select>
</td>
<td id="class5disp">
</td>
</tr>
<tr>
<td class="classnumber">Class 6</td>
<td>
<select id="class6GPA" name="class6GPA">
<option value=4.4 selected>A+</option>
<option value=4.0>A</option>
<option value=3.7>A-</option>
<option value=3.4>B+</option>
<option value=3.0>B</option>
<option value=2.7>B-</option>
<option value=2.4>C+</option>
<option value=2.0>C</option>
<option value=1.7>C-</option>
<option value=1.4>D+</option>
<option value=1.0>D</option>
<option value=0.7>D-</option>
<option value=0>F</option>
</select>
</td>
<td>
<select id="class6AP" name="class6AP">
<option value=False selected>Regular Class</option>
<option value=True>AP Class</option>
</select>
</td>
<td id="class6disp">
</td>
</tr>
<tr>
<td class="classnumber">Class 7</td>
<td>
<select id="class7GPA" name="class7GPA">
<option value="none">N/A</option>
<option value=4.4 selected>A+</option>
<option value=4.0>A</option>
<option value=3.7>A-</option>
<option value=3.4>B+</option>
<option value=3.0>B</option>
<option value=2.7>B-</option>
<option value=2.4>C+</option>
<option value=2.0>C</option>
<option value=1.7>C-</option>
<option value=1.4>D+</option>
<option value=1.0>D</option>
<option value=0.7>D-</option>
<option value=0>F</option>
</select>
</td>
<td>
<select id="class7AP" name="class7AP">
<option value=False selected>Regular Class</option>
<option value=True>AP Class</option>
</select>
</td>
<td id="class7disp">
</td>
</tr>
<tr>
<td class="classnumber">Class 8</td>
<td>
<select id="class8GPA" name="class8GPA">
<option value="none">N/A</option>
<option value=4.4 selected>A+</option>
<option value=4.0>A</option>
<option value=3.7>A-</option>
<option value=3.4>B+</option>
<option value=3.0>B</option>
<option value=2.7>B-</option>
<option value=2.4>C+</option>
<option value=2.0>C</option>
<option value=1.7>C-</option>
<option value=1.4>D+</option>
<option value=1.0>D</option>
<option value=0.7>D-</option>
<option value=0>F</option>
</select>
</td>
<td>
<select id="class8AP" name="class8AP">
<option value=False selected>Regular Class</option>
<option value=True>AP Class</option>
</select>
</td>
<td id="class8disp">
</td>
</tr>
</br>
</tbody>
</table>
<input onClick="showGPA()" id="submit" type="submit" value="Calculate!"/>
</form>
And the Javascript that is supposed to process it (it doesn't actually display an average yet, but that's less important than figuring out why it just flashes/doesn't display):
function showGPA() {
var grades = {};
grades.classesNumber = 6
if (document.getElementById('class1AP').value === "True") {
grades.class1 = parseFloat(document.getElementById('class1GPA').value) + 0.5;
} else {
grades.class1 = parseFloat(document.getElementById('class1GPA').value);
}
document.getElementById('class1disp').innerHTML = grades.class1.toFixed(1);
if (document.getElementById('class2AP').value === "True") {
grades.class2 = parseFloat(document.getElementById('class2GPA').value) + 0.5;
} else {
grades.class2 = parseFloat(document.getElementById('class2GPA').value);
}
document.getElementById('class2disp').innerHTML = grades.class2.toFixed(1);
if (document.getElementById('class3AP').value === "True") {
grades.class3 = parseFloat(document.getElementById('class3GPA').value) + 0.5;
} else {
grades.class3 = parseFloat(document.getElementById('class3GPA').value);
}
document.getElementById('class3disp').innerHTML = grades.class3.toFixed(1);
if (document.getElementById('class4AP').value === "True") {
grades.class4 = parseFloat(document.getElementById('class4GPA').value) + 0.5;
} else {
grades.class4 = parseFloat(document.getElementById('class4GPA').value);
}
document.getElementById('class4disp').innerHTML = grades.class4.toFixed(1);
if (document.getElementById('class5AP').value === "True") {
grades.class5 = parseFloat(document.getElementById('class5GPA').value) + 0.5;
} else {
grades.class5 = parseFloat(document.getElementById('class5GPA').value);
}
document.getElementById('class5disp').innerHTML = grades.class5.toFixed(1);
if (document.getElementById('class6AP').value === "True") {
grades.class6 = parseFloat(document.getElementById('class6GPA').value) + 0.5;
} else {
grades.class6 = parseFloat(document.getElementById('class6GPA').value);
}
document.getElementById('class6disp').innerHTML = grades.class6.toFixed(1);
if (document.getElementById('class7GPA').value !== "none") {
if (document.getElementById('class7AP').value === "True") {
grades.class7 = parseFloat(document.getElementById('class7GPA').value) + 0.5;
} else {
grades.class7 = parseFloat(document.getElementById('class7GPA').value);
}
document.getElementById('class7disp').innerHTML = grades.class7.toFixed(1);
grades.classesNumber++;
} else {
grades.class7 = 0;
}
if (document.getElementById('class8GPA').value !== "none") {
if (document.getElementById('class8AP').value === "True") {
grades.class8 = parseFloat(document.getElementById('class8GPA').value) + 0.5;
} else {
grades.class8 = parseFloat(document.getElementById('class8GPA').value);
}
document.getElementById('class8disp').innerHTML = grades.class8.toFixed(1);
grades.classesNumber++;
} else {
grades.class8 = 0;
}
}
How is it possible for me to stop 16 different URL parameters from being added on when the form submits?
Now my guess as to why it doesn't work may be completely wrong, as I said, I'm new to this. (While trying to make this work, I noticed that one of the problems was that I spelt .innerHTML as .innnerHTML)
But if someone could help me make this work, preferably without learning PHP or something, that would be great. Thanks!
Solution
When you submit a form, it will do an HTTP post to the action you specify. If you're looking to run some javascript on your form here, and stop it from posting, add 'return false' on your submit.
http://jsbin.com/icobam/2/edit
<form id="calculator" name="calculator" onsubmit="return false;">
OTHER TIPS
<form id="calculator" name="calculator" onsubmit='showGPA();' method="post">
Inserting method="post" will stop the form from adding parameters in the URL.
Remove the onclick statement from the submit button:
<input onClick="showGPA()" id="submit"
to
<input id="submit"
Change the form to:
<form id="calculator" name="calculator" onsubmit='showGPA(); return false;'>
Note: if there are any javascript errors within the showGPA function then the form will be submitted and cause a page refresh. The only way to prevent this is to ensure that there are no javascript errors.
