Question

我在提交表单时遇到问题，并且还更改了

这样的标签

<ul class="nav nav-tabs">
    <li><a href="#tab1" data-toggle="tab">Enter Your Personal Details </a></li>

    <li><a href="#tab2" data-toggle="tab">Enter Your company Details </a></li>
</ul>

<div class="tab-content">
   <div class="tab pane" id="tab1">
<form method="post" action="self.php">   

    <input type="text">   

   <input type= "submit" value="save">

   </div>

<div class="tab pane" id="tab2">

    <h3>Thank you for submitting your form check your email</h3>
    <h2>Now input your company info</h2>

   </div>


</div>

如果点击提交按钮，则显示tab2

Answer 1

问题是，要以常规方式提交表单，需要加载页面。为了解决这个问题，我认为你有两个选择：

只需使用表单包装tab div，即可将所有选项卡设置为单个表单。如果您这样做，则必须等到所有选项卡中的所有字段都填写完毕，然后处理表单提交。
使用AJAX通过JavaScript / jQuery发送表单数据。如果你没有使用AJAX的经验，这可能会有点困难，但看看here让你自己开始。

无论哪种方式，请注意<input type="submit">标准会在点击时发送表单。如果您只想看按钮并希望绕过此行为，请改用<button id="tab1-button">Save</button>。出于下面示例的目的，假设您切换到<button>元素并给它上面的id，您应该继续使用JavaScript / jQuery部分。

$('#tab1-button').click(function (e) {
    e.preventDefault(); //This prevents the default behaviour or #tab1-button, in case you still use a input type="submit"

    /* In case you want to use ajax, it should go here */

    $('#tab2').tab('show'); //Switching tab
});

我在提交表单和更改标签时遇到问题

1 个答案: