Question

我有一个非常大的表格，基本上是一份调查问卷。

它有19个问题，其中一些问题在回答时Yes还有1-5个问题下拉。

我现在这样做的方法是使用jQuery .change()和.hide() / .show()。

如果没有子问题的问题的答案是Yes，则会显示带有日期，文本区域和文件输入的下拉列表。如果带有子问题或子问题的问题的答案为Yes，那么当答案Yes有一个带有日期，文本区域和文件输入的下拉表单时，会出现另外1-5个问题。

处理标记，JS / jQuery以及将数据发送到后端的最佳方法是什么？

截至目前，我正在做类似这样的事情，这只能解答是或否：

var answers = [];

for(var i = 1; i <= 42; i++) {
    var question = $('#q' + i + '');

    if(question.is(':checked'))
        var answer = 'Yes';
    else
        var answer = 'No';

    answers.push({
        'question': answer
    });
}

var content = {
    'answers': answers
};

$.ajax({
    url: '/questions',
    type: 'POST',
    data: content,
    success: function(result) {
        var result = JSON.stringify(result);
        console.log(result);
    }
});

我在42处停止循环，因为有42个问题。这会使表单及其各自的类/ id名称变得复杂，并获取这些值并发送数据。

执行此操作的最佳方法是发送许多日期，文本和文件输入字段..？

Answer 1

我认为最好的方法是使用简单的旧HTML表单和一些jQuery来帮助切换可见/不可见的内容。

基本上，'toggle-trigger'类被添加到触发其他内容区域的元素中。每个切换触发器都需要知道要显示/隐藏的切换区域，因此也会向其添加数据切换区域。

一个例子：

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".toggle-trigger").change(function(event) {
                $(".toggle-trigger").each(function(index, element) {
                    var $element = $(element);
                    var $toggleArea = $($element.data("toggle-area"));

                    if($element.is(":checked")) {
                        $toggleArea.show();
                    } else {
                        $toggleArea.hide();
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form action="/questions" method="post">
        <div>
            This is question one.
            <label>Yes<input class="toggle-trigger" type="radio" name="q1" value="Yes" data-toggle-area="#q1-yes" /></label>
            <label>No<input class="toggle-trigger" type="radio" name="q1" value="No" data-toggle-area="#q1-no"/></label>

            <div id="q1-yes" style="display:none;">
                This is question one subquestion for YES.
                <input type="date" name="q1-date"/>
            </div>
            <div id="q1-no" style="display:none;">
                This is question one subquestion for NO.
                <input type="file" name="q1-file"/>
            </div>
        </div>
        <input type="submit" value="Submit" />
    </form>
</body>
</html>

处理带有问题，子问题和表单的jQuery / HTML表单的最佳方法？

1 个答案: