如何做弹出式输入表单，保存后不会重置页面？
在前端开发中，可以使用JavaScript和HTML来实现弹出式输入表单并保存后不重置页面的功能。以下是一个实现此功能的简单示例：
- 创建HTML页面：
<!DOCTYPE html>
<html>
<head>
<title>弹出式输入表单示例</title>
</head>
<body>
<button onclick="showForm()">打开表单</button>
<div id="formContainer" style="display: none;">
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required><br><br>
<button type="button" onclick="saveFormData()">保存</button>
</form>
</div>
<script src="main.js"></script>
</body>
</html>- 创建JavaScript文件（main.js）：
function showForm() {
document.getElementById("formContainer").style.display = "block";
}
function saveFormData() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
// 可以将表单数据保存到后端服务器或本地存储（如localStorage）中
// 保存成功后隐藏表单
document.getElementById("formContainer").style.display = "none";
// 可以根据需要进行其他操作，如显示保存成功的提示信息等
}在上述示例中，点击页面上的按钮会调用showForm()函数，将表单显示出来。填写完表单后，点击保存按钮会调用saveFormData()函数，获取表单数据并进行保存操作。保存成功后，将表单隐藏起来，用户可以继续浏览页面而不会重置。
这只是一个简单示例，实际项目中可以根据需求进行更复杂的处理和验证。在实际开发中，可以使用各类前端框架（如React、Vue.js等）来简化开发，并使用后端技术（如Node.js、Java、Python等）来处理表单数据的保存和持久化。
腾讯云相关产品和产品介绍链接地址：
- 云开发：https://cloud.tencent.com/product/tcb
- 云服务器 CVM：https://cloud.tencent.com/product/cvm
- 云函数 SCF：https://cloud.tencent.com/product/scf
- 云存储 COS：https://cloud.tencent.com/product/cos
- 腾讯云数据库：https://cloud.tencent.com/product/cdb
相关·内容
我有一个功能，将点击按钮，然后输入表单将弹出，卡将显示。但在点击按钮后，卡片将与弹出的表单一起，然后当我保存表单时，卡片将被移除。 在我点击按钮之前： ? 在我点击按钮后： ? 当我点击保存按钮： ? "submit" name="Save" value="submit" class="sub">
</form>
浏览 42提问于2021-02-03得票数 1
2回答
问题是，无论何时需要，我都会使用jQuery("form")[0].reset();来重置表单。这种方法是重置形式到它的初始阶段。在这里，初始阶段意味着“表单第一次以某些值加载到页面的阶段”。，但我需要的是将表单重置为最后保存的阶段.
我正在做的事情：通过jQuery.ajax({----});保存表单数据，无需任何页面刷新。什么是目标:在用ajax请求保存<e
浏览 4提问于2015-11-12得票数 3
回答已采纳
3回答
我有一个通过jquery提交的表单。当表单通过ajax提交时，如何设置新的重置状态？
例如，表单中有一个输入，页面加载时默认值为"foo“。用户将值更改为"bar"，点击保存(jquery通过ajax向服务器发送表单数据)。现在，如果用户做了额外的更改，用户点击表单重置按钮，我希望它重置为"bar“而不是"foo”。想要捕获整个表单
浏览 5提问于2014-12-10得票数 0
回答已采纳
5回答
我正在尝试重置输入的实际值属性，以便在重置时可以将其重置回该值，而不一定是加载表单时的原始值。问题是这些改变似乎不会生效。$(this).val($(this).val());
这两种方法都不会实际更改输入的value=""属性，该属性是重置表单时使用的属性。问题是，如果有人保存一个表单(通过AJAX)，然后再次编辑它并按reset (这次不保存</em
浏览 0提问于2009-10-28得票数 7
回答已采纳
1回答
在我的一个网站上的数据输入表单是这样的，用户可以在上面停留相当长的一段时间来输入记录。然而，页面在大约25分钟后超时，即使用户一直在不断输入记录(每个记录大约需要3-5分钟)。它总是在用户保存记录并刷新页面后立即超时。我的代码检测到会话变量未设置，并将用户返回到登录表单。
数据输入页面以session_start()开头，我认为它会重置会话超时计时器。如何强制会话
浏览 2提问于2017-07-20得票数 1
1回答
react中的输入重置
、、、
我说的是表单中的两个输入，提交表单后，我的字段不会重置。如何做到这些。我附上了我的表单组件代码，谁能帮我解决这个问题。
浏览 12提问于2018-09-04得票数 1
回答已采纳
我们有一个网站，使用jQuery来显示一个模式弹出窗口。当用户单击我们的一个按钮时，我们正在加载/绑定模式弹出窗口到DIV，然后显示一个DIV，其中包含覆盖图顶部的实际弹出窗口。那么，当它弹出时，我如何在模式中获得焦点，以便屏幕阅读器停止它正在做的事情，并开始在模式中阅读。 autoOpen: true,
position: { my: "center", at: "center", of: window
浏览 0提问于2014-07-23得票数 0
1回答
我有一个弹出式div包含一个表单，当关闭时，我希望该表单重置错误和表单内的字段。我计划在disablePopup函数中重置表单。其他需要注意的事情是，这是一个django项目，我正在使用ajax提交表单。contact_selector.fadeOut("fast"); }因此，基本上我想扩展这段代码，允许我在contact_selector中重置<e
浏览 3提问于2012-05-09得票数 0
回答已采纳
我有一个弹出式颜色框上的表单，如果用户编辑其中一个文本框，然后点击取消，我想要一个弹出式窗口，显示类似“你确定要离开而不保存吗？”。目前我有弹出窗口显示，但它是在弹出窗口颜色框已经关闭后显示的 $('a.openDialog').colorbox({ width: "75%", h
浏览 6提问于2013-02-12得票数 2
回答已采纳
1回答
因此，我正在运行一个数据收集项目，通过一个chrome扩展将html表单注入第三方网站，它指示用户描述他们看到的数据并将其提交给我的服务器。但是，由于一些奇怪的原因，每当用户单击"submit“按钮将表单内容发送到后台页面(以及从那里发送到服务器)时，底层页面就会重新加载，不仅如此，它还会重新加载我在重新加载后显示在url中的表单的内容。"#codingsubmit" ).click(sendValues);appendCodingInfo()
当用户
浏览 0提问于2016-08-12得票数 0
回答已采纳
在用户单击密码重置url并输入他或她的新密码后，表单发布后不会发生任何事情。该页面只是加载，从不重定向用户。页面只是永久加载，而不需要重定向用户，所以您必须手动刷新页面或访问/account页面，因为密码重置确实有效，但它从未重定向用户。
浏览 2提问于2019-11-26得票数 0
我有一个带有“假”注册表格的页面(这是一个标准表单，它不会将任何数据保存到用户数据库或其他东西中)，我还有一个带有“限制区域”的页面(唯一的障碍是JavaScript弹出)，只有当用户提交了该表单时才能访问该页面我必须使用cookie来做这件事，这是我的目标：
如果用户在没有填写任何表单的情况下进入限制区域，它必须显示一个弹出式显示，上面写着“您没有注册”之类的内容，一旦用户填写了表单，用户返回到该页面</e
浏览 4提问于2015-03-10得票数 0
回答已采纳
我一直通过剪切粘贴到一个文本文件中来做到这一点，但我想用一个可以用javascript更新的本地HTML页面来代替它。" id="p1" value="8" onChange="update(1,this.value)" /> </dd></form>当我在文本字段中输入一个新值并通过Firebug跟踪它时，它似乎工作得很好，即链接hre
浏览 0提问于2011-05-01得票数 1
回答已采纳
我的表单验证运行良好，响应消息显示表单验证为真/假，这是没有问题的，但我想在JavaScript中添加一个条件来检查是否为真，然后表单输入将被禁用，直到响应真消息在几秒钟后被重置。下面是我的PHP代码，在验证后发送响应为true：这是我的表单代码示例：
<form action="" method请阅读下面的更
浏览 2提问于2018-01-23得票数 0
我正在构建一个用于工作的数据库，并在Form_Close()事件上有一个MsgBox提示符，提醒用户表单中的数据将丢失，然后在单击OK后运行DoCmd.RunCommand acUndo。我遇到的问题是表单中的一些字段具有Field.Visible = False属性，这取决于其他字段中的输入。保存记录时，除非关闭并重新打开表单，否则表单不会将Field.Visible = False重置为= True，我已将其写入SaveButto
浏览 0提问于2018-03-03得票数 0
在任何rails表单中，当我们上传一个文件时，当我们留下任何必填字段时，文件名就会被删除。
另外，一旦我们保存了一个文件，再次尝试编辑文件时，文件名不会显示在编辑表单中。请告诉我这个问题的解决方案。实际上，我们不想在重新加载页面后重置文件字段。
浏览 0提问于2011-10-31得票数 0
1回答
在成功提交后，我正在尝试清空输入字段。phoneError}</span></form>
问题：如何在提交后重新设置输入字段
浏览 3提问于2022-02-10得票数 0
我有一个表单，其中有一个重置按钮和三个列表框(选择框)和提交按钮。其中我有重置按钮喜欢。<s:reset name="reset" type="reset" id="reset" ></s:reset>当我在提交页面之前点击这个。它将重置列表框，这意味着它将选择默认值' select‘Index = -1表示工作正常。但在我提交页面后。这将转到与最新记录相同的
浏览 0提问于2011-07-28得票数 0
4回答
在我单击表单上的提交之前，下面的代码可以正常工作。因此，如果我在提交前填写字段，并单击重置，它的效果很好。class="advanced-reset-btn" id="advancedResetButton" name="advancedResetButton" value="Reset" />
但提交后，它没有重置字段，因为它应该在onclick提交后如何清除表单的任何建议？
浏览 1提问于2013-03-18得票数 0
1回答
我在用户注册表单上有一个启动控制器(带有请求方法get)，它将用户类加载到该表单中，还有一个post方法来保存用户。一切都用春天。但是现在我想将注册表单移动到头文件中的弹出式中，每个页面都会导入它。又是如何做到的？
浏览 1提问于2014-02-10得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
