使用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提交后清除表单[重复]的主要内容,如果未能解决你的问题,请参考以下文章

提交后重置表单[重复]

使用ajax提交后如何清除ckeditor表单?

Web表单提交文本字段不明确[重复]

提交后清除画布[重复]

jQuery不会清除表单[重复]

是否有“提交后”的 jQuery 选项?