如何使用jQuery提交多个表单数据？

Question

我有8个表单都是独立的，并在css中设置为滑块样式，单击后面或下一个按钮可以访问每个表单。那么当我点击最后一个按钮或最后一个滑块上的下一个按钮时，如何一次提交所有表单数据。 现在，如果我使用jQuery .submit（）函数提交我的数据，则只提交最后的表单数据。我希望一次提交所有表单数据。任何修复或解决方案都非常感谢。谢谢！

<% include partials/header %>

<div class="container overalls">
    <div class = "box-survey">
       <div class = "question">
        <p>1 | What software stack do you prefer to code in ?</p>
    </div>
    <div class = "answers">
        <form action="/survey" method="POST" class = "answer-list">
            <ul>
                <li class = "options1">
                    <input type="radio" value = "1" name = "options1" id = "r1">
                    <label for="r1">MEAN Stack</label>
                </li>
                <hr>
                <li class = "options1">
                    <input type="radio" value = "2" name = "options1" id = "r2">
                    <label for="r2">LAMP Stack</label>
                </li>
                <hr>
                <li class = "options1">
                    <input type="radio" value = "3" name = "options1" id = "r3">
                    <label for="r3">MERN Stack</label>
                </li>
                <hr>
                <li class = "options1">
                    <input type="radio" value = "4" name = "options1" id = "r4">
                    <label for="r4">Other Stacks</label>
                </li>
            </ul>
        </form>
    </div>
</div>
<div class = "box-survey">
    <div class = "question">
        <p>2 | What software stack do you prefer to code in ?</p>
    </div>
    <div class = "answers">
        <form action="/survey" method="POST" class = "answer-list">
            <ul>
                <li class = "options2">
                    <input type="radio" value = "5" name = "options2" id = "r5">
                    <label for="r5">MEAN Stack</label>
                </li>
                <hr>
                <li class = "options2">
                    <input type="radio" value = "6" name = "options2" id = "r6">
                    <label for="r6">LAMP Stack</label>
                </li>
                <hr>
                <li class = "options2">
                    <input type="radio" value = "7" name = "options2" id = "r7">
                    <label for="r7">MERN Stack</label>
                </li>
                <hr>
                <li class = "options2">
                    <input type="radio" value = "8" name = "options2" id = "r8">
                    <label for="r8">Other Stacks</label>
                </li>
            </ul>
        </form>
    </div>
</div>
<div class = "box-survey">
    <div class = "question">
        <p>3 | What software stack do you prefer to code in ?</p>
    </div>
    <div class = "answers">
        <form action="/survey" method="POST" class = "answer-list">
            <ul>
                <li class = "options3">
                    <input type="radio" value = "9" name = "options3" id = "r9">
                    <label for="r9">MEAN Stack</label>
                </li>
                <hr>
                <li class = "options3">
                    <input type="radio" value = "10" name = "options3" id = "r10">
                    <label for="r10">LAMP Stack</label>
                </li>
                <hr>
                <li class = "options3">
                    <input type="radio" value = "11" name = "options3" id = "r11">
                    <label for="r11">MERN Stack</label>
                </li>
                <hr>
                <li class = "options3">
                    <input type="radio" value = "12" name = "options3" id = "r12">
                    <label for="r12">Other Stacks</label>
                </li>
            </ul>
        </form>
    </div>
</div>
<div class = "box-survey">
    <div class = "question">
        <p>4 | What software stack do you prefer to code in ?</p>
    </div>
    <div class = "answers">
        <form action="/survey" method="POST" class = "answer-list">
            <ul>
                <li class = "options4">
                    <input type="radio" value = "13" name = "options4" id = "r13">
                    <label for="r13">MEAN Stack</label>
                </li>
                <hr>
                <li class = "options4">
                    <input type="radio" value = "14" name = "options4" id = "r14">
                    <label for="r14">LAMP Stack</label>
                </li>
                <hr>
                <li class = "options4">
                    <input type="radio" value = "15" name = "options4" id = "r15">
                    <label for="r15">MERN Stack</label>
                </li>
                <hr>
                <li class = "options4">
                    <input type="radio" value = "16" name = "options4" id = "r16">
                    <label for="r16">Other Stacks</label>
                </li>
            </ul>
        </form>
    </div>
</div>
<div class = "scroll-list">
    <div class="backB .col-md-2" onclick="plusDiv(-1)">
        <div class = "changer-circle-diff"></div>
        <button class="button-back">Back</button>
    </div>
    <div class = "changer-circle .col-md-1" id = "circle1" onclick = "currentDiv(1)"></div>
    <div class = "changer-circle .col-md-1" id = "circle2" onclick = "currentDiv(2)"></div>
    <div class = "changer-circle .col-md-1" id = "circle3" onclick = "currentDiv(3)"></div>
    <div class = "changer-circle .col-md-1" id = "circle4" onclick = "currentDiv(4)"></div>
    <div class="nextB .col-md-2" onclick="plusDiv(1)"> 
        <button class="button-next">Next</button>  
        <div class = "changer-circle-diff"></div> 
    </div>                                                     
</div>

<% include partials/footer %>

Answer 1

正如评论中所说，只用一种形式来处理它是最好的解决方案。 话虽这么说，如果您仍想单独发布它们，您仍然可以使用：

eq(variables['task.A.status'], 'failure')

将ready（）中的代码添加到处理下一个/上一个动作的任何函数中，并检查它是否是最后一个或不是。没有上述函数代码，无法提供更多代码

回答有关如何使用单一表单的评论：

我认为这是一个全新的问题，因为它的处理方式取决于你的后端逻辑，但基本上，在视图方面（你的html那里），把你所有的代码都放在表格上（输入，标签..）到一个$(document).ready( function() { $('form').each(function() { var form = $(this); $.ajax({ type: "POST", url: form.attr('action'), data: form.serialize(), success: function(response){ console.log(response); /* Or do anything else you need to do */ } }); }); }); 标记（而不是像你实际拥有的多个form标记）

您可以通过替换form标记移除的form标记，保留相同的类名称，然后调整您的javascript代码，使其使用{{1}来保持您的分步逻辑}而不是div来处理步骤转换。