在html上提交按钮以在同一页面上输出结果
要在HTML中使用提交按钮并在同一页面上输出结果，您可以使用JavaScript和AJAX
- 在HTML文件中创建一个表单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Example</title>
</head>
<body>
<form id="myForm">
<label for="inputData">输入数据：</label>
<input type="text" id="inputData" name="inputData">
<button type="submit">提交</button>
</form>
<div id="output"></div>
<script src="script.js"></script>
</body>
</html>- 接下来，在名为
script.js的JavaScript文件中编写以下代码：
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
var inputData = document.getElementById('inputData').value; // 获取输入数据
document.getElementById('output').innerHTML = '您输入的数据是：' + inputData; // 显示结果
});在这个例子中，当用户点击提交按钮时，表单会触发"submit"事件。通过使用event.preventDefault()阻止默认提交行为，我们可以确保页面不会进行刷新。然后，我们通过获取输入框的值（inputData.value），并将其显示在名为"output"的<div>元素中。
请注意，如果您希望将此结果发送到服务器并返回响应，您可能需要使用AJAX来处理提交。这是一个简单的示例，只关注前端操作。
相关·内容
我正在尝试在Orchard中创建一个CSS文档库。我想保存一个描述，CSS代码段和HTML代码段对每个内容类型。第一个视图将显示描述以及写出的CSS和HTML代码。第二个视图将显示所呈现的CSS和HTML外观的预览。我看过Alias UI，但这迫使我在每次创建内容项时手动创建一个替代URL。
在Orchard中是否可以在不编写过多C#的情况下做到这一点？
浏览 3提问于2014-02-03得票数 0
我正在使用html.ActionLink助手在MVC2.0应用程序中创建我的HTML.在同一页面上有许多ActionLink按钮，例如:取消、提交和刷新。这三个按钮都使用相同的CSS类名称。当单击这些按钮时，我必须调用不同的JQuery函数(以执行不同类型的验证)。我不能控制CSS类。获得结果的最好方法是什么？
浏览 0提问于2010-11-11得票数 0
2回答
基本上，我想要一个html表单，用户在输入文本框中输入他们的ID号，当他们点击submit按钮时，它会显示他们的电子邮件地址，这是他们的公司ID编号@ company.com，如下所示email address" /> </form> <p>Your'idnumber'@email.com</p>
这是否可以使用<
浏览 5提问于2011-03-09得票数 2
1回答
我正在努力使用POST将HTML表单中的值转换到PHP变量中。它以前是有效的，但现在无论我做什么，它都不起作用。下面是php文件： <?>
<head> <link rel="stylesheet" href="Register.css--/ lower-->
浏览 34提问于2021-06-15得票数 0
3回答
禁止PHP在开机自检之前运行
、、、、
我有一个基于post结果更新MySQL数据库的页面。有什么方法可以防止这种情况发生吗？</label>
</div>
看，问题是在填写表单之前
浏览 6提问于2011-03-23得票数 0
回答已采纳
2回答
我正在寻找一种方法来收集网页上的输出(在文本中)后，表单提交。
有没有办法在Javscript中查看表单提交的http响应？否则，我想知道是否有一种很好的方式来解析或收集多个网页(同一页)表单提交的输出。我知道使用Javascript在Firefox中保存带有输出的文件是不可能的(或者说太复杂)。因此，我的一个选择是建立另一个网页，它将接受表单提交，并在不同页<e
浏览 0提问于2011-07-13得票数 0
谷歌表格允许创建问卷，并使它像一个小测验，以获得分数，以纠正答案。我在Google表单中创建了一个测试，但是在提交了所有问题的答案之后，它显示了一个按钮"View score"，点击后它在一个新页面上显示了测试结果。如何使它在同一页上公开测验分数？有猜到吗？
浏览 0提问于2018-12-26得票数 2
2回答
我有一个asp.net登录页面，其中有输入下asp:登录和在同一页面上的输入输出的asp:登录。当我单击asp:Login内部的提交按钮时，jquery验证器可以验证asp:Login内部的输入，即使焦点在asp:Login之外的其他输入中。但是，当我为其他输入单击submit按钮以验证输入时，jquery无法验证输入，但如果焦点放在这些输入上，则jquery可以验证输入。有时点击asp:Login内部的提交
浏览 1提问于2015-06-16得票数 0
4回答
我有一个html文件/页面，其中将有多个输入字段在一个表单。此表单操作字段链接到另一个.php文件，在该文件中，所有输入的数据都写入数据库。但是一旦我点击提交表单，我得到的.php文件不是什么我want.Is有没有任何方法，我可以写入数据库的数据，但保留在同一html文件？
浏览 1提问于2014-02-22得票数 0
1回答
一般的想法是，我们希望开发一组相关的控件作为一个单元(即一组输入和一个提交按钮)，并保持灵活性以决定以后的3个UI选项中的一个。有一组控件，其提交按钮单独存在于网页上，或将控件集与同一页上的其他控件集合在一起，而每组控件都有自己的提交按钮，或在同一页上将控件集与其他控件集合在一起，但整个页面上只有一个提交按钮。
浏览 2提问于2009-12-30得票数 0
回答已采纳
我期待重新设计一个3页的表格在我的网站。
第3页在通过ajax发送表单以在同一页面上显示mysql查询结果之前，最终捕获联系人信息。我想要做的是将整个表单放在一个页<
浏览 4提问于2012-09-11得票数 0
回答已采纳
我有一个用于搜索操作的HTML页面。但是，在搜索结果页面上，由于刷新/重定向到同一页面，用户输入的搜索字段值将被清除。
浏览 0提问于2012-06-28得票数 0
回答已采纳
在我的主页(index.html)的搜索框中，你输入一个查询，然后点击submit，雅虎搜索就会返回同一页上的结果。该提交动作触发主页上的yahoo javascript通过放置在其中加载结果iframe的适当div来返回同一页面上的搜索结果。您需要在Javascript代码片段中将替换为此div id (‘bossDiv现在基本
浏览 13提问于2012-10-10得票数 0
php echo "Data Inserted Successfully <a href='index.html'>Click here>
我已经创建了一个html提交按钮，并与php代码连接，但是，在选择之后，我如何才能返回我的html页面？
浏览 0提问于2018-06-30得票数 0
1回答
我是Django的新手，我有一个简单的提交按钮，可以在复选框中选择多个选项后点击。单击后，结果会显示在不同的页面上。我希望结果显示在同一页面上(比如在submit按钮下面)，或者可能在submit按钮下面的div中。以下代码供您参考： #模板- homepage.html <form method="GET" actio
浏览 32提问于2020-10-03得票数 0
2回答
我有一个HTML应用程序，在单击submit按钮后，我使用AJAX在同一页中显示输出。在提交之前，我可以使用以下命令获取在HTML表单中传递的值单击submit按钮后，如何读取同一个HTML页面的输出。
浏览 1提问于2014-01-24得票数 0
我在页面上有一个按钮。我需要的是一个表单，以弹出在同一页时，该按钮被点击。表单应该包含一些字段(姓名、年龄、道布、邮件)和一个提交按钮。
JavaScript足以做到这一点吗？
浏览 0提问于2015-05-16得票数 0
2回答
我有一个分类广告网站，当用户第一次进入网站时，body onload事件上会提交一个表单：表单将被提交，并在同一页面上的iframe中显示其结果。问题是，我不希望每次用户在浏览器中单击back或forward时都调用submit_form()函数，那么在使用back/forward按钮时，如何防止浏览器提交它呢？示例：
表单在用户进入网站时提交。表单在iframe中显示搜索结
浏览 0提问于2010-11-18得票数 2
回答已采纳
1回答
提交后清除文本字段的最简单方法
、、、、
我已经搜索了所有的地方，试图让我的文本字段清除后提交。请记住，在提交数据时，我希望保持在同一个页面上(我有一个jquery代码，用于在提交后保持在同一个页面上)。下面是我尝试过的.reset()、java onclick、onsubmit、jquery和ajax方法，它们都没有产生我想要的结果。最近我得到的是在提交之前被清除的表单，这留下了一个空
浏览 2提问于2015-02-28得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
