使用jquery提交后清除表单[重复]
Posted
技术标签:
【中文标题】使用jquery提交后清除表单[重复]【英文标题】:Clearing form after submit using jquery [duplicate] 【发布时间】:2019-03-20 11:45:58 【问题描述】:我有一个使用 Node.js 和 jquery 的工作通讯表单(姓名、电子邮件),唯一的问题是使用“注册”按钮提交电子邮件后,表单无法清除。
我尝试在 onclick 之后使用空字符串 '' 以及 .reset() 表单方法。 这两种方法都有效,但是它会清除电子邮件地址并阻止将其发送到 Mailchimp。我已经用少量的电子邮件地址对其进行了测试,但没有任何结果。同样,我的终端消息将 'email_address:' 显示为空字符串。我假设我错误地订购了我的代码?任何方向/反馈表示赞赏。另外,如果我需要添加我的 Node.js 代码,请告诉我。
html:
<form action="/" method="post" id="myForm">
<h2 class="text-center mt-5"> Sign-Up Newsletter</h2>
<p>Using Mailchimp API</p>
<div class="form-group">
<input type="name" class="form-control" id="name" aria-describedby="emailHelp" placeholder="Name" style="width: 400px;">
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Email" style="width: 400px;">
</div>
<p id="demo"></p>
<button type="submit" class="btn btn-info" id="submit" onclick="myFunction()" style="color:#fff; margin-bottom: 70px; width: 190px;">Sign up</button>
</form>
JS
var $ = require('jquery');
$('form').submit(function(event)
var userEmail = $('#email').val();
console.log(userEmail);
event.preventDefault();
$.ajax(
url: '/',
type: 'POST',
data:
email: userEmail
,
success: function(response)
console.log(response);
,
);
);
//Message after newsletter sign-up
function myFunction()
document.getElementById("demo").innerHTML = "Thank You, for signing up! You are now on our mailing list!";
Node.js
const express = require('express');
const app = express();
const bodyParser = require("body-parser");
//middleware
app.use(express.static(__dirname + "/public"));
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded( extended: false ));
// parse application/json
app.use(bodyParser.json());
//connecting cloud i9 host
app.listen(process.env.PORT, process.env.IP, function()
console.log("The Server Has Started!");
);
//route
app.post('/', function(req, res)
addEmailToMailchimp(req.body.email);
res.end('SUCCESS!');
);
function addEmailToMailchimp(email)
var request = require("request");
var options =
method: 'POST',
url: 'XXXXXXXX',
headers:
'postman-token': 'XXXXXX',
'cache-control': 'no-cache',
'content-type': 'application/json',
authorization: 'Basic XXXXX,
body: email_address: email, status: 'subscribed' ,
json: true
;
request(options, function(error, response, body)
if (error) throw new Error(error);
console.log(body);
);
【问题讨论】:
检查这个:Clear form after submission with jQuery 【参考方案1】:您可以执行以下操作来实现此目的:
$(function()
$('form').submit(function(event)
var userEmail = $('#email').val();
console.log(userEmail);
event.preventDefault();
$.ajax(
url: '/',
type: 'POST',
context : this, // <-- add this
data:
email: userEmail
,
success: function(response)
console.log(response);
$(this)[0].reset() // <-- resets the form
,
);
);
);
【讨论】:
谢谢,Dacre。我试过这个。像以前一样向 mailchimp 提交电子邮件,但不清除表单。 @Alexandra 你记得添加context:
行吗?
是的,我在末尾添加了上下文行和输入行。 ?
@Alexandra 这很奇怪 - 更新的答案有帮助吗?
@Alexandra 是的,在我添加 cmets 的地方添加两行 - 这对你有用吗?【参考方案2】:
如果你想在 AJAX 调用成功时清除表单然后在 ajax 调用中使用 $('#myForm')[0].reset(); 这个或者如果你想要清除表单然后在 ajax 调用之外使用 $(this)[0].reset() 提交表单。
$.ajax(
url: '/',
type: 'POST',
context : this, // <-- add this
data:
email: userEmail
,
success: function(response)
console.log(response);
$('#myForm')[0].reset(); // used this
,
);
【讨论】:
【参考方案3】:你可以这样做。使用 jQuery 在表单中清除仅输入文本框(您可以更改此代码以根据您的需要清除所有输入,例如 Radio、Checkboxes 等)的直接方法。
$('#myForm').find("input[type=text]").val("");
【讨论】:
【参考方案4】:有 3 种使用 jquery 重置或清除表单的方法:
reset() 和 trigger reset 方法只会清除 textfield 和 textarea 等,
它不会清除复选框、选择或单选按钮值以清除表单中的所有元素,我更喜欢第三种方法用于所有元素。
但是前两种方法简单易行,如果您没有使用所有类型的表单元素,而是仅使用此处所讨论的文本字段和文本区域,那么reset()
和trigger('reset')
将完全一样。
使用触发器重置
$('#form_id').trigger("reset");
使用 reset()
$('#form_id')[0].reset();
其他适用于所有元素
$("#form_id").find('input:text, input:password, input:file, select, textarea').val('');
$("#form_id").find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
【讨论】:
以上是关于使用jquery提交后清除表单[重复]的主要内容,如果未能解决你的问题,请参考以下文章