在提交表单时停止添加URL参数
Stop URL parameters being added on submit of form
好吧,这可能是一个愚蠢的问题,但我正试图写一个简单的JavaScript应用程序(请原谅我的术语,我是新手),其中包括一个表单,只是我只使用HTML和JS(以及CSS),所以我使用document.getElementById访问表单中的值。
问题是,Javascript函数应该根据表单值显示一些东西(它基本上是一个GPA计算器),但要显示的东西只是在屏幕上闪烁,然后在我按原样运行HTML文件时消失,在我的实际域中运行它时根本不显示。我觉得这是因为在提交表单后,会添加一堆URL参数,从而刷新HTML,并删除新添加的innerHTML。
这是我表格的代码:
<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>
以及应该处理它的Javascript(它实际上还没有显示平均值,但这比弄清楚为什么它只是闪烁/不显示更不重要):
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;
}
}
当表单提交时,我如何才能阻止添加16个不同的URL参数?
现在,我对为什么它不起作用的猜测可能是完全错误的,正如我所说,我是新手。(在尝试实现这一功能时,我注意到其中一个问题是我将.innerHTML拼写为.innerHTML)
但如果有人能帮助我完成这项工作,最好不用学习PHP或其他什么,那就太好了。谢谢
当您提交表单时,它将对您指定的操作执行HTTP post。如果你想在这里的表单上运行一些javascript,并阻止它发布,请在提交时添加"return false"。
http://jsbin.com/icobam/2/edit
<form id="calculator" name="calculator" onsubmit="return false;">
<form id="calculator" name="calculator" onsubmit='showGPA();' method="post">
插入method="post"
将阻止表单在URL中添加参数。
从提交按钮中删除onclick语句:
<input onClick="showGPA()" id="submit"
至
<input id="submit"
将表单更改为:
<form id="calculator" name="calculator" onsubmit='showGPA(); return false;'>
注意:如果showGPA函数中存在任何javascript错误,则会提交表单并导致页面刷新。防止这种情况发生的唯一方法是确保没有javascript错误。
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- 将url替换为链接,但添加了困难
- 如何从 URL 数组向文档添加图像列表
- 单击引导模式锚点时添加 URL 哈希
- Javascript,Jquery-添加url图像
- Jquery在尝试添加url参数时添加哈希符号
- 如何在javascript中添加url
- 使用 Angularjs 中的单选按钮动态添加 url 和 alt 属性
- 如何使用 css 元素从 java 添加 url 链接
- 如何通过 css 元素从 jquery 添加 url 链接
- 在提交表单时停止添加URL参数
- 如果JSON对象中没有提供,如何向ng重复添加Url
- 如何使用对话框/提要javascript在Facebook的描述字段中添加URL
- 如何在新页面上添加URL值
- 根据Iframe的ID,为Fancybox2-AJAX调用的Iframe添加URL
- 为文档中的链接添加URL参数
- 更改下拉菜单,在输入框中添加url参数
- 通过Angular Script添加URL
- 是否可以在window.history对象中添加url
- Javascript google api调用-如何添加“url丢失”如果响应中没有图片url,则返回json obj