PHP动态添加INPUT并获取值

系统管理员 2022-11-21 09:25 217阅读 0赞

最近在完成一个需求的时候，由于不确定选项有多少个，所以就想到了动态添加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;
            }
            //数组转JSon提交
            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;
            }
            //创建API
            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并获取值

更多文章请识别以下微信小程序二维码进行查看

![20201030215053881.jpg][]

[20201030215053881.jpg]: /images/20221120/5f1216d8498e4f84a82f0d426c2d7a37.png

发表评论取消回复

表情：

评论列表（有 0 条评论，217人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java比较两个对象是否相同并获取值不同的属性

最近项目中要加操作日志，同时要把用户修改了那些字段记录下来，在更新的时候就需要比较之前的数据和现在的数据有哪些不同，这么多类一个一个的比较就太麻烦了，所以打算写一个工具类...

秒速五厘米/ 2024年05月23日 22:13/ 0 赞/ 94 阅读

相关 Unity 按键取值 Input

GetMouseButoon（接收鼠标按键） GetKey（接收键盘按键） GetButton 1. GetButton：按键激活状态，按键按下后持续有...

迈不过友情╰/ 2024年04月17日 05:47/ 0 赞/ 62 阅读

相关 Java比较两个对象是否相同并获取值不同的属性

最近项目中要加操作日志，同时要把用户修改了那些字段记录下来，在更新的时候就需要比较之前的数据和现在的数据有哪些不同，这么多类一个一个的比较就太麻烦了，所以打算写一个工具类。

男娘i/ 2023年09月26日 10:32/ 0 赞/ 92 阅读

相关 Java比较两个对象是否相同并获取值不同的属性

最新项目中要加操作日志，同时要把用户修改了那些字段记录下来，在更新的时候就需要比较之前的数据和现在的数据有哪些不同，这么多类一个一个的比较就太麻烦了，所以打算写一个工具类。

布满荆棘的人生/ 2023年02月18日 03:14/ 0 赞/ 37 阅读

相关 PHP动态添加INPUT并获取值

最近在完成一个需求的时候，由于不确定选项有多少个，所以就想到了动态添加input并最终合成json存到数据库，之前自己也没做过相关的东西，所以就想利用这次试试能

系统管理员/ 2022年11月21日 09:25/ 0 赞/ 218 阅读

相关动态添加删除table页面一行input表格

之前写过两篇关于HTML页面[添加结点][Link 1]，[删除结点][Link 2]的博文。今天偶然看到一个网友询问JSP页面上动态给表格增加行，删除行，碰

柔情只为你懂/ 2022年08月07日 14:46/ 0 赞/ 324 阅读

相关 Easyui input 取值和赋值

//取值 var val = $("id").textbox('getValue') //赋值 $("id").textbox('setValue'

浅浅的花香味﹌/ 2022年07月18日 05:14/ 0 赞/ 424 阅读

相关 EasyUI input 取值和赋值

Easyui input 取值和赋值入坑了，今天就把这个坑给补上，`用JQuery就是给easyui表单赋不了值`，原来：当我们使用了easyui自带的样式，如`eas

朱雀/ 2022年05月26日 06:26/ 0 赞/ 454 阅读

相关 input标签点击取值

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X

ゝ一世哀愁。/ 2022年05月14日 14:17/ 0 赞/ 307 阅读

相关 koa2中post提交数据并获取值

html表单 index.ejs <!DOCTYPE html> <html lang="en"> <head> <meta c

小灰灰/ 2021年12月01日 09:59/ 0 赞/ 429 阅读