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

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

javascript php jquery html forms

Javascript 处理带有问题、子问题和表单的jQuery/HTML表单的最佳方法？,javascript,php,jquery,html,forms,Javascript,Php,Jquery,Html,Forms,我有一个很大的表格，基本上是一个问卷它有19个问题，其中一些问题在回答Yes时会有1-5个问题下拉列表我现在这样做的方式是使用jQuery.change（）和.hide（）/.show（）如果没有子问题的问题的答案是Yes，则会出现一个包含日期、文本区域和文件输入的下拉列表。如果对一个或多个子问题的回答是Yes，则在回答Yes时，会出现1-5个以上的问题，这些问题会有一个带有日期、文本区域和文件输入的下拉表单处理标记、JS/jQuery和将数据发送到后端的最佳方法是什么到目前为止，我正

我有一个很大的表格，基本上是一个问卷

它有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);
    }
});

var answers=[]；
对于（var i=1；i我认为最好的方法是使用一个简单的旧HTML表单和一点jQuery来帮助切换可见/不可见的内容
基本上，“toggle trigger”类被添加到触发其他内容区域的元素中。每个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>


$（文档）.ready（函数（）{
$（“.toggle trigger”）.change（函数（事件）{
$（“.toggle触发器”）。每个（函数（索引，元素）{
变量$element=$（element）；
var$toggleArea=$（$element.data（“切换区域”）；
如果（$element.is（“：checked”））{
$toggleArea.show（）；
}否则{
$toggleArea.hide（）；
}
});
});
});
这是第一个问题。
对
不
这是问题一的子问题。
这是第1题的子题。
我认为如果您使用jQuery来构建和发布表单，您可能工作得太辛苦了。让简单的旧html表单来做这件事，然后使用jQuery来显示/隐藏表单的哪些部分是可访问的。这将如何工作？每个问题都是不同的。它看起来像*40ish吗？是的，我希望您有多对切换触发器和切换区域。它必须使用AJAX，因为它是向导的一部分。在回答这些问题之前，用户还填写了其他3个表单。我假设其他3个表单已经用jquery提交了？为什么不发布这些表单中的每一个，让服务器完成它的工作，然后让您进入wiz的下一步阿尔德？