Невозможно изменить значение элементов HTML из Node.js - PullRequest
Новая
       16

Невозможно изменить значение элементов HTML из Node.js

0 голосов
/ 20 июня 2019

У меня есть HTML-форма, которую должен заполнить пользователь. После заполнения формы введенные данные проверяются, чтобы увидеть, было ли введенное имя пользователя введено ранее или нет. Если имя пользователя уникально, то входные данные действительны. Если имя пользователя уже было использовано кем-то другим, я хочу перезагрузить страницу регистрации, которая называется signUp.html, но я также хочу изменить значения и заполнители этих полей, содержащихся в этой HTML-форме. За исключением полей Username и Password, я хочу, чтобы каждое другое поле содержало данные, которые были введены пользователем ранее. Например, если поле First Name содержит значение Toma, то после перезагрузки страницы я хочу, чтобы поле First Name имело значение Toma. С другой стороны, я хочу изменить сообщение заполнителя поля Username, которое будет выглядеть примерно так: Sorry, this username is invalid.... Я попытался использовать пакет jsdom, чтобы получить доступ к HTML-файлу: signUp.html, который находится в public/views. Код HTML-формы: 

    <form method="POST" action="signUp" style="margin-left: 5%; margin-right: 5%; margin-top: 5%" class="was-validated">
        <div class="form-group">
            <label style="color: #ffffff"> First Name </label>
            <input type="text" name="firstName" class="form-control"  placeholder="e.g.: Toma" required>
        </div>

        <div class="form-group">
            <label style="color: #ffffff"> Second Name </label>
            <input type="text" name="secondName" class="form-control" placeholder="e.g.: Alex" required>
        </div>

        <div class="form-group">
            <label style="color: #ffffff"> Email </label>
            <input type="email" name="email" class="form-control" placeholder="e.g.: somename@somedomain.com" required>
        </div>


        <div class="form-group">
            <label style="color: #ffffff"> Username </label>
            <input type="text" name="username" class="form-control" placeholder="e.g.: miauMiau23 (this is the name your friends will identify you with)" required>
        </div>

        <div class="form-group">
            <label style="color: #ffffff"> Password </label>
            <input type="password" name="password" class="form-control" placeholder="please, use a solid password, having a minimum of 6 characters, small and capital letters, as well as numbers and symbols!" required>
        </div>

        <button type="submit" class="btn btn-primary" style="width: 100%"> Submit </button>
    </form>

Код, найденный в server.js, который пытался достичь того, что я описал ранее: 

    app.post('/signUp', urlencodedParser, function(req, res){
        console.log("sorry... this username is invalid!");
        res.render('signUp');
        var { document } = (new JSDOM('public/views/signUp.html')).window;
        var firstNameField = document.getElementsByName('firstName');
        var secondNameField = document.getElementsByName('secondName');
        var emailField = document.getElementsByName('email');
        var usernameField = document.getElementsByName('username');
        var passwordField = document.getElementsByName('password');
        console.log(firstNameField.placeholder);
        firstNameField.value = req.body.firstName;
        secondNameField.value = req.body.secondName;
        emailField.value = req.body.email;
        usernameField.value = "";
        usernameField.placeholder = "'" + req.body.username + "' is an invalid username...";
        passwordField.value = "";
    }

После перезагрузки страница теряет все введенные данные.

1 Ответ

1 голос
/ 20 июня 2019

Причина не работает в том, что res.render отобразит страницу на сервере и затем отправит ее клиенту.После этого вы просто снова загружаете HTML-код в память сервера с помощью JSDOM и модифицируете его в конце только что отброшенного запроса, который не влияет на то, что уже было отправлено клиенту * 1002.*.

Правильный способ сделать это - использовать язык шаблонов (есть из чего выбирать) с вашим сервером express.js для динамического рендеринга страницы и введения нужных значений в нужное место.,Затем вы можете просто передать переменные в res.render, которые будут доступны при рендеринге вашего шаблона: 

app.post('/signUp', urlencodedParser, function(req, res) {
    console.log("sorry... this username is invalid!");
    res.render('signUp', {
        firstName: req.body.firstName,
        secondName: req.body.secondName,
        email: req.body.email,
        error: "'" + req.body.username + "' is an invalid username...",
    });
});

Например, если вы использовали Pug.js в качестве движка шаблонов, то вашСтраница регистрации может выглядеть примерно так (я не включил все форматирование, которое должно идти в CSS): 

form(method='POST' action='/signUp')
    div.form-group
        label(for='firstName') First Name
        input#firstName.form-control(type='text', name='firstName', value=firstName, required)
    div.form-group
        label(for='secondName') Second Name
        input#secondName.form-control(type='text', name='secondName', value=secondName, required)
    div.form-group
        label(for='email') Email:
        input#email.form-control(type='email', name='email', value=email, required)
    div.form-group
        label(for='username') Username
        if error:
            input#username.form-control(type='text', name='username', placeholder=error)
        else:
            input#username.form-control(type='text', name='username', placeholder='e.g.: miauMiau23 (this is the name your friends will identify you with')
    div.form-group
        label(for='password') Password:
        input#passwordw.form-control(type='password' name='password')
    button.btn.btn-primary(type='submit') Submit
...