如何在单击按钮后从表单中获取结果(JavaScript和HTML)
在JavaScript和HTML中，可以通过以下步骤在单击按钮后从表单中获取结果：
- 在HTML中，创建一个表单元素，可以使用
<form>标签来定义表单。在表单中，可以包含各种输入元素，例如文本框、复选框、下拉列表等。 - 在表单中添加一个按钮元素，可以使用
<button>标签来创建按钮。给按钮添加一个唯一的id属性，以便在JavaScript中引用它。 - 在JavaScript中，使用
document.getElementById()方法获取按钮元素的引用。将获取的引用保存在一个变量中，以便后续使用。 - 使用
addEventListener()方法为按钮元素添加一个点击事件监听器。当按钮被点击时，事件监听器中的回调函数将被触发。 - 在回调函数中，使用
document.getElementById()方法获取表单中其他输入元素的引用。将获取的引用保存在变量中，以便后续使用。 - 使用获取到的输入元素的引用，可以通过其value属性来获取用户在表单中输入的值。
下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>获取表单结果</title>
</head>
<body>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br><br>
<button id="submitButton">提交</button>
</form>
<script>
// 获取按钮元素的引用
var submitButton = document.getElementById("submitButton");
// 添加点击事件监听器
submitButton.addEventListener("click", function(event) {
event.preventDefault(); // 阻止表单默认提交行为
// 获取输入元素的引用
var nameInput = document.getElementById("name");
var emailInput = document.getElementById("email");
// 获取输入的值
var name = nameInput.value;
var email = emailInput.value;
// 在控制台打印结果
console.log("姓名: " + name);
console.log("邮箱: " + email);
});
</script>
</body>
</html>在上述示例中，当用户点击提交按钮时，JavaScript代码将获取输入框中的姓名和邮箱的值，并在控制台打印出来。你可以根据实际需求对获取到的结果进行进一步处理，例如将其发送到服务器或进行其他操作。
腾讯云相关产品和产品介绍链接地址：
- 云函数（Serverless）：https://cloud.tencent.com/product/scf
- 云开发（小程序开发）：https://cloud.tencent.com/product/tcb
- 云数据库（MongoDB）：https://cloud.tencent.com/product/tcb
- 云存储（对象存储）：https://cloud.tencent.com/product/cos
相关·内容
我对HTML和Javascript非常陌生，我正在尝试做这个简单的程序，在这个程序中，我填写一个表单，当我点击“提交”时，结果会被保存(无论是文本文件中的，警报中的，还是其他的，我只想能够保存结果)。Submit' id="Submit" onclick="myFunction()" value = 'Submit'>
<
浏览 1提问于2018-08-17得票数 2
伙计们，我是django的新手，我想学习如何在2中保持相同的输入字段。在提交表单之后，它将被定向到stud_info.html，其中根据来自main.html上表单的输入值显示结果。我的问题是如何将表单
浏览 3提问于2020-04-04得票数 0
回答已采纳
1回答
在我的Django页面上，我在主工具栏(bootstrap navbar)中有一个高级搜索按钮。单击此按钮将显示带有高级搜索选项的模式窗口。实际上，我不知道如何在填写表单并单击“搜索”后重定向到搜索结果视图。我曾尝试使用JavaScript的window.location.replace，但它导致切换到AnonymousUser，并且我不知道如何将表单数据传递给我的SearchResultView。template_
浏览 0提问于2016-05-03得票数 0
我正在尝试访问单选按钮的值，它已经在表单中从Javascript中预先选择，但面临问题。在表单中，有两组单选按钮，分别保存True和False。下面是一个粗略的图表。O T O F现在，当用户选择第一个单选按钮为false时，第二组单选按钮可见。现在，用户从第二组单选按钮中选择任何值，并导航到第一组单选按钮
浏览 1提问于2015-09-02得票数 0
3回答
我正在编写一个表单，以便在单击"Calculate“按钮时从框中获取数据并进行计算。该按钮通过函数cal()执行计算，但不能在countfield框中显示结果。如何在框中显示结果？<script type="text/javascript">{
var hour = docu
浏览 0提问于2009-11-22得票数 1
回答已采纳
我正在尝试创建一个表单，在保存到我的Django应用程序中的数据库后，将重定向到PayPal。因此，我的html格式的表单如下所示： <form method="POST" name="form_order" id="form_order">
<!button type="submit" name="purhase" id="purhase" onclick=&qu
浏览 15提问于2019-09-17得票数 0
2回答
如何在laravel按钮中从按钮到控制器获取数据属性值？name="submit" id="submit" data-name="{{$value->name}}" data-click="{{$value->click}}">$click=data-click;将
浏览 3提问于2017-07-19得票数 3
回答已采纳
我有一个带有2个文本框和一个submit按钮的jsp页面，在提交时，我根据textbox值得到servlet完成的工作，并以相同的jsp页面以html表格格式显示从db检索的结果。我要做到以下几点：
如何在文本框中保留相同的值？例如，我选择3月3日(txtbox1)到4月4日(txbox2)。提交后返回后，应该在文本框中显示相同的3月3日和4月4日。当我第一次到达该页面时，我希望当前日期显示在这些文本框中
浏览 3提问于2012-03-01得票数 2
Rajesh我成功地使用javascript onclick事件提交了页面，就像你告诉我的那样，但现在由于某些原因，变量无法提交到javascript重定向页面。你能告诉我我哪里做错了吗？doctype html><head><title>Untitled Document</title>
<!form_page" value="Submi
浏览 1提问于2017-03-21得票数 0
我有两个使用Html.TextboxFor()助手的文本框。当我在Textbox1中键入值并单击“外部”(从textbox移出光标)时，TextBox2应该使用TextBox2填充。我知道使用Javascript/Jquery填充值，但我没有选择使用任何客户端脚本。因此，我必须将表单值发布到控制器操作方法&使用模型对象用Textbox1值填充TextBox2值。如何在asp.net mvc2中的textbox焦点事件上发布/
浏览 5提问于2013-11-07得票数 0
回答已采纳
我需要一个搜索框和一个提交按钮，将在多个选项卡中打开我的输入作为来自多个搜索引擎的搜索结果。谢谢。
浏览 0提问于2011-04-22得票数 1
回答已采纳
1回答
我正在使用html (只是使用twitter来播放，而不是使用oauth等，因为我只是想更改一个url查询)。这是当前的“查询”
我希望在html/javascript中有它，所以它是这样的。有人能在这方面给我一点帮助吗?我知道通常如何在visual basic程序上做这件事，但是javascript/html5让我受挫，尽管我知道它可能会很简单。
因此，基
浏览 1提问于2013-06-16得票数 1
我想创建一个在rails中有2个按钮的表单。这两种表单以不同的方式操作相同的数据，我倾向于使用两种不同的方法来保留相关的功能。
浏览 0提问于2009-10-15得票数 1
回答已采纳
我是Sanjeev，我的网页在表单中有一个按钮(不是表单的提交按钮)。单击该按钮后，我必须运行SQL查询，然后根据查询结果设置其他表单域。
我的问题是如何从javascript运行SQL查询。
浏览 2提问于2015-02-24得票数 0
1回答
我已经创建了一个表单，用户可以在其中检查要包含在压缩文件夹中的文件，并在服务器上创建包含这些文件的文件夹。
，我的问题是如何将这个新创建的压缩文件夹移动到客户端?
浏览 3提问于2017-05-08得票数 0
我有一个html表单，并且在表单中有一个<button>元素。我使用jquery在单击按钮时重定向页面(本质上我想嵌套表单元素，但由于它不是有效的xhtml，所以我使用了javascript变通方法)。此外，单击按钮从输入字段获取文本，将其附加到查询字符串，然后重定向页面(请注意，输入字段和按钮都在html表单内)。
浏览 2提问于2009-07-28得票数 1
回答已采纳
1回答
响应菜单不折叠和重新加载页面
、、、、
单击菜单按钮时，它会折叠菜单，但同时会重新加载页面。
谢谢你抽出时间来帮我。-- BEGIN TOP NAVIGATION MENU -->JavaScript * Project: Twitter Bootstrap Hover Dropdown
浏览 2提问于2014-01-05得票数 1
回答已采纳
嘿，伙计们，我需要我的AJAX结果将字段添加到我的表单中，或者添加一个提交按钮来完成表单。
我的AJAX结果显示在一个DIV中，它位于一个标准的HTML表单中(来自PHP文件)。当在表单标记内返回时，AJAX结果(例如，隐藏输入)可以包含在表单POST中吗？我正在使用一个标准的JavaScript (改编自‘生活搜索’)
浏览 1提问于2012-07-10得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
