PHP動態添加INPUT並獲取值

來源：blog.csdn.net/HZX19941018/article/details/109393790

  在完成一個需求的時候，由於不確定選項有多少個，所以就想到了動態添加input並最終合成json存到資料庫，之前自己也沒做過相關的東西，所以就想利用這次試試能不能做出，最終還是實現了需求，所以也分享代碼給大家，供大家參考。

一、HTML端

<hr><div class="form-group" style="text-align: center;">    <button type="button" class="btn btn-success btn-sm" id="addBtn">新增</button>    <button type="button" class="btn btn-danger btn-sm" id="removeBtn">移除</button></div><div class="optionAnswerParent" id="optionAnswerParent">    <div class="optionAnswer">        <hr/>        <div class="form-group">            <label for="optionListData" class="col-sm-2 control-label">選項</label>            <div class="col-sm-8">                <div class="input-group">                    <span class="input-group-addon"><i class="fa fa-pencil"></i></span>                    <input type="text" class="form-control optionListData" placeholder="輸入選項">                </div>            </div>        </div>        <div class="form-group">            <label for="numberListData" class="col-sm-2 control-label">分數</label>            <div class="col-sm-8">                <div class="input-group">                    <span class="input-group-addon"><i class="fa fa-pencil"></i></span>                    <input type="number" class="form-control numberListData" placeholder="輸入分數"                           value="0">                </div>            </div>        </div>    </div></div>
  二、jquery
<script type="application/javascript">        $("#addBtn").click(function () {        $(".optionAnswerParent").append(" <div class='optionAnswer'><hr/> <div class='form-group'> <label for='optionListData' class='col-sm-2 control-label'>選項"+"<" + "/label> <div class='col-sm-8'> <div class='input-group'> <span class='input-group-addon'><i class='fa fa-pencil'>"+"<" + "/i>"+"<" + "/span> <input type='text' class='form-control optionListData' placeholder='輸入選項'> "+"<" + "/div>"+"<" + "/div>"+"<" + "/div> <div class='form-group'> <label for='numberListData' class='col-sm-2 control-label'>分數"+"<" + "/label> <div class='col-sm-8'> <div class='input-group'> <span class='input-group-addon'><i class='fa fa-pencil'>"+"<" + "/i>"+"<" + "/span> <input type='number' class='form-control numberListData' placeholder='輸入分數' value='0'>"+"<" + "/div>"+"<" + "/div>"+"<" + "/div>"+"<" + "/div>");    });        $('#removeBtn').click(function () {        $('div[class=optionAnswer]:last').remove();    });         function saveData() {                optionList = [];        numberList = [];                $(".optionListData").each(function () {            optionList.push($(this).val());        });                $(".numberListData").each(function () {            numberList.push($(this).val());        });                if (optionList.length <= 0) {            layer.msg('請填寫選項！');            return false;        }                optionList = JSON.stringify(optionList);        numberList = JSON.stringify(numberList);                var subjectIdData = $('#subjectIdData').val();        var titleData = $('#titleData').val();        var sortData = $('#sortData').val();                if (subjectIdData === '') {            layer.msg("請選擇題目");            return false;        }        if (titleData === '') {            layer.msg("請輸入標題");            return false;        }                var url = "API接口";                $.ajax({            method: 'post',            url: url,            data: {                optionList: optionList,                numberList: numberList,                subjectIdData: subjectIdData,                titleData: titleData,                sortData: sortData            },            success: function (res) {                if (res['code'] === 1) {                    layer.msg('添加成功!');                    window.location.reload();                } else {                    layer.msg(res["msg"]);                }            }        });            }</script>
三、PHP接收端
$optionList = $_POST[""];                   $numberList = $_POST["numberList"];         $optionList = json_decode($optionList, true);$numberList = json_decode($numberList, true);
這樣就可以動態添加、刪除input並獲取值
PS：如果覺得我的分享不錯，歡迎大家隨手點讚，在看，你的鼓勵是我最大的動力。