如何使用 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

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

$(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 */
      }
    });
  });

});

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

---

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

我认为这是一个全新的问题，因为它的处理方式将取决于您的后端逻辑，但基本上，在视图端（您的 html 那里），将所有与表单相关的代码（输入，标签.. ) 到单个 form 标签中（而不是像你实际拥有的那样有多个 form 标签）

您可以通过将您删除的form 标记替换为div 标记来保持您的分步逻辑，保持相同的类名称，然后调整您的javascript 代码，使其使用divs 而不是@987654327 @s 处理步骤转换。