我有一个HTML表单，用于收集用户的输入。
单击提交按钮后，我想在表单下方显示用户提供的信息，但是我在使用jQuery操作数据时遇到了困难。
以下是我的代码：
HTML：
<form id="employeeForm">
<!-- ' action="/" method="get"' Get, not post?? -->
<fieldset>
<legend>New Employee Data</legend>
<ul>
<li class="list"><input type="text" id="firstName" placeholder="First Name" />
<input type="submit" id="addButton-01" value="add" /></li>
<li class="list"><input type="text" id="lastName" placeholder="Last Name" />
<input type="submit" id="addButton-02" value="add" /></li>
<li class="list"><input type="text" id="idNumber" placeholder="ID Number" />
<input type="submit" id="addButton-03" value="add" /></li>
<li class="list"><input type="text" id="jobTitle" placeholder="Job Title" />
<input type="submit" id="addButton-04" value="add" /></li>
<li class="list"><input type="text" id="annualSalary" placeholder="Annual Salary" />
<input type="submit" id="addButton-05" value="add" /></li>
<li class="list"><textarea name="comments" id="comments" rows="5" cols="30" placeholder="Comments"></textarea>
<input type="submit" id="addButton-06" value="add" /></li>
</ul>
</fieldset>
</form>
jQuery的：
$(document).ready(function(){
console.log("jQuery sourced correctly");
// #=ID/single instance-&-dot.=Class/multiple instances
$(function() {
var newEmployeeButton = $('#newEmployeeButton'); // New Employee button ID
var employeeEntryForm = $('#employeeForm'); // Form ID
var textInput = $('input:text'); // all 'input type="text"' areas
var firstName = $('#firstName').val();
var lastName = $('#lastName').val();
var idNumber = $('#idNumber').val();
var jobTitle = $('#jobTitle').val();
var annualSalary = $('#annualSalary').val();
newEmployeeButton.show();
employeeEntryForm.hide();
$('#showForm').on('click', function(){
newEmployeeButton.hide();
employeeEntryForm.show();
});
employeeEntryForm.on('submit', function(e) {
e.preventDefault();
var newText = $textInput.val();
$('li:last').after('<li>' + newText + '</li>');
employeeEntryForm.hide();
newEmployeeButton.show();
textInput.val('');
});
答案 0 :(得分：0)
以下是您要问的基本实现。请注意使用自定义属性＆＃34; data-label＆＃34;因此，您可以将正确的标签添加到表单下方的列表中。根据我的经验，获取占位符的值并不是非常可靠，因此自定义属性很有用。此外，此表单上没有提交按钮。这可能是e.preventDefault（）阻止表单提交的问题。根据您的尝试，这可能或不重要。无论如何，你可以建立这个基本的解决方案。希望这会有所帮助...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style></style>
</head>
<body>
<form id="employeeForm"> <!-- ' action="/" method="get"' Get, not post?? -->
<fieldset>
<legend>New Employee Data</legend>
<ul>
<li class="list">
<input type="text" id="firstName" data-label="First Name" placeholder="First Name" />
<button id="addButton-01" value="add">Add</button>
</li>
<li class="list">
<input type="text" id="lastName" data-label="Last Name" placeholder="Last Name" />
<button id="addButton-02" value="add">Add</button>
</li>
<li class="list">
<input type="text" id="idNumber" data-label="ID Number" placeholder="ID Number" />
<button id="addButton-03" value="add">Add</button>
</li>
<li class="list">
<input type="text" id="jobTitle" data-label="Job Title" placeholder="Job Title" />
<button id="addButton-04" value="add">Add</button>
</li>
<li class="list">
<input type="text" id="annualSalary" data-label="Annual Salary" placeholder="Annual Salary" />
<button id="addButton-05" value="add">Add</button>
</li>
<li class="list">
<textarea name="comments" id="comments" rows="5" cols="30" data-label="Comments" placeholder="Comments"></textarea>
<button id="addButton-06" value="add">Add</button>
</li>
</ul>
</fieldset>
</form>
<ul id="new-ul">
</ul>
<script>
$(document).ready(function() {
$("button").on("click", function(e) {
e.preventDefault();
var label = $(this).prev().attr("data-label");
var value = $(this).prev().val();
if ( value != "" ) {
$("#new-ul").append("<li>" + label + " : " + value + "</li>");
}
})
});
</script>
</body>
</html>
答案 1 :(得分：0)
您显然缺少的是其他输入字段的name属性;只有你的<textarea>元素才有。
此外，您没有声明为$textInput的变量，而是textInput，就像没有提交<button>元素一样。
您可能希望以这种方式在表单下方附加用户提供的信息：
$(document).ready(function() {
$(function() {
var employeeEntryForm = $('#employeeForm'),
displayData = $('#displayData');
$('button[type="submit"]').on('click', function(e) {
e.preventDefault();
formData = employeeEntryForm.serializeArray();
// Display user data
$.each(formData, function(i, data) {
//console.log(data);
//console.log(data.name + ": " + data.value);
displayData.append('<li>' + data.name + ": " + data.value + '</li>');
});
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="employeeForm" name="employeeForm">
<fieldset>
<legend>New Employee Data</legend>
<ul>
<li class="list"><input id="firstName" name="firstName" placeholder="First Name" type="text"> <input id="addButton-01" type="submit" value="add"></li>
<li class="list"><input id="lastName" name="lastName" placeholder="Last Name" type="text"> <input id="addButton-02" type="submit" value="add"></li>
<li class="list"><input id="idNumber" name="idNumber" placeholder="ID Number" type="text"> <input id="addButton-03" type="submit" value="add"></li>
<li class="list"><input id="jobTitle" name="jobTitle" placeholder="Job Title" type="text"> <input id="addButton-04" type="submit" value="add"></li>
<li class="list"><input id="annualSalary" name="annualSalary" placeholder="Annual Salary" type="text"> <input id="addButton-05" type="submit" value="add"></li>
<li class="list">
<textarea cols="30" id="comments" name="comments" placeholder="Comments" rows="5"></textarea> <input id="addButton-06" type="submit" value="add"></li>
</ul>
</fieldset>
<button type="submit">Submit</button>
</form>
<hr>
<span id="displayData"></span>