HTML表單數據到jQuery然後返回到HTML

我有一個HTML表單，我用它來收集用戶的輸入。HTML表單數據到jQuery然後返回到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(''); 
});

來源

2017-02-12 PCSailor

你說我有麻煩獲取數據到jQuery的......可以請你分享那究竟是什麼麻煩？ – newbie

沒有將數據導入JQ – PCSailor

@nyedidikeke和sono123謝謝你們，我得到了代碼工作。你們每個人都提出了不同的方式來做到這一點很有趣。 nyedidikeke的方法有一個提交按鈕，它附加到span標記內的DOM。 Sono123的方法有一個單獨的按鈕來提交每個列表項。非常聰明，謝謝<：現在，使這些提交添加到頁面上，動態地累計公司每月支出。呼！感覺像很多我的緩慢的大腦！ – PCSailor

這是一個基本的實現你問的。請注意使用自定義屬性「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>

來源

2017-02-12 07:40:17 sono123

你很明顯缺少的是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>

來源

2017-02-12 12:06:39 nyedidikeke

看到我上面的評論？謝謝！我仍然在。截止日期>： – PCSailor

@PCSailor：請將我的答案標記爲正確，因爲這有助於解決您的挑戰。 – nyedidikeke

嗨，我試過了，但它給了我這個信息：「感謝您的反饋！記錄下名聲不到15的人的投票記錄，但不要更改公開顯示的帖子分數。」 – PCSailor

HTML表單數據到jQuery然後返回到HTML

回答

相關問題