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

您缺少的是在按下按鈕時您沒有分配它們。 您在頁面加載時分配它們並且那時它是空的。 因此，您需要將點擊分配給一個 function 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>