javascript - Jquery:无法将输入值设置为表 td
问题描述
我有一个多步骤表格。在用户提交表单之前,我想向他展示他使用 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>
解决方案
您缺少的是在按下按钮时您没有分配它们。您在页面加载时分配它们并且那时它是空的。因此,您需要将您的点击分配给一个功能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>
推荐阅读
- html - 多选多重引导选择2的自动增加和减少高度
- python - Python:单击窗口上的任意位置时如何从按钮上移除焦点
- momentjs - moment-timezone.js 获取具有时区的特定日期的 UTC 偏移量
- spring - spring integrationflow 没有在receivercontainer 上设置消息监听器
- c# - C# 日期时间格式 YYMMDDhhmmsstnnp
- python - Python密码生成器-密码数组无输出
- ios - 如何在滚动时更新 UITableView 数据
- c# - 如何注册两个实现,然后在 .Net Core 依赖注入中获取一个
- asp.net-core-mvc - 如何在 asp.net core 2.0 中搜索日期
- tensorflow - 时间序列数据作为 X 输入,3d 连续数据作为目标 Y - 使用 RNN 进行回归(LSTM 和 GRU)