jQuery追加輸入元素

我正在嘗試創建一個簡單的Do來列出哪個列表中包含任務清單。jQuery追加輸入元素

想法是創建完整列表，然後將其提交給服務器以將其保存在數據庫中。

我希望得到輸入框像下面

Array 
(
    [checklist] => Array 
     (
      [0] => Array 
       (
        [task] => Array 
         (
          [0] => 
          [1] => 
         ) 

       ) 

      [1] => Array 
       (
        [task] => Array 
         (
          [0] => 
          [1] => 
          [2] => 
         ) 

       ) 

      [2] => 
     ) 

    [submit] => Submit 
)

乾淨結構，因爲我需要正確的name添加到輸入框保留我收到在數據庫中的結構，我將需要清點清單編號和任務編號，然後追加相同。

一個獨特的例子是，當一個用戶從任務列表中間刪除一個輸入框時，我如何保留這個數字以便增加，這樣我就不會重疊input name並丟失數據。

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>ToDo</title> 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
</head> 

<body> 
<form action="todo.php" method="post" name="todo"> 
    <ul> 
    <li> 
     <input name="checklist[0]" type="text"> 
     <ul> 
     <li> 
      <input name="checklist[0][task][0]" type="text"> 
     </li> 
     <li> 
      <input name="checklist[0][task][1]" type="text"> 
     </li> 
     </ul> 
     <a class="add" href="#">Add one</a> </li> 
    <li> 
     <input name="checklist[1]" type="text"> 
     <ul> 
     <li> 
      <input name="checklist[1][task][0]" type="text"> 
     </li> 
     <li> 
      <input name="checklist[1][task][1]" type="text"> 
     </li> 
     <li> 
      <input name="checklist[1][task][2]" type="text"> 
     </li> 
     </ul> 
     <a class="add" href="#">Add one</a> </li> 
    <li> 
     <input name="checklist[2]" type="text"> 
     <ul> 
     </ul> 
     <a class="add" href="#">Add one</a> </li> 
    </ul> 
    <input name="submit" type="submit" value="Submit"> 
</form> 

<script language="javascript"> 


$(".add").click(function() { 

    // Find the Task Count 
    var task_count = $(this).siblings('ul').children('li').length; 
    var count = $(this).siblings('ul').count; 
    var input = '<li><input name="checklist[][task][]" type="text"></li>'; 

    console.log(task_count); 

    $(this).siblings('ul').append(input); 
}); 

</script> 
<hr/> 
<pre> 
<?php 
print_r($_POST); 
?> 
</pre> 
</body> 
</html>

鏈接：http://play.mink7.com/todo.php

的代碼（在頁面底部）是：

$(".add").click(function() { 

    // Find the Task Count 
    var task_count = $(this).siblings('ul').children('li').length; 
    var count = $(this).siblings('ul').count; 
    var input = '<li><input name="checklist[][task][]" type="text"></li>'; 

    console.log(task_count); 

    $(this).siblings('ul').append(input); 
});

來源

2014-09-30 Harsha M V

當用戶刪除，你可以在陣列中可能存儲輸入名稱的輸入。在追加時，您可以檢查數組的名稱。根據陣列中是否存在該名稱，可以重新命名新添加的輸入。這將防止數據丟失（如果有的話）。

另一種方法是在追加時不要擔心名稱。但在提交表單之前，您可以根據子項數和任務名稱動態生成輸入的名稱。這肯定會防止數據丟失。

下面是第二種方法的演示：http://jsfiddle.net/lotusgodkk/GCu2D/359/

$(document).ready(function() { 
    $('input[type="submit"]').on('click', function (e) { 
     $('form>ul').each(function() { 
      var ul = $(this); 
      var name = ul.attr('data-name'); 
      var inputs = $('input', ul); 
      inputs.each(function() { 
       var i = $(this); 
       var index = inputs.index(i); 
       var n = name + '_' + index; // Generate the name of input 
       i.attr('name', n); 
      }); 
     }); 
     return false; 
    }) 
});

示例HTML：

<form action="todo.php" method="post" name="todo"> 
    <ul data-name="listone"> 
     <li> 
      <input name="checklist[0]" type="text" /> 
      <ul> 
       <li> 
        <input name="checklist[0][task][0]" type="text" /> 
       </li> 
       <li> 
        <input name="checklist[0][task][1]" type="text" /> 
       </li> 
      </ul> <a class="add" href="#">Add one</a> 
     </li> 
     <li> 
      <input name="checklist[1]" type="text" /> 
      <ul> 
       <li> 
        <input name="checklist[1][task][0]" type="text" /> 
       </li> 
       <li> 
        <input name="checklist[1][task][1]" type="text" /> 
       </li> 
       <li> 
        <input name="checklist[1][task][2]" type="text" /> 
       </li> 
      </ul> <a class="add" href="#">Add one</a> 
     </li> 
     <li data-name="listthree"> 
      <input name="checklist[2]" type="text" /> 
      <ul></ul> <a class="add" href="#">Add one</a> 
     </li> 
    </ul> 
    <input name="submit" type="submit" value="Submit" /> 
</form>

這裏，用於命名我用UL的數據屬性和內部上輸入的索引列表。

點擊提交按鈕，你會看到改變的輸入名稱。

來源

2014-09-30 09:31:13

如果非要讓說，10名列表和用戶刪除3,6,7,8那麼項目的num是6，但最後一個是10.我怎樣才能確保這是處理？ – 2014-09-30 09:36:03

@HarshaMV在這種情況下，第二種選擇會更好。在這種情況下列表的數量並不重要，因爲命名將從0開始，或者任何您的初始值。 – 2014-09-30 10:15:10

@HarshaMV檢查示例演示。 – 2014-09-30 10:29:18

我認爲你應該在提交時間檢查清單和任務。不理會在「編輯時間」的名稱，並在最後一個塊中的所有設置的名稱，就像這樣：

http://jsfiddle.net/s3j7ok56/1/

這樣，如果用戶刪除或移動的物品，你只（拖？）不在乎，因爲他們會在最後被正確命名。

（例如帶刪除：http://jsfiddle.net/s3j7ok56/2/）

請注意，我還設置的調試投入VAL（），以顯示名稱。而我阻止表單提交JsFiddle，所有這些都應該被刪除，以允許正確的表單發佈。

HTML：

<form method="post" id="todo" name="todo" onsubmit="/* for JSFIDDLE */ return false;"> 
    <ul id="all"> 
    </ul> 
    <a id="addc" href="#">add checklist</a><br /> 
    <input name="submit" type="submit" value="Submit"> 
</form>

JS：

$(function() { 

    $("#addc").click(function(e) { 

     var elem=$('<li class="checklist"><input type="text"><ul class="tasks"></ul></li>'); 
     var link=$('<a class="add" href="#">Add task</a>'); 

     link.appendTo(elem); 
     elem.appendTo("#all"); 

     link.click(function(e1) { 
      var task=$('<li class="task"><input type="text"></li>'); 
      $(this).parent().children(".tasks").append(task); 
     }); 
    }); 

    $("#todo").submit(function() { 
     var countLists=0; 
     var countTasks=0; 
     $("#all>li.checklist>input").each(function() { 
      $(this).attr("name","checklist["+countLists+"]"); 
      $(this).val("checklist["+countLists+"]"); 
      countTasks=0; 
      $(this).parent().find("ul.tasks>li.task>input").each(function() { 
       $(this).attr("name","checklist["+countLists+"]task["+countTasks+"]"); 
       $(this).val("checklist["+countLists+"]task["+countTasks+"]"); 
       countTasks++; 
      }); 
      countLists++; 
     }) 
     return true; 
    }); 

});

來源

2014-09-30 10:23:25 FrancescoMM

jQuery追加輸入元素

回答

相關問題