那些遇到过的问题

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

Ary*_*lli 3 html javascript 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>
Run Code Online (Sandbox Code Playgroud)

并且应该处理它的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;
}
Run Code Online (Sandbox Code Playgroud)

}

当表单提交时,如何阻止添加16个不同的URL参数？

现在我猜测它为什么不起作用可能是完全错误的,正如我所说,我是新手.(在尝试完成这项工作时,我注意到其中一个问题是我将.innerHTML拼写为.innnerHTML)

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

小智 5

提交表单时,它会对您指定的操作执行HTTP发布.如果您希望在此处在表单上运行一些javascript,并停止发布,请在提交时添加"return false".

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

    <form id="calculator" name="calculator" onsubmit="return false;">
Run Code Online (Sandbox Code Playgroud)

Sae*_*ari 5 

<form id="calculator" name="calculator" onsubmit='showGPA();' method="post">
Run Code Online (Sandbox Code Playgroud)

插入method="post"将阻止表单在 URL 中添加参数。

归档时间：

查看次数：

8309 次

最近记录：

8 年，9 月 前
相关归档
解析JSON给出"意外令牌o"错误 434
如何使用范围和导航器功能在Highcharts中创建列范围图表？ 91
从谷歌标记获取Lat/Lng 87
如何使用Vue-Router在Vue中设置URL查询参数 81
Next.js 无法识别“@types/react” 61
w3c html验证错误 - 部分缺少标题.考虑使用h2-h6元素为所有部分添加标识标题 35
如何在Java中获取HTML 26
如何在我的html页面中使用多个iFrame？ 22
类似的PHP表单代码:如果$ _REQUEST为空,则第一次抛出错误,第二次没有 5
检测是否使用jQuery在目标div内勾选了一个复选框 1
难疑归档
如何在shell脚本中打印JSON？ 2905
将具有默认值的列添加到SQL Server中的现有表 2648
finally块总是在Java中执行吗？ 2281
Git获取远程分支 2088
如何逐行读取文件到列表中？ 2028
为什么在C++中读取stdin的行比Python要慢得多？ 1738
常规演员与static_cast与dynamic_cast 1661
单击div到底层元素 1500
Memcached与Redis？ 1398
什么是"Linting"？ 1044