Как отправить форму и оставить данные в поле ввода?Использование AJAX и nodejs

Question

Я пытаюсь создать страницу настроек пользователя, где пользователь вводит свою информацию, нажимает «сохранить», затем страница сохраняет данные без очистки введенных полей или перезагрузки страницы.Лучший пример, который я могу вспомнить, это страница настроек учетной записи пользователя в Udemy.

Множество похожих вопросов, на которые я смотрел, используют php или отображают данные в div ниже form.Я хочу, чтобы данные оставались в form inputs.Я использую nodejs, express, bodyparser.

<form id="updateAccSettings" action="/account" method="POST">       
    <div class="form-group">
         <label for="address">Address* </label>
         <input class="form-control" type="text" name="address" placeholder="Address" required/>
    </div> 

    <div class="form-group">
         <label for="address2">Address 2 </label>
         <input class="form-control" type="text" name="address2" placeholder=""/>
    </div> 

    <div class="form-group">
         <label for="city">City* </label>
         <input class="form-control" type="text" name="city" placeholder="City" />
    </div> 

    <div class="form-group">
         <input type="submit" name="save" class="btn btn-lg btn-primary btn-block" value="Save"/>
    </div>
</form> 

Я пробовал это с AJAX

$(document).ready(function() {
    $("#updateAccSettings").on("submit", function(e){
        e.preventDefault();
        var details = $("#updateAccSettings").serialize();
        $.post("/account", details, function(data){
            $("#updateAccSettings").html(data);
        });
    });
});

и этим

$(document).ready(function () {
    $("#updateAccSettings").bind("submit", function(e){
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "/account",
            data: $("#updateAccSettings").serialize(),
            success: function(){
                alert("You've successfully updated your account settings.")
            }
        });
    });
});

И у меня есть это для моего app.js

app.post("/account", function(req, res) {
    var address = req.body.address;
    var address2 = req.body.address2;
    var city = req.body.city;
    var updateAccount = {address: address, address2: address2, city: city};
    account.push(updateAccount);
    console.log("Updated data");
    res.redirect("/settings/account");
});

Когда я нажимаю save, я получаю Cannot read property of 'push' undefined.Я попытался удалить var address, var address2 и т. Д. И сохранить только console.log, который регистрирует всякий раз, когда я нажимаю сохранить, но не сохраняет данные во входных данных.Я попытался добавить onsubmit="return false" в качестве атрибута к тегу form, но console.log не запускается, когда я нажимаю сохранить, поэтому я предполагаю, что он ничего не делает с данными.

Не уверен, что делать дальше.Все мои другие формы используют модалы или отображают результаты на другой странице.

Answer 1

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

app.post("/account", function(req, res) {
    var account = [];
    var address = req.body.address;
    var address2 = req.body.address2;
    var city = req.body.city;
    var updateAccount = { address, address2, city };
    account.push(updateAccount); // error is being thrown here
    console.log("Updated data");
    res.json(updateAccount);
});

Frontend:

 $(document).ready(function () {
    $("#updateAccSettings").bind("submit", function(e){
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "/account",
            data: $("#updateAccSettings").serialize(),
            success: function(data){
                $('#address').value(data.address);
                $('#address2').value(data.address2); 
                $('#city').value(data.city);
            }
        });
    });
});

Answer 2

Вы можете присвоить каждому из ваших полей ввода формы идентификатор (например, такой же, как их свойство "name") и получить их значения индивидуально при выполнении запроса ajax следующим образом (таким образом вы можете повторно вставить значения после отправки формы):

HTML

  <form id="updateAccSettings" action="" method="POST">       
        <div class="form-group">
             <label for="address">Address* </label>
             <input class="form-control" type="text" name="address" id="address" placeholder="Address" required/>
        </div> 

        <div class="form-group">
             <label for="address2">Address 2 </label>
             <input class="form-control" type="text" name="address2" id="address2" placeholder=""/>
        </div> 

        <div class="form-group">
             <label for="city">City* </label>
             <input class="form-control" type="text" name="city" id="city" placeholder="City" />
        </div> 

        <div class="form-group">
             <input type="submit" name="save" class="btn btn-lg btn-primary btn-block" value="Save"/>
        </div>
    </form> 

JQuery

$(document).ready(function() {
    $("#updateAccSettings").on("submit", function(e){
        e.preventDefault();
        //get the values of our input fields and store them in local variables
        var address = $("#address").val();
        var address2 = $("#address2").val();
        var city = $("#city").val();

        //prepare the data object to send in the ajax request
        var params = {"address": address, "address2": address2, "city" : city};
        $.ajax({
            type: "POST",
            url: "/account",
            data: JSON.stringify(params),
            dataType: "json",
            success: function(data){
                //the ajax request was successful
                //We can do something with the data we get back here.
                //Also we can reinsert the values (that were submitted) to the form
                $("#address").val(address);
                $("#address2").val(address2);
                $("#city").val(city);     
            },
            error: function(xhr, status, error) {
                //an error occured in the request so handle it here
            }

        });
    });
});

Answer 3

Вы получаете ошибку, потому что вы пытаетесь нажать на неопределенную переменную.А именно в последнем разделе, когда выкладывали это приложение. Post:

app.post("/account", function(req, res) {
    var address = req.body.address;
    var address2 = req.body.address2;
    var city = req.body.city;
    var updateAccount = {address: address, address2: address2, city: city};
    account.push(updateAccount); // error is being thrown here
    console.log("Updated data");
    res.redirect("/settings/account");
});