Javascript jQuery追加输入元素_Javascript_Jquery_Html

Javascript jQuery追加输入元素

javascript jquery html

Javascript jQuery追加输入元素,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试创建一个简单的待办事项列表，该列表下有一个任务列表其想法是创建完整的列表，然后将其提交给服务器以将其保存在数据库中我希望得到一个干净的输入框结构，如下所示 Array ( [checklist] => Array ( [0] => Array ( [task] => Array (

我正在尝试创建一个简单的待办事项列表，该列表下有一个任务列表

其想法是创建完整的列表，然后将其提交给服务器以将其保存在数据库中

我希望得到一个干净的输入框结构，如下所示

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

                )

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

                )

            [2] => 
        )

    [submit] => Submit
)

由于我需要在输入框中添加正确的

名称

，以保留我在数据库中收到的结构，因此我需要计算清单编号和任务编号，然后将其追加

一种独特的情况是，当用户从任务列表的中间删除一个输入框时，我如何保留要递增的数字，以避免重叠

输入名称而丢失数据
<!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>


待办事项
























$（“.add”）。单击（函数（）{
//查找任务计数
var task_count=$（this）.兄弟姐妹（'ul'）。子女（'li'）。长度；
var count=$（this.sibbines（'ul'）.count；
变量输入=“”；
console.log（任务计数）；
$（this）.同级（'ul'）。追加（输入）；
});


链接：
代码（在页面底部）为：
$（“.add”）。单击（函数（）{
//查找任务计数
var task_count=$（this）.兄弟姐妹（'ul'）。子女（'li'）。长度；
var count=$（this.sibbines（'ul'）.count；
变量输入=“”；
console.log（任务计数）；
$（this）.同级（'ul'）。追加（输入）；
});
当用户删除输入时，您可以将输入名称存储在数组中。在追加时，可以检查数组中的名称。根据数组中是否存在该名称，可以重命名新添加的输入。这将防止数据丢失（如果有）
另一种方法是在追加时不必担心名称。但在提交表单之前，您可以根据子项计数和任务名称动态生成输入的名称。这肯定会防止数据丢失
下面是第二种方法的演示：
示例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>


























在这里，为了命名，我在ul上使用了一个数据属性，在列表中的输入上使用了索引
单击“提交”按钮，您将看到更改后的输入名称。
我认为您应该在提交时统计检查表和任务。只需在“编辑时间”期间忽略名称，并在末尾的一个块中设置所有名称，如下所示：

这样，如果用户删除或移动（拖动？）项目，您就不必在意了，因为它们将在最后正确命名
（带有remove的示例：）
注意，我还为debug设置了输入的val（），以显示名称。我阻止了JSFIDLE的表单提交，所有这些都应该被删除以允许正确的表单发布
HTML:






JS:
$（函数（）{
$（“#添加”）。单击（函数（e）{
var elem=$（“”）；
变量链接=$（''）；
链接。附件（elem）；
要素附录（“全部”）；
链接。单击（功能（e1）{
var task=$（'li class=“task”>）；
$（this.parent（）.children（“.tasks”）.append（task）；
});
});
$（“#todo”）.submit（函数（）{
var-countlist=0；
var countTasks=0；
$（“#all>li.checklist>input”）。每个（函数（）{
$（此）.attr（“名称”、“检查表[“+计数列表+”]）；
$（this.val）（“检查表[”+计数列表+“]）；
countTasks=0；
$（this）.parent（）.find（“ul.tasks>li.task>input”）.each（function（））{
$（此）.attr（“名称”，“检查表[“+CountList+”]任务[“+countTasks+”]）；
$（this）.val（“检查表[“+countlist+”]task[“+countTasks+”]）；
countTasks++；
});
计数表++；
})
返回true；
});
});
如果我有10个列表，并且用户删除了3,6,7,8，那么项目数是6，但最后一个是10。我如何才能确保这件事得到处理？@HarshaMV在这种情况下，第二种选择会更好。在这种情况下，列表的数量无关紧要，因为命名将从0或任何初始值开始。@HarshaMV检查示例演示。
$(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;
    })
});

<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>

<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>

$(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;
    });

});