jQueryからHTMLへのHTMLフォームデータ

私はユーザーの入力を収集するために使用しているHTMLフォームを持っています。jQueryからHTMLへの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に追加する送信ボタンが1つあります。 Sono123のメソッドには、各リスト項目のサブミットのための個別のボタンがあります。両方に非常に賢い、ありがとうございました<：今、これらの投稿をページに追加して、会社の毎月の支出を動的に集計します。すごい！私の遅い脳のための多くのような感じ！ – PCSailor

ここでは、あなたが求めているものの基本的な実装です。フォームの下のリストに正しいラベルを追加できるように、カスタム属性 "データラベル"の使用に注意してください。プレースホルダの価値を得ることは、私の経験ではあまり信頼できないので、カスタム属性は便利です。また、このフォームには送信ボタンもありません。これは、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

jQueryからHTMLへのHTMLフォームデータ

答えて

関連する問題