Question

我有一个使用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);
    });
}

Answer 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
        },

    });

  });

});

Answer 2

您可以使用重置所有值

$( '#myForm' ).each(function(){
    this.reset();
});

如果可以的话，您可以使用

$("#myForm")[0].reset()

Answer 3

如果您想在成功进行AJAX调用时清除表单，则在Ajax调用中使用 $（'＃myForm'）[0] .reset（）; 即可，或者您希望在AJAX调用中清除表单然后在ajax调用之外使用 $（this）[0] .reset（）提交表单。

const MongoClient = require('mongodb').MongoClient;
const dbURI =
  "mongodb+srv://<User name>:<Password>@cluster0-duxly.mongodb.net/test?retryWrites=true";
    
  MongoClient.connect(dbURI, function(err, client) {
    if(err) {
         console.log('Error occurred while connecting to MongoDB Atlas...\n',err);
    }
    
    console.log('Connected...');
    const collection = client.db("test").collection("devices");
    // perform actions on the collection object
    client.close();
 });


// require any models

require("../model/task");

Answer 4

您可以这样做。

使用jQuery在表单中清除仅输入文本框的直接方法（您可以更改此代码以根据需要清除所有输入，例如Radio，Checkboxes等）。

$('#myForm').find("input[type=text]").val("");

Answer 5

有 3种使用jquery重置或清除表单的方法：

reset（）和触发器重置方法将仅清除文本字段和文本区域等，

它不会清除复选框，选择或单选按钮值以清除所有元素的形式，我更喜欢使用第三种方法。

但是前两种方法既简单又容易，如果您不使用所有形式的表单元素，而是仅使用文本字段和文本区域，那么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提交后清除表格

5 个答案: