HTML 表单数据到 jQuery 然后返回到 HTML答案

【问题标题】：HTML form data to jQuery then back to HTMLHTML 表单数据到 jQuery 然后返回到 HTML
【发布时间】：2017-02-12 06:42:32
【问题描述】：

我有一个用来收集用户输入的 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('');
});

【问题讨论】：

您说将数据输入 jquery 时遇到问题...您能分享一下到底是什么问题吗？
不向JQ取数据
@nyedidikeke 和 sono123 谢谢你们，我得到了代码。你们每个人都提出了一种不同的方法来做这件事，这很有趣。 nyedidikeke 的方法有一个提交按钮，该按钮附加到 span 标签内的 DOM。 Sono123 的方法有一个单独的按钮，用于提交每个列表项。两者都非常聪明，谢谢 <:>
@sono123 见上文<:>

标签： jquery html forms

【解决方案1】：

这是您所要求的基本实现。请注意自定义属性“data-label”的使用，以便您可以将正确的标签添加到表单下方的列表中。根据我的经验，获取占位符的值并不是很可靠，因此自定义属性很有用。此外，此表单上没有提交按钮。这可能是 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>

【讨论】：

【解决方案2】：

您显然缺少其他输入字段上的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>

【讨论】：

看到我上面的评论了吗？谢谢！我还在做。明天到期 >:
@PCSailor：请将我的答案标记为正确，因为它有助于解决您的挑战。
嗨，我试过了，但它给了我这样的信息：“感谢您的反馈！声望低于 15 的人的投票将被记录，但不要更改公开显示的帖子得分。”
您好@PCSailor：从您收到的消息来看，我认为您错误地否决了我的答案，而不是点击tick 来接受我的答案。仔细看，点击勾选接受答案。