我如何将下一步按钮转换为有效的提交按钮答案

【问题标题】：how do i convert a next button to a working submit button我如何将下一步按钮转换为有效的提交按钮
【发布时间】：2023-01-24 05:09:43
【问题描述】：

所以我正在尝试构建一个包含两个选项卡的多步骤表单，选项卡有一个用户名，而选项卡二有密码，在页面加载时，选项卡一是可见的，如果我单击下一步按钮，我将隐藏选项卡 1 并显示选项卡 2使用 jquery，但是当显示第二个选项卡时，我发现很难转换下一个按钮提交按钮以使我能够提交表单。

试过这个

$(function () {
    $('.tab1').show();

    $('#cracc').show();

    $('#nextBtn').on('click', () => {
        /* $('#nextBtn').html('Submit'); */
        $('.tab1').hide();
        $('#cracc').hide();
        $('.tab2').show(() => {
           $('.forgotPass').show(); 
           $('#nextBtn').html('Submit')
          
        })  
       
     })
        
        


   if (('.tab2').show()) {
        $('#nextBtn').attr('type', 'submit')
         $('#nextBtn').on('click', () => {
            $('form').submit(() => {
                alert('submitted')
            })
        })
   }

    

    
})

【问题讨论】：

执行与选项卡相同的操作 - 渲染/包含两个按钮，然后根据需要显示/隐藏您想要的按钮。根据您的 HTML，您可以通过 css 自动显示按钮/显示，而无需 JS。
或者，在 $('#nextBtn').on('click', 中检查您所在的选项卡
我建议反对改变属性。它可能会工作，但它最终会处于错误状态的风险似乎太大（例如，如果你添加一个后退/重置按钮然后不添加重置代码 - 尽管可以说同样的非 css (js) 隐藏/显示解决方案）
我同意那个。更好的方法是使用两个不同的按钮并改变它们的可见性。
是的，我可以使用另一个按钮，显示/隐藏可见性，但我相信我应该可以在两个属性之间切换时使用一个元素，即在 tab1 上，按钮应该在下一个，在 tab2 上应该是一个提交按钮，它确实有效。

标签： jquery forms button bootstrap-5

【解决方案1】：

您需要更改按钮类型属性以这样提交：

<button type="submit">Submit</button>

见this。

【讨论】：

【解决方案2】：

这是一个 jQuery UI 示例。

$(function() {
  function openTab(i) {
    // Conditionally trigger activation of a tab
    $("#showUser").html($("#user").val());
    if (i == 1) {
      if ($("#user").val() != "") {
        $("#tabs li").eq(i).find("a").click();
      } else {
        return false;
      }
    } else {
      $("#tabs li").eq(i).find("a").click();
    }
  }

  function submitForm(u, p) {
    // Submit Username and Password to a script via AJAX
    $.post("login.php", {
      user: u,
      password: p
    }, function(result) {
      if (result === "success") {
        window.location.href = "portal-entry.php"
      } else {
        openTab(0);
        $("#error").html(result.error);
      }
    })
  }

  $("#tabs").tabs({
    beforeActivate: function(e, ui) {
      // Prevent moving forward without filling in Username
      if ($("#user").val() == "") {
        $("#user").addClass("ui-state-error");
        return false;
      }
      $("#user").removeClass("ui-state-error");
    }
  });

  $("#nextBtn, #submitBtn").button();

  $("#nextBtn").click(function() {
    openTab(1);
  });

  $("#submitBtn").click(function() {
    submitForm($("#user").val(), $("#pass").val());
  })
});

.ui-tabs div[id^='tabs-']>* {
  display: block;
  margin: 10px 0;
}

#user, #pass, #showUser {
  width: 200px;
  padding: 3px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">User Name</a></li>
    <li><a href="#tabs-2">Password</a></li>
  </ul>
  <div id="tabs-1">
    <div id="error">&nbsp;</div>
    <input type="text" id="user" placeholder="john@smith.com" class="ui-widget" />
    <button id="nextBtn">Next</button>
  </div>
  <div id="tabs-2">
    User: <span id="showUser" class="ui-widget ui-widget-content"></span>
    <input type="password" id="pass" />
    <button id="submitBtn">Login</button>
  </div>
</div>

在这里，您可以看到如何通过单击按钮来更改选项卡。这使用基本检查来确认用户已在文本字段中输入了一些值。

此示例使用 AJAX 而不是传统的 Form 元素。

【讨论】：