如何在表单提交后重置表单域并显示成功或感谢？
在表单提交后重置表单域并显示成功或感谢信息，可以通过以下步骤实现：
- HTML表单：首先，创建一个HTML表单，包含需要提交的各个表单域，例如输入框、下拉菜单、复选框等。确保每个表单域都有一个唯一的ID或名称，以便后续的处理。
- JavaScript处理：使用JavaScript来处理表单的提交事件。可以通过给表单元素添加一个事件监听器来捕获提交事件。在事件处理函数中，执行以下操作：
- a. 阻止表单的默认提交行为，以便后续的处理。
- b. 获取表单中各个表单域的值，可以使用
document.getElementById或document.querySelector等方法来获取表单元素。 - c. 执行表单提交的相关逻辑，例如发送请求到服务器进行数据处理、验证用户输入等。
- d. 如果表单提交成功，可以通过修改DOM来显示成功或感谢信息。可以创建一个新的元素，例如
<div>或<p>，并将成功或感谢信息作为其内容，然后将该元素插入到页面中适当的位置。 - e. 最后，重置表单域的值，可以使用
form.reset()方法来重置整个表单，或者逐个设置表单域的值为空。 - CSS样式：根据需要，可以使用CSS样式来美化成功或感谢信息的显示效果，例如设置字体、颜色、背景等。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.success-message {
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<form id="myForm">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required><br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required><br>
<input type="submit" value="提交">
</form>
<div id="message"></div>
<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止默认提交行为
// 获取表单域的值
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
// 执行表单提交的相关逻辑，例如发送请求到服务器进行数据处理、验证用户输入等
// 显示成功或感谢信息
var messageElement = document.getElementById("message");
messageElement.innerHTML = "提交成功！感谢您的反馈。";
messageElement.className = "success-message";
// 重置表单域的值
document.getElementById("myForm").reset();
});
</script>
</body>
</html>在上述示例中，当用户点击提交按钮时，JavaScript代码会捕获提交事件并执行相应的处理逻辑。在处理逻辑中，成功或感谢信息会被插入到ID为"message"的元素中，并通过CSS样式进行美化。最后，表单域的值会被重置为空，以便用户可以继续填写新的内容。
请注意，上述示例中没有提及具体的腾讯云产品和链接地址，因为根据提供的问题描述，不要求提及特定的云计算品牌商。
相关·内容
2回答
检查HTML5联系人表单中的空字段
javascript、jquery、ajax、html
我编写了一个HTML5联系人表单，它是使用ajax提交的。当其中一个字段为空时，我想显示一条消息。在我的代码中，if语句显示消息，但它消失了。怎样才能触发段落，使其在再次提交表单之前保持不变？
谢谢你所有的高级职员
$(document).ready(function(){
$('#myForm').submit(function(e){
var name = document.getElementById("name");
var email = document.getElementById("email
浏览 0提问于2014-09-03得票数 1
回答已采纳
4回答
在jQuery中使用链接提交表单不起作用
jquery、ajax、forms、post
我有一个小表格和一个使用jQuery和POST提交此表格的链接。我希望在表单页面上显示流程页面的HTML输出，而不使用AJAX刷新。但是，当我单击提交链接时，我的代码似乎无法工作。有人能指出我在这里可能做错了什么吗？非常感谢。
问候
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
$(doc
浏览 2提问于2012-01-11得票数 2
7回答
使用jQuery提交后清除表单
javascript、forms、jquery
刷新后清除此表单的最简单方法是什么？我尝试的方法将清除表单，但不会提交到数据库。有人能给我解释一下做这件事的最好方法吗？
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquer
浏览 2提问于2012-01-02得票数 30
回答已采纳
1回答
表单输入值为空字符串
javascript、html、forms、input
我的问题是提交表单后输入值为空。我没有错误，也不知道哪里出了问题。 谢谢! const myForm = document.getElementById("myForm");
const myName = document.getElementById("myName").value;
const myEmail = document.getElementById("email").value;
const myMessage = document.getElementById("message").value;
myForm
浏览 13提问于2020-08-18得票数 1
回答已采纳
3回答
在提交后重置表格
php、ajax、forms
我有一个表单，如果电子邮件错误给我一个错误消息，而我停留在同一个页面上，这是可能的，因为我使用了ajax。现在，我试图在提交表单时实现，而返回是表单重置的错误。
我试过reset();，但没成功。
<?php
header("Refresh:7; url=contact.php");
$email = $_POST['subscribefield'];
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "Dit emailadres klopt n
浏览 3提问于2016-06-28得票数 0
回答已采纳
2回答
为什么我的jQuery表单不能重新提交？
php、javascript、jquery
所以我已经这样做了几次，它起作用了，但是由于某种原因，我的表单这次不起作用了。当我提交表单时，jQuery使用mail.php进行最后一次验证。然后，它要么提交它，要么返回带有错误的表单。
所以基本上，当我提交有错误的表单时，它会返回相应的错误，但当我更正值并尝试重新提交时，它不会重新提交。
代码如下：
<html>
<head>
<title>Contact Form Example</title>
<script type="text/javascript" src="js/jquery.js&#
浏览 1提问于2011-08-22得票数 1
回答已采纳
1回答
用于停止WordPress注册表提交(电子邮件验证)的Javascript
javascript、wordpress、validation、email、registration
我已经成功地将mailrefine.io应用程序接口集成到我的WordPress注册表中，用于电子邮件验证。现在，当用户填写表单并单击submit时，将弹出一条消息，并根据API连接的电子邮件验证结果显示“电子邮件有效”或“电子邮件无效”。
问题是，只要邮件出现在电子邮件输入字段下面，表单就会提交并将用户重定向到另一个页面，而不管验证结果如何。
我已经写了下面的javascript，而不是首先检查电子邮件验证结果，如果无效，则停止提交，以便用户可以输入有效的电子邮件地址。
<script>
document.getElementById('wp-submit')
浏览 10提问于2021-11-29得票数 0
5回答
提交后在反应中清关表格
reactjs、forms、state
一旦使用Axios创建表单提交，我将试图清除表单数据。消息通过良好，响应被记录到页面，但是每个文本字段中的数据在提交后保留在页面上。
我尝试添加一个resetForm函数，将表单设置为原始的空白状态，但这是行不通的。
import React, { Component } from 'react';
import { Grid, Cell, Textfield, Button } from 'react-mdl';
import './Contact.css';
import axios from "axios";
class
浏览 0提问于2019-01-18得票数 3
回答已采纳
2回答
来自XMLHttpRequest请求的结果消失
javascript、ajax、xmlhttprequest、forms
问题：
当我单击HTML表单中的submit按钮时，它会用Ajax请求调用一个JavaScript函数。-成功返回，但结果几乎立即消失。
我只是想知道这里是否遗漏了什么(除了jquery之外，我知道这是一种更容易的方法，但xmlhttprequest是当前的需求)。
我在下面粘贴了我的代码--也许我错过了一个小错误(希望如此)--我已经有一段时间没有专注于Ajax了。
HTML代码：
<body>
<form>
<label>Name:</label>
<input type="text"
浏览 2提问于2017-03-20得票数 0
回答已采纳
5回答
如何使用php表单的重置按钮？
php、forms、reset
我有一个用PHP处理的表单。在用户提交它之前，Reset按钮起作用。但是，当它们提交并重新加载页面时(我根据$_POST值使表单域变得粘滞)，重置就不起作用了。我怎么才能修复它呢？编辑:例如，表单上的复选框：
<input type="checkbox" <?php if (isset($_POST['cb12'])){echo 'checked="checked"';} ?> name="cb12" tabindex="34" id=cb value="Educati
浏览 0提问于2009-04-02得票数 0
回答已采纳
1回答
JQueryValidate & JqueryMobile验证错误出现在打开的弹出窗口中
jquery、jquery-mobile、jquery-validate
我有个奇怪的问题。我正在使用JqueryMobile 1.4和JqueryValidate 创建一个小型for应用程序来进行表单验证。我打开了一个弹出窗口，用户可以输入一些数据，并在提交时使用$.post将数据发布到DB。这里是jquery
//Matches UK landline + mobile, accepting only 01-3 for landline or 07 for mobile to exclude many premium numbers
jQuery.validator.addMethod('phonesUK', function(phone
浏览 1提问于2014-03-26得票数 1
回答已采纳
4回答
我的JavaScript代码不能在本地运行，但在jsfiddle上运行良好，为什么？
javascript、html、javascript-events
我创建了一些javascript代码，用于将表单提交到标记之外。代码如下：
<script type="text/javascript">
var myForm = document.forms['myForm'];
var formSubmit = document.getElementById('formSubmit');
formSubmit.onclick = function(){
myForm.submit();
}
</script>
<form name="myForm" ac
浏览 2提问于2012-12-04得票数 0
回答已采纳
1回答
如何完成Javascript验证表单
javascript、jquery、html、forms
我需要创建一个与密码匹配的验证表单，没有空字段，只有字母/数字在正确的字段，日期(从现在和之前)，年龄只有数字和适当格式的电子邮件。我设法做了电子邮件的事情，但有人能帮我完成javascript代码吗？
body {
line-height: 30px;
}
.error {
color: red;
font-size: 0.8em;
font-style: italic;
}
#erroremail {
visibility: hidden;
}
#errorfname {
visibility: hidden;
}
$(document).r
浏览 1提问于2015-06-20得票数 0
1回答
JS函数似乎不是由HTML表单执行，不确定原因
javascript、html
我现在已经有一段时间没有使用JS或HTML了，需要创建一个用于向数据库提交数据的提升页面。这段代码只是用于验证表单(客户端)。看起来JS函数没有被执行，我知道我忘记了什么，但是我想不出是什么，有人有什么想法吗？
<html>
<head>
<script type="text/javascript">
function validateSignup() {
var redFeild = "";
var greenField = "";
浏览 2提问于2016-12-03得票数 0
2回答
如何更好地编写和样式HTML？
html、css
有什么合理的策略来解决这个问题，满足初学者的理解水平？
到目前为止，我尝试编写一个简单的表单: 1)编写完整的html样式，2)修改html，以适应我试图应用的样式方法
它不起作用，因为我对如何构造html层次结构感到困惑，以适应我在纸上拥有的设计参数。
我在这里：
<div class="baby-form">
<h2>Class Signup</h2>
<form action="#" method="post">
<ul>
<li>
<in
浏览 2提问于2020-06-18得票数 1
回答已采纳
2回答
使用javascript或jquery上传html格式的默认图像
javascript、html、jquery
考虑具有不同输入字段的html表单，其中一个字段的类型为= file，并且用户必须向其上传图像，并且如果用户没有上传图像并单击提交，则我喜欢使用我自己的默认图像来更新它，然后提交表单。 有谁知道如何实现它吗？ 先谢谢你... 我当前的代码如下所示 if(document.getElementById("image") === "") {
document.image.value="image.jpg";
} form {
display: block;
position: relative;
}
input {
po
浏览 15提问于2020-10-24得票数 0
4回答
不使用<form>标记的‘`Required`’属性
javascript、html、css、ajax、required
我的required属性没有指定在提交表单之前必须填写输入字段。
HTML：
<!-- Modal Content -->
<form class="modal-content2">
<div class="container3">
<h1>Sign Up</h1>
<p>Please fill in this form to create an accou
浏览 3提问于2020-02-04得票数 1
回答已采纳
2回答
使用PHP和Jquery在包含多个表单的页面上定位特定表单
jquery、forms
我正在尝试用jquery在一个有多个表单的php页面上定位一个特定的表单元素。表单是动态生成的，并包含在while循环中。表单是位于每个页面包含三个帖子的单个帖子下的评论表单。
因为表单和表单字段是动态生成的，所以我需要使用类名，而不是id。然而，为了区分每个表单，我可以将id附加到每个表单以区分它们，但id将是一个基于post id的整数。下面是我的表单结构：
<div class="cform" id="'.$id.'">
<form action="" method=""
浏览 2提问于2010-11-14得票数 1
1回答
表单提交Ajax - vanilla js - JSON字符串而不是元素消息
javascript、ajax
提交表单后，我希望通过删除元素id (id值显示:none)来显示成功或错误消息。元素包含消息文本。
我可以用这个脚本提交表单，但是用JSON字符串打开新页面，而不是向我展示元素。
在脚本中应该更正什么？香草Javascript
<script type="text/javascript">
var form = document.getElementById("leadcontact");
var sent = document.getElementById('sent');
var
浏览 7提问于2022-09-26得票数 1
1回答
使用vanilla js进行表单验证
javascript、html、bootstrap-4
我正在使用HTML、Bootstrap和JavaScript构建我的第一个联系人表单：
，我目前正在尝试验证我的表单中的输入。
我已经成功地停止了表单提交，如果缺少任何输入，但是一旦输入所有输入，我就无法提交表单。
请用香草js为我提供解决方案。
document.getElementById("myForm").addEventListener("submit", function(evt) {
evt.preventDefault();
var error = "";
if (document.getElementById(&
浏览 0提问于2021-04-24得票数 1
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
腾讯云开发者
