javascript - 停止在提交表单时添加 URL 参数

标签 javascript html forms url-parameters

好吧，这可能是一个愚蠢的问题，但我正在尝试编写一个简单的 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 拼写为 .innnerHTML)

但如果有人可以帮助我完成这项工作，最好不用学习 PHP 或其他东西，那就太好了。谢谢!

最佳答案

当您提交表单时，它将对您指定的操作执行 HTTP 发布。如果您想在此处的表单上运行一些 javascript 并阻止它发布，请在您的提交中添加“return false”。

http://jsbin.com/icobam/2/edit 

    <form id="calculator" name="calculator" onsubmit="return false;">

关于javascript - 停止在提交表单时添加 URL 参数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18189187/

上一篇：html - 如何组织 Phonegap HTML 文件

下一篇：html - 列表样式随着内联 block 消失了——但我希望我的列表装饰器保留下来

相关文章：

Spring//JSP//表单处理 - 在字符串上使用@ModelAttribute

javascript - 在crossfilter dc js中应用除Others之外的多个过滤器

javascript - 检查P5.js中是否点击了圆弧

javascript - 使用 javascript 检查复选框是否已选中将不起作用

Chrome 中的 HTML 输入类型 ="file"不显示文本框

python - 使用 jinja 标签在 html 标签内使用 if 条件

php - 撇号在 Wordpress 上被保存为 ' 使用重力形式

ajax - jQuery Mobile 避免以 ajax 形式提交的 changePage()

javascript - 如何将 JavaScript 循环输出到页面上(而不是在控制台中)？

javascript - fullpage.js 与 mobile.js 和 camera.js 的不兼容问题

©2024 IT工具网  联系我们