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