停止在提交表单时添加 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 参数的相关文章

在 R 传单中添加不透明度滑块

如何在 R leaflet 应用程序中添加滑块来控制特定图层的不透明度对于这个应用程序我不想使用闪亮这里建议在 R 传单应用程序中添加滑块 https stackoverflow com questions 37682619 add
如何立即启动setInterval循环？ [复制]

这个问题在这里已经有答案了在一个简单的setInterval setInterval function Do something every 9 seconds 9000 第一个动作将在 9 秒后发生 t 9s 如何强制循环立即执行第一个
在javascript中访问函数内的实例变量？

如何以最简单的方式访问函数内的实例变量 function MyObject Instance variables this handler Methods this enableHandler function var button doc
这种类型注释在没有 TypeScript 的 React 代码中如何工作？

我在看这段代码示例 https reacttraining com react router web example auth workflow在 ReactRouter 页面上这篇文章很有趣 const PrivateRoute com
将html数据解析成python列表进行操作

我正在尝试读取 html 网站并提取其数据例如我想查看公司过去 5 年的 EPS 每股收益基本上我可以读入它并且可以使用 BeautifulSoup 或 html2text 创建一个巨大的文本块然后我想搜索该文件我一直在使用
访问 nuxt 配置文件中的存储

我想添加通过 Nuxt 静态生成的动态路由我定义了一个客户端服务器端存储asyncData方法我想将这个存储值一个数组映射到我的nuxt config js文件使其成为动态静态路线图nuxt generate命令但如何访问
React JS 服务器端问题 - 找不到窗口

你好我正在尝试在我的reactJS项目中使用react rte 我有服务器端渲染每次我想使用这个包时我都会得到 return msie 6 9 b test window navigator userAgent toLowerCase
karma/jasmine 控制台更详细的测试结果

我使用 Karma 和 Jasmine 进行 javascript 单元测试假设我有一个失败的测试如下所示 expect objectA toEqual expectedObjectA 当失败时我看到控制台上转储了两个对象并显示一条
C# 和 Javascript SHA256 哈希的代码示例

我有一个在服务器端运行的 C 算法它对 Base64 编码的字符串进行哈希处理 byte salt Convert FromBase64String serverSalt Step 1 SHA256Managed sha256 new S
检索 css3 缩放元素的宽度/高度

我正在与 offsetWidth 属性的奇怪之处我认为作斗争这是场景比方说我有一个span标签在我的js中在某个时刻我执行css3转换对于这个元素例如 el set styles transform scale scale
全局传递 xhr onload 函数的值

在我正在创建的应用程序中我有以下 XMLHttpRequest 并且我正在尝试传递结果data在的里面xhr onload 到在同一父函数中创建的数组中 var url http api soundcloud com resolve j
如何将 arraylist 从 servlet 传递到 javascript？

我通过在属性中设置数组列表并将其转发到 jsp 来从 servlet 传递数组列表 Servlet ArrayList
HTML 代码中的 PHP [关闭]

Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案我用 HTML 代码编写了 PHP div div 但这出现在输出页面中 else print 我怎样才能让PHP执行你的文件有一个 p
类中可以有生成器 getter 吗？

我的意思是吸气剂是发电机我相信这一切都是 ES6 也许像这样 class a get count let i 10 while i yield i let b new a for const i of b count console lo
如何在 webpack 中渲染嵌套的 SASS？

采取以下CSS MyComponent color blue Button color red 以及以下 React 组件 import React from react import classes from MyComponent sc
CSS 精灵按钮

这些精灵按钮让我抓狂我几乎可以让他们工作但不完全是我正在玩这个非常简单的精灵图像我有一个 jsfiddle 项目 gt gt 这里如果你想看的话但如果你只想看一下代码就在下面 http jsfiddle net jp2code
如何重复 ajax 请求，直到满足 RxJS Observable 的条件？

我正在尝试重复请求直到响应包含使用 RxJS 的数据此时我想调用成功或失败处理程序但我在使用 RxJS 时遇到了麻烦这是我目前的方法 redux observable action observable mergeMap gt
如何使我的表单标题栏遵循 Windows 深色主题？

我已经下载了Windows 10更新包括黑暗主题文件资源管理器等都是深色主题但是当我创建自己的 C 表单应用程序时标题栏是亮白色的如何使我自己的桌面应用程序遵循我在 Windows 中设置的深色主题你需要调用DwmSetWindo
PDF 在 Safari 中隐藏 Jquery Modal

这是与我有关的事情this https stackoverflow com questions 24052681 pdf hide jquery modal in ie问题在 IE 中我在对话框中使用 iframe 解决了问题所以它工
在 JavaScript 函数的 Django 模板中转义字符串参数

我有一个 JavaScript 函数它返回一组对象 return Func id name 例如我在传递包含引号的字符串时遇到问题 Dr Seuss ABC BOOk 是无效语法 I tried name safe 但无济于事有什么解

随机推荐

网络：使用 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 参数的相关文章