如何在多页面中制作一个 JavaScript 表单向导，其中包含下一页，并取消并返回并提交最后一页

how can i make a javascript form wizard in muilt pages with a next and cancel and back and submit the last page

本文关键字：一页 最后 向导 表单 包含下 返回 JavaScript 提交 取消 一个      更新时间：2023-09-26

我正在我的网站上创建一个带有多个页面的JavaScript表单向导带有下一个和取消，返回并在最后一页上提交

我尝试过谷歌，但它显示一页表单向导

请你能帮我吗

基本上，

您将用包含页面ID的div将表单的每个"页面"括起来，或者为每个表单元素提供一个参数来指示它在哪个页面上。

然后，您将使用javascript创建两个按钮和点击监听器。根据可见页面，仅显示上一个、下一个或两者。最初，您将不属于第一页的所有div 或元素设置为不可见，并且在上一个/下一个按钮上，您将更改div/表单元素的可见性。

假设jQuery看起来像这样：

<form>
   <div class="form_page" id="page1">
      <input type="text" name="field1" value="field1" />
   </div>
   <div class="form_page" id="page2">
      <input type="text" name="field2" value="field2" />
      <input type="submit" value="submit" />
   </div>
</form>
<div id="actions"></div>

<script>
    $(document).ready(function() {
        var numPages = $('.form_page').length;
        var currentPage = 1;
        var $actions = $('#actions');
        for(i = 2; i <= numPages; i++) {
            $('#page' + i).hide();     
        }
        var $prev = $('<input type="button" value="prev">').click(function() {
            if (currentPage > 1) {
                $('#page' + currentPage).hide();
                currentPage--;
                $('#page' + currentPage).show();
            }
        }).appendTo($actions);
        var $next = $('<input type="button" value="next">').click(function() {
            if (currentPage < numPages) {
                $('#page' + currentPage).hide();
                currentPage++;
                $('#page' + currentPage).show();
            }
        }).appendTo($actions);
    });
</script>

还将示例添加到 JSFIDDLE

相关文章：