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

您的缺失是您没有在按下按钮时分配它们。您在页面加载时分配它们，而那时页面为空。因此，您需要将点击分配给一个功能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>