JS实现表单延伸以及数据预存功能

需求：在后台添加分类是涉及到的二级分类添加时非常繁琐，可以通过js来实现一次上传多条分类信息的功能。

使用form表单提交在input后添加增加按钮获取input的信息生成新的input标签

在生成新标签时会出现一个问题按照正常写法会重置表单把当前写好的input内容重置掉，所以还需要添加表单预存功能在添加前获取当前表单的数据然后再添加后再重新写入表单。就完美实现了此功能

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无限延生input案例</title>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <form name="saveForm" id="saveForm" method="post" action="" onsubmit="return checkForm(this)">
      <tr>
        <th valign="top">分类名称 ： </th>
        <td id="classNameList">
          <input type="text" name="name0" id="name0"  class="site-table-input" value=""/>
          &nbsp;<button id="addInputByName" style="background: #c30;color: white;padding: 1px 2px 1px 5px;border-radius: 4px;cursor: pointer;" onclick="addInput()">增加+</button>
          <input type="hidden" name="inputNum" id="inputNum" value="1">
        </td>
      </tr>

      <script type="text/javascript">
          var inputNum = 1;
          function addInput(){
            var vs = new Array(); //预存值对象
            //获取 xx DIV 中的所有 INPUT 标签元素
            var inputs = document.getElementById("classNameList").getElementsByTagName("input");
            //遍历存储其 value
            for (var i = 0; i < inputs.length; i++) {
            　　vs[i] = inputs[i].value;
            }
            console.log(vs);
            var form = document.getElementById("classNameList");
            var str = "<input type='text' name='name"+inputNum+"' id="+"name"+inputNum+""+" class='site-table-input'>";
            inputNum++;
            form.innerHTML += "<p>"+str +"</p>";

            //获取执行添加后的元素集合
            inputs = document.getElementById("classNameList").getElementsByTagName("input");
            //为其赋原先的值
            for (var i = 0; i < vs.length; i++) {
            　　inputs[i].value = vs[i];
            }
            document.getElementById('inputNum').value=inputNum;
          }
      </script>

    </table>
    </form>
</body>
</html>