Jquery: Невозможно установить значение ввода в таблицу td

Question

У меня многоступенчатая форма. перед тем, как пользователь отправит форму, я хочу показать ему данные, которые он ввел в таблицу с JQuery. но я не могу установить значения ввода в таблицу. Я также проверил консоль на наличие ошибок. но нет никаких ошибок, показывающих

Как я могу решить эту проблему?

                 

    var email = $('#email').val();
    var phone = $('#phone').val();
    var username = $('#username').val();
    var gender = $('form input[type=radio]:checked').val();
    var address = $('#address').val();
    var ethnicity = $('#ethnicity').val();


    if (email) {
        $('#email-val').html(email);
    }
    $('#phone-val').html(phone);
    $('#username-val').html(username);
    $('#address-val').html(address);
    $('#gender-val').html(gender);
    $('#ethnicity-val').html(ethnicity);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="signup-form">
    <div class="form-panel about-user js-active" data-animation="scaleIn">
        <h4>Account Information</h4>
        <div class="mb-4"></div>
        <div class="input-item">
            <input type="email" name="email" placeholder="Enter your email" id="email" class="input-bordered" required>
        </div>
        <div class="input-item">
            <input type="text" name="username" placeholder="Choose a username" id="username" class="input-bordered" required>
        </div>
        <div class="input-item">
            <input type="password" name="password" placeholder="Choose a Password" id="password" class="input-bordered" required>
        </div>
        <div class="button-row d-flex mt-4">
            <button class="btn btn-primary ml-auto js-btn-next" type="button" title="Next">Next</button>
        </div>
    </div>
</div>

<table class="table">
    <tbody>
        <tr>
            <th>Email Address:</th>
            <td id="email-val"></td>
        </tr>
        <tr>
            <th>Phone Number:</th>
            <td id="phone-val"></td>
        </tr>
        <tr>
            <th>Username:</th>
            <td id="username-val"></td>
        </tr>
        <tr>
            <th>Address:</th>
            <td id="address-val"></td>
        </tr>
        <tr>
            <th>Ethnicity:</th>
            <td id="ethnicity-val"></td>
            <input type="submit" name="submit" style="display:none" id="second">
        </tr>
    </tbody>
</table>

Answer 1

Вам не хватает того, что вы не назначаете их при нажатии кнопки sh. Вы назначаете их, пока страница загружается, и тогда она пуста. Итак, вам нужно назначить ваш щелчок одной функции onclick="Assign()" и выполнить в ней свой процесс

function Assign(){

var email = $('#email').val();
    var phone = $('#phone').val();
    var username = $('#username').val();
    var gender = $('form input[type=radio]:checked').val();
    var address = $('#address').val();
    var ethnicity = $('#ethnicity').val();


    if (email) {
        $('#email-val').html(email);
    }
    $('#phone-val').html(phone);
    $('#username-val').html(username);
    $('#address-val').html(address);
    $('#gender-val').html(gender);
    $('#ethnicity-val').html(ethnicity);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="signup-form">
    <div class="form-panel about-user js-active" data-animation="scaleIn">
        <h4>Account Information</h4>
        <div class="mb-4"></div>
        <div class="input-item">
            <input type="email" name="email" placeholder="Enter your email" id="email" class="input-bordered" required>
        </div>
        <div class="input-item">
            <input type="text" name="username" placeholder="Choose a username" id="username" class="input-bordered" required>
        </div>
        <div class="input-item">
            <input type="password" name="password" placeholder="Choose a Password" id="password" class="input-bordered" required>
        </div>
        <div class="button-row d-flex mt-4">
            <button class="btn btn-primary ml-auto js-btn-next"onclick="Assign()" type="button" title="Next">Next</button>
        </div>
    </div>
</div>

<table class="table">
    <tbody>
        <tr>
            <th>Email Address:</th>
            <td id="email-val"></td>
        </tr>
        <tr>
            <th>Phone Number:</th>
            <td id="phone-val"></td>
        </tr>
        <tr>
            <th>Username:</th>
            <td id="username-val"></td>
        </tr>
        <tr>
            <th>Address:</th>
            <td id="address-val"></td>
        </tr>
        <tr>
            <th>Ethnicity:</th>
            <td id="ethnicity-val"></td>
            <input type="submit" name="submit" style="display:none" id="second">
        </tr>
    </tbody>
</table>

Answer 2

 function fillTable(){
 var email = $('#email').val();
    var phone = $('#phone').val();
    var username = $('#username').val();
    var gender = $('form input[type=radio]:checked').val();
    var address = $('#address').val();
    var ethnicity = $('#ethnicity').val();


    if (email) {
        $('#email-val').html(email);
    }
    $('#phone-val').html(phone);
    $('#username-val').html(username);
    $('#address-val').html(address);
    $('#gender-val').html(gender);
    $('#ethnicity-val').html(ethnicity);
    
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="signup-form">
    <div class="form-panel about-user js-active" data-animation="scaleIn">
        <h4>Account Information</h4>
        <div class="mb-4"></div>
        <div class="input-item">
            <input type="email" name="email" placeholder="Enter your email" id="email" class="input-bordered" required>
        </div>
        <div class="input-item">
            <input type="text" name="username" placeholder="Choose a username" id="username" class="input-bordered" required>
        </div>
        <div class="input-item">
            <input type="password" name="password" placeholder="Choose a Password" id="password" class="input-bordered" required>
        </div>
        <div class="button-row d-flex mt-4">
            <button class="btn btn-primary ml-auto js-btn-next" type="button" title="Next" onclick="fillTable()">Next</button>
        </div>
    </div>
</div>

<table class="table">
    <tbody>
        <tr>
            <th>Email Address:</th>
            <td id="email-val"></td>
        </tr>
        <tr>
            <th>Phone Number:</th>
            <td id="phone-val"></td>
        </tr>
        <tr>
            <th>Username:</th>
            <td id="username-val"></td>
        </tr>
        <tr>
            <th>Address:</th>
            <td id="address-val"></td>
        </tr>
        <tr>
            <th>Ethnicity:</th>
            <td id="ethnicity-val"></td>
            <input type="submit" name="submit" style="display:none" id="second">
        </tr>
    </tbody>
</table>