jQuery フォームから複数のフィールドを取得しようとすると、いくつかの問題が発生します。
フォームを使用してプロジェクトを作成します。タスクの数は事前定義されていないため、新しいタスクを追加するための新しいフォーム フィールドは、jQuery を介して動的に作成できます。
HTMLフォーム
<form action="#" id="createProjectForm" method="post">
<fieldset id="Project">
<label for="title">Title:</label>
<label for="title">Coordinator:</label>
<input type="text" id="coordinator" name="coordinator" placeholder="COORDINATOR" />
<div id="tasks">
<hr/>
<label for="taskTitle">Task:</label>
<input type="text" id="taskTitle" name="taskTitle" placeholder="TASK TITLE" />
</div>
<label for="createTask"></label>
<input type="button" id="createTask" value="ADD NEW TASK" />
<label for="submitTask"></label>
<input type="submit" id="submitTask" value="SAVE AND CREATE PROJECT" />
</form>
Jクエリ
$("#createTask").live("click",function() {
$('#tasks').clone().insertAfter("#tasks");
});
div "タスク" を複製すると、新しいタスクの 2 つの "taskTitle" 入力フィールドが正しく表示されますが、値を取得しようとすると ("each" を使用):
Jクエリ
$("#createProjectForm").live("submit",function() {
var taskTitles = "";
$("#taskTitle").each(function(){
taskTitles += $.trim($(this).val()) + ",";
console.log("Task: "+taskTitles);
});
DOM に適切に格納されていないかのように、2 番目のフィールドではなく、最初のフィールドの値を取得するだけです...
なにか提案を？ありがとう！