小程序制作笔记-通过js给表单添加设定好的表单组件

前面Sham在制作活动模块的时候，碰到个难题，就是不同的活动报名会涉及到不同的数据采集需求，比如有的要多个input输入框数据，或者picker选择数据，但是Sham当时搞不定，就只是临时使用了固定的组件，这样后续无法动态添加。

今天终于搞定了动态添加表单组件的方法，还是感谢网友的分享，下面我也来接力分享下：

首先是表单部分：将下面代码放入你的表单中

<label for='name'><h4>活动选择清单:</h4></label>
      <div>
        <div style="width:40px;display:inline-block;margin:10px;text-align:center;">添加</div>
        <div style="width:100px;display:inline-block;margin:10px;text-align:center;">表单组件类型</div>
        <div style="width:150px;display:inline-block;margin:10px;text-align:center;">表单组件名称</div>
        <div style="width:450px;display:inline-block;margin:10px;text-align:center;">表单组件值（单选/多选请在此输入，并用英文逗号,分隔）</div>
        
        <div style="display:block;width:850px;margin:5px;">
        <div style="width:100px;display:inline-block;margin:5px 10px;text-align:center;"> 
          <select class='form-control' name='addontype[]' style="width:100px;">
            <option value='tochoose'>请选择</option>
            <option value='input'>输入框</option>
            <option value='picker'>单选项</option>
            <option value='checkbox'>多选项</option>
          </select>
        </div>
        <div style="width:150px;display:inline-block;margin:5px 10px;text-align:center;">
          <input class='form-control' type='text' value='' name='addondesc[]'  style="width:150px;">
        </div>
        <div style="width:450px;display:inline-block;margin:5px 10px;text-align:center;">
          <input class='form-control' type='text' value='' name='addonvalue[]' placeholder='活动选择清单(多个选择时用英文逗号,来分隔)'  style="width:450px;">
        </div>
        <input class='form-control' type='button' value='+' onclick='addOrRemove(this)' style="width:40px;float:left;text-align:center;margin:5px 10px;">
      </div>   
    </div> 
<script>
    function addOrRemove(btn) {
        var add = btn.value == "+";
        var div = btn.parentNode, list = div.parentNode;
        if (add) {
            div = div.cloneNode(true);
            var inputs = div.getElementsByTagName('input'); inputs[inputs.length - 1].value = '-';
            list.appendChild(div);
        }
        else list.removeChild(div);
    }
  </script>

然后是接受表单数据部分

<?php
include_once("con.php");
$addontype=$_POST["addontype"];
$addondesc=$_POST["addondesc"];
$addonvalue=$_POST["addonvalue"];
if(isset($addondesc)){
$len=count($addondesc);
for($x=0;$x<$len;$x++) {
$addonname=$addontype[$x].$x;
$sql = "INSERT INTO `actset`(`ID`, `addontype`, `addonname`, `addondesc`, `addonvalue`) VALUES (null,'$addontype[$x]','$ct_addonname','$addondesc[$x]','$addonvalue[$x]')";
$result = $con->query($sql);
}
?>

这样数据库建1个actset数据表，把上面提到的字段写进去，然后当你提交表单的时候，就会循环将添加的各个表单组件单独存入数据库；

最后，你只需要通过小程序读取，如果为input时，就在小程序中显示input并显示相应数据，或者是picker时，也能显示各个选择项，这样就能实现类似于问卷星那样多项数据采集功能了。