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

2024-02-10

好吧，这可能是一个愚蠢的问题，但我正在尝试编写一个简单的 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 post。如果您希望在此处的表单上运行一些 JavaScript 并阻止其发布，请在提交时添加“return false”。

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

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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

停止在提交表单时添加 URL 参数的相关文章

如何防止 Iframe 在与浏览器交互后弄乱浏览器的历史记录？

因此就我而言我使用 Iframe 将 Grafana 附加到我的页面这为我提供了漂亮且易于使用的图表可以注意到每次在图表上进行放大或缩小使用鼠标单击交互后 Grafana 的 Iframe 都会在我的 Angular 页面上触
在 Wordpress 站点中进行 AJAX 调用时出现问题

我在使用 Wordpress 站点功能的 AJAX 部分时遇到了一些问题该功能接受在表单上输入的邮政编码使用 PHP 函数来查找邮政编码是否引用特定位置并返回到该位置的永久链接我的第一个问题是关于我构建的表单现在我的表单操作是空白的
如何监听 jQuery AJAX 请求？

以下两种实现 ajaxRequest 1 2 的方法应该是等效的话说回来为什么验证回调已执行的单元测试 3 在 1 中成功而在 2 中失败我应该如何重写测试 3 来监视 2 中的成功回调如果我尝试stub jQuery ajax使用
Javascript正则表达式用于字母字符和空格？ [关闭]

这个问题不太可能对任何未来的访客有帮助它只与一个较小的地理区域一个特定的时间点或一个非常狭窄的情况相关通常不适用于全世界的互联网受众为了帮助使这个问题更广泛地适用访问帮助中心 help reopen questions 我需要一个
Node.js：如何在检索数据（块）时关闭响应/请求

我正在用 node js 构建一个应用程序它加载多个页面并分析内容因为 node js 发送块所以我可以分析这些块如果一个块包含例如索引 nofollow 我想关闭该连接并继续其余部分 var host example com to
除了更改标题之外，如何在 Firefox 中强制另存为对话框？

有没有办法在 ff 中强制打开 www example com example pdf 的另存为对话框我无法更改标题如果您可以将文件以 Base64 格式输出到客户端则可以使用 data uri 进行下载 location href
JavaScript 重定向到新窗口

我有以下代码它根据下拉列表的值重定向到页面我如何使其在新窗口中打开 function goto form var index form select selectedIndex if form select options index
如何将 Google Charts 与 Vue.js 库一起使用？

我正在尝试使用 Vue js 库使用 Google Charts 制作图表但我不知道如何添加到 div 这是我尝试做的这是如何使用普通 javascript 添加图表这是文档的代码示例 https developers google
使用 KnockoutJs 映射插件进行递归模板化

我正在尝试使用以下方法在树上进行递归模板化ko映射插入 http knockoutjs com documentation plugins mapping html 但我无法渲染它除非我定义separate每个级别的模板在以下情况下
提交后禁用按钮

当用户提交付款表单并且发布表单的代码导致 Firefox 中出现重复发布时我试图禁用按钮去掉代码就不会出现这个问题在firefox以外的任何浏览器中也不会出现这个问题知道如何防止双重帖子吗 System Text StringBui
在javascript中解析json - 长数字被四舍五入

我需要解析一个包含长数字的 json 在 java servlet 中生成问题是长数字被四舍五入当执行这段代码时 var s x 6855337641038665531 var obj JSON parse s alert obj x
如何在react-native中获取Text组件的onPress值

我是一名新的 React Native 开发人员我想使用 onPress 获取 Text 组件的值并将其传递给函数
如何使用tampermonkey模拟react应用程序中的点击？

我正在尝试使用 Tampermonkey 脚本模拟对 React 元素的点击不幸的是由于 React 有自己的影子 DOM 所以天真的方法使用document querySelector 不工作我遇到了一些需要修改 React 组件本
如何阻止破折号自行包裹？

我有一个标题标题最后一个单词的末尾是一个破折号单词和破折号之间没有空格当浏览器窗口变小时破折号会中断并换成新行在自己的行上有一个破折号是不好的排版如何停止破折号之前的换行以便最后一个单词运行到新行这是代码 h1 XYZ co
为 illustrator 导出脚本以保存为 web jpg

任何人都可以帮我为 illustrator CC2017 编写一个脚本将文件以 JPG 格式导出到网络旧版然后保存文件并关闭我有 700 个文件每个文件有 2 个画板单击文件 gt 导出 gt 另存为 Web 旧版然后右键文
如何在类似控制台的环境中运行 JavaScript？

我正在尝试遵循这里的示例 http eloquentjavascript net chapter2 html http eloquentjavascript net chapter2 html and print blah 在浏览器中运行时
为什么我不能在 AngularJS 中使用 data-* 作为指令的属性名称？

On the t他的笨蛋 http plnkr co edit l3KoY3 p preview您可以注意到属性名称模式的奇怪行为data 在指令中电话 Test of data named attribute br
Javascript转换时区问题

我在转换当前时区的日期时间时遇到问题我从服务器收到此日期字符串格式为 2015 10 09T08 00 00 这是中部时间但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时它返回给我的信息如下这是不
Schema.org 的常见问题解答页面

我有一个常见问题解答页面我想用更好的 html 架构来实现它
如何从图像输入中获取 xy 坐标？

我有一个输入设置为图像类型

随机推荐

网络：使用 igraph 从事件节点数据创建图形对象

我想从事件注释数据为 igraph 创建一个网络对象例如我有一个数据如下所示 Event Person 1 Obama 1 Putin 1 Abe 1 Cameron 2 Putin 2 Xi 2 Merkel 3 Obama 3 Ab
从 Objective C 中的 Swift 类继承

我在 Xcode 7 项目中成功混合和匹配 Obj C 和 Swift 然而我似乎无法弄清楚如何在 Objective C 类中从 Swift 类继承是的我知道如何将该 Swift 类声明为 objc以提高可见性在本例中所需的 S
iPhone GPS 在后台暂停后不会恢复

我的应用程序需要在后台跟踪用户位置变化并且只要用户四处移动就可以正常工作当用户停止并且CLLocationManager10 20 分钟左右后暂停本通知表明 void locationManagerDidPauseLocationUp
使用 stat_summary_hex 以离散色标显示最常见的值

我有一个包含 10k 行和 3 列的数据框 xpos ypos 和簇簇是从 0 到 9 的数字 http pastebin com NyQw29tb http pastebin com NyQw29tb 我想显示一个六边形图其中每个六边
@Async不会通过@ControllerAdvice调用全局异常

我有一个带有 Async 方法的服务类如果它调用方法抛出任何异常那么 ControllerAdvice 将不会调用全局异常处理但对于其他课程和服务它会正确拨打建议并发送电子邮件 Service public class FileSc
如何在 CentOS 中向 PHP 5 添加curl 支持

如何在 CentOS 中向 PHP 5 添加curl 支持安装curl和curl devel后我需要做哪些事情才能在PHP 5中设置curl 有同样的问题安装 php common 对我有用 yum install php commo
如何在 Internet 上托管 wcf 服务？

这可能是一个基本的网络问题但我对这个东西很陌生只是不知道答案我写了一个wcf服务和客户端当我将计算机的网络 IP 地址作为端点地址并从同一台计算机运行客户端和服务器时我可以使用 http 绑定之一并使服务正常工作现在我希望能够
Python GUI (glade) 显示 shell 进程的输出

我正在编写一个 python 应用程序它使用 subprocess Popen 对象运行多个子进程我有一个 Glade GUI 想要在 GUI 中实时显示这些命令的输出在 subprocess Popen 中运行谁能建议一种方法来做
使用await时线程返回线程池

但是使用 ASP NET Web Api 如果您的请求来自某一线程然后您等待某个函数并调用ConfigureAwait false 这可能会让你在不同的线程上返回 ApiController 函数的最终结果其实只是做一个awai
如果输入和复选框不为空，则启用提交按钮

下面我试图确保在允许用户提交之前我的复选框和输入都已填充它忽略我对复选框的检查并仅在填写字段后打开提交我究竟做错了什么 first last pass bind keyup function if allFilled register
如何修复 Android 应用中 X509TrustManager 的不安全实现

Google 通知我的 Android 应用程序中的 X509TrustManager 接口实现不安全需要按如下方式更改代码要正确处理 SSL 证书验证请更改中的代码自定义 X509TrustManager 接口的 checkSer
“ValueError：期望来自 tf.keras.Input() 的 KerasTensor”。使用 dropout 函数进行预测时出现错误

我试图在测试期间使用 Dropout 来预测回归问题的不确定性亚林加尔的文章 https www cs ox ac uk people yarin gal website blog 3d801aa532c1ce html 我使用 Kera
Google Cloud Dataprep 可以监控新文件的 GCS 路径吗？

Google Cloud Dataprep 看起来很棒我们已经用它来手动导入静态数据集但是我想多次执行它以便它可以使用上传到 GCS 路径的新文件我可以看到您可以为 Dataprep 设置计划但我在导入设置中看不到它将如何处理新文
为什么用具有共同祖先的菱形案例来解释Java多重继承问题，而不是两个不相关的父类？

这个问题对于 Java 人来说可能听起来很奇怪但如果你尝试解释一下那就太好了这几天我正在理清Java的一些非常基础的概念所以我来到了Java的继承和接口主题在阅读本文时我发现Java不支持多重继承并且也理解了这一点我无法理解
Slack 支持 Markdown 表格吗？

我想将 Markdown 表发送到 SlackpostMessageAPI 但我在 Slack 中获得了原始内容而不是渲染的表格 Slack 支持 Markdown 表格吗还有其他方法可以在 Slack 中呈现表格数据吗我知道 Sla
选择要使用 Hspec 和堆栈运行的测试

我编写了一系列测试使用自动规格发现 http hspec github io hspec discover htmlHspec 的特点我也在用stack https docs haskellstack org en stable REA
App Engine 忽略目录的符号链接

我正在创建一个在 Google App Engine 上使用自定义 Flex 环境运行的应用程序该应用程序使用多个相对符号链接指向项目中的其他目录但不知何故当我部署应用程序时这些符号链接被忽略看来gcloud工具在构建和部署应
在 Android 中为 startActivityForResult() 生成 16 位唯一 ID

我计划将生成的资源 ID 用于我的所有资源startActivityForResult 代码以便我可以使用onActivityResult 在基类中不必担心派生类是否使用相同的代码不幸的是代码似乎被限制为 16 位而资源 ID 为
如何在ionic 1中输入数字类型时只允许一位小数点

我正在使用数字类型的输入其中允许多个小数点因此我尝试使用正则表达式不允许超过一个小数点但即使在使用正则表达式之后我也面临同样的问题任何人都可以告诉我如何只允许ionic1 中数字类型输入中的一位小数 Html
停止在提交表单时添加 URL 参数

好吧这可能是一个愚蠢的问题但我正在尝试编写一个简单的 JavaScript 应用程序请原谅我的术语我对此很陌生其中包含一个表单但我只使用 HTML 来完成它和 JS 和 CSS 所以我使用 document getElement

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

停止在提交表单时添加 URL 参数 的相关文章

随机推荐

热门标签

停止在提交表单时添加 URL 参数的相关文章