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追加输入元素

回答

相关问题