Javascript 将onclick与<；李>；添加到表单POST数据的步骤_Javascript_Forms_Post_Html Lists

Javascript 将onclick与<；李>；添加到表单POST数据的步骤

javascript forms post

Javascript 将onclick与<；李>；添加到表单POST数据的步骤,javascript,forms,post,html-lists,Javascript,Forms,Post,Html Lists,我有一个典型的html表单，用于将数据发布到数据库。在这个表单中，我希望包含带有布尔值的可单击javascript li元素，比如单选按钮。但在提交表单时，我如何将其与表单一起发布？我猜我必须用onclick调用一个函数来检查或取消选中隐藏的表单元素。我该怎么做 <h3 class="text-left">Questions</h3> <div class="input-group" style="max-height: 30

我有一个典型的html表单，用于将数据发布到数据库。在这个表单中，我希望包含带有布尔值的可单击javascript li元素，比如单选按钮。但在提交表单时，我如何将其与表单一起发布？我猜我必须用onclick调用一个函数来检查或取消选中隐藏的表单元素。我该怎么做

            <h3 class="text-left">Questions</h3>
        <div class="input-group" style="max-height: 300px;overflow: inherit;">
            <ul class="list-group checked-list-box">

              <li class="list-group-item">Question 1
              <input type="hidden" name="question_1_input"></li>

            </ul>

        </div>

<script>

问题

问题1

$（函数（）{ $（'.list-group.checked-list-box.list-group-item'）。每个（函数（）{

//设置
var$widget=$（这个），
$checkbox=$（''），
颜色=（$widget.data（'color'）？$widget.data（'color'）：“primary”），
样式=（$widget.data（'style'）=“按钮”？“btn-”：“列表组项-”），
设置={
关于：{
图标：“glyphicon glyphicon检查”
},
关：{
图标：“glyphicon glyphicon未选中”
}
};
var checkedValues=$（“li输入[类型=复选框]：已选中”）.map（函数（）{
返回$（this.val（）；
});
log（checkedValues.get（））；
$widget.css（'cursor'，'pointer'）；
$widget.append（$checkbox）；
//事件处理程序
$widget.on（'click'，函数（）{
$checkbox.prop（'checked'，！$checkbox.is（':checked'）；
$checkbox.triggerHandler（'change'）；
updateDisplay（）；
});
$checkbox.on（'change'，function（）{
updateDisplay（）；
});
//行动
函数updateDisplay（）{
var isChecked=$checkbox.is（“：checked”）；
//设置按钮的状态
$widget.data（'state'，（isChecked）？“开”：“关”）；
//设置按钮的图标
$widget.find（“.state图标”）
.removeClass（）
.addClass（'state-icon'+设置[$widget.data（'state'）].icon）；
//更新按钮的颜色
如果（已检查）{
$widget.addClass（样式+颜色+活动）；
}否则{
$widget.removeClass（样式+颜色+活动）；
}
}
//初始化
函数init（）{
if（$widget.data（'checked'）==true）{
$checkbox.prop（'checked'，！$checkbox.is（':checked'）；
}
updateDisplay（）；
//如果适用，插入图标
if（$widget.find（'.state icon'）。长度==0）{
$widget.prepend（“”）；
}
}
init（）；
});
$（“#获取检查数据”）。在（'click'，函数（事件）{
event.preventDefault（）；
var checkedItems={}，计数器=0；
$（“#复选框li.active”）。每个（函数（idx，li）{
checkedItems[计数器]=$（li）.text（）；
计数器++；
});
$（'#display json'）.html（json.stringify（checkedItems，null，'\t'））；
});

}))；

我创建了将表单中的隐藏元素设置为所选li元素的数据值属性的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
        .active {
            background-color: #EDEDED;
        }
    </style>
</head>
<body>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


    <ul>
        <li class="liElement" data-value="first">First</li>
        <li class="liElement" data-value="second">Second</li>
        <li class="liElement" data-value="third">Third</li>
        <li class="liElement" data-value="fourth">Fourth</li>
    </ul>
    <form action="index.html" method="get">
        <input type="hidden" id="formControl" name="control" value="">
        <button>Submit</button>
    </form>



    <script type="text/javascript">
        $(document).ready(function(){
            var liArr = [];
            var formControl = $("#formControl");

            $(".liElement").click(function(){
                $(this).toggleClass("active");

                var current = $(this).data("value");
                var index = liArr.indexOf(current);
                if (index != -1) {
                    liArr.splice(index, 1);
                } else {
                    liArr.push(current);
                }

                formControl.val(liArr.join('-'));
            });
        });
    </script>

</body>
</html>


.主动{
背景色：#EDEDED；
}

第一个
秒
第三
第四个

提交
$（文档）.ready（函数（）{
var-liArr=[]；
var formControl=$（“#formControl”）；
$（“.lieElement”）。单击（函数（）{
$（此）.toggleClass（“活动”）；
var current=$（此）.data（“值”）；
var指数=liArr.indexOf（当前）；
如果（索引！=-1）{
接头（索引1）；
}否则{
推压（电流）；
}
val（liArr.join（'-'）；
});
});

但是，在编辑之后，表单在哪里？谢谢你，卢卡，对于我所追求的几乎完美无瑕……如果我想向表单控件提交数组<代码>代码var arr=[]；var formControl=$（“#formControl”）$（“.list-group-item”）。单击（function（）{if$.inArray（（this.data（“value”））{var index=array.indexOf（（this.data”）（.data（“value”）））；if（index>-1）{arr.splice（index，1）；}否则{arr.push（（this.data（“value”）；}$（.list-group-item”）.removeClass（“active”）；（this.addClass（“active”）；console.log（$（this）.data（“value”）；formControl.val（arr）；}

code

起初我不明白您需要数组。我将更新我的代码。它将用“-”分隔所有元素，所以您只需要在服务器上拆分它（您可以使用其他分隔符）。现在您可以选择多个元素，它们将被发送。例如，如果您选择first、second和fourth，则它们将作为control=first second Fourthin传递。如果您可以将答案检查为正确，则这将非常有用：）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
        .active {
            background-color: #EDEDED;
        }
    </style>
</head>
<body>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


    <ul>
        <li class="liElement" data-value="first">First</li>
        <li class="liElement" data-value="second">Second</li>
        <li class="liElement" data-value="third">Third</li>
        <li class="liElement" data-value="fourth">Fourth</li>
    </ul>
    <form action="index.html" method="get">
        <input type="hidden" id="formControl" name="control" value="">
        <button>Submit</button>
    </form>



    <script type="text/javascript">
        $(document).ready(function(){
            var liArr = [];
            var formControl = $("#formControl");

            $(".liElement").click(function(){
                $(this).toggleClass("active");

                var current = $(this).data("value");
                var index = liArr.indexOf(current);
                if (index != -1) {
                    liArr.splice(index, 1);
                } else {
                    liArr.push(current);
                }

                formControl.val(liArr.join('-'));
            });
        });
    </script>

</body>
</html>