Очистка формы после отправки с использованием jquery

Question

У меня есть рабочая форма бюллетеня (имя, адрес электронной почты) с использованием Node.js и jquery, единственная проблема заключается в том, что форма не очищается после отправки сообщения электронной почты с помощью кнопки «Зарегистрироваться».

Я попытался использовать пустую строку '' после нажатия кнопки мыши, а также метод формы .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

Существует 3 способа сброса или очистки формы с помощью jquery :

reset (), а метод сброса триггера очистит только текстовое поле и текстовую область и т. Д.,

он не снимет значения флажка, выбора или переключателя для очистки всех элементов в форме. Я предпочитаю третий метод для всех элементов.

Но первые 2 метода просты и просты, и если вы не используетевсе типы элементов формы, но с использованием только текстовых полей и текстовых областей, как здесь идет речь, тогда reset() и trigger('reset') сделают это точно так же.

1. Используя сброс триггера

   $('#form_id').trigger("reset");
   

2. Использование reset ()

   $('#form_id')[0].reset();
   

3. Другие Для всех элементов

   $("#form_id").find('input:text, input:password, input:file, select, textarea').val('');
   $("#form_id").find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
   

Answer 2

Вы можете сделать это так.Прямой способ очистки только входных текстовых полей (вы можете изменить этот код, чтобы очистить все входные данные в соответствии с вашими потребностями, для радио, флажков и т. Д.) Внутри формы, используя jQuery.

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

Answer 3

Вы можете использовать для сброса всех значений

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

, а если один, то вы можете использовать

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

Answer 4

Если вы хотите очистить форму при успешном вызове AJAX, используйте $ ('# myForm') [0] .reset (); это внутри вызова ajax или если вы хотите очистить форму вотправка формы затем использовала $ (this) [0] .reset () вне вызова ajax.

$.ajax({
    url: '/',
    type: 'POST',
    context : this, // <-- add this
    data: {
        email: userEmail
    },
    success: function(response) {
        console.log(response);

        $('#myForm')[0].reset(); // used this
    },

});

Answer 5

Для этого можно сделать следующее:

$(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
        },

    });

  });

});