我希望我的php表单提交数据并在同一页面上重定向，但选项卡不同

Question

我在同一页面上有一个包含四个不同部分的“创建简历”页面，每个部分都有自己的数据库表。 我想在提交它时重定向到我在“提交”按钮中给出的另一个ID上。

<div class="panel-body">
<ul class="nav nav-tabs nav-justified m-12" role="tablist">
   <li id="li1" class="active border-right"><a href="#cinfo"  role="tab" data-toggle="tab">Contact Information</a></li>
   <li id="li2"><a href="#binfo" role="tab" data-toggle="tab">Basic Information</a></li>
   <li id="li3"><a href="#einfo" role="tab" data-toggle="tab">Education Details</a></li>
</ul>
<div class="tab-content">
   <div class="tab-pane fade active in" id="cinfo">
      <form method="POST" enctype="multipart/form-data">
         <div class="form-group col-md-6 p-r">
            <label>Professional Title</label>
            <input type="text" name="title" class="form-control" required="required" />
         </div>
         <div class="form-group col-md-6 p-l">
            <label>First Name</label>
            <input type="text" name="fname" class="form-control" required="required" />
         </div>
         <div class="form-group col-md-6 p-r">
            <label>Last name</label>
            <input type="text" name="lname" class="form-control" required="required" />
         </div>
         <div class="form-group col-md-6 p-l">
            <label>Email</label>
            <input type="email" name="mail" class="form-control" required="required" />
         </div>
         <div class="form-group col-md-6 p-r">
            <label>Phone Number</label>
            <input type="text" name="phone" class="form-control" required="required" />
         </div>
         <!-- <div class="col-md-4 p-l"> -->
         <a href="#binfo"><button id="btn1" type="submit" name="cinfo_btn" class="btn btn-default btn-block">Next</button></a>
         <!-- </div> -->
      </form>
   </div>
   <!-- Basic Information -->
   <div class="tab-pane fade" id="binfo">
      <form method="POST" enctype="multipart/form-data">
         <div class="form-group col-md-6 p-l">
            <label>Job Title</label>
            <input type="text" name="jobtitle" class="form-control" />
         </div>
         <div class="form-group col-md-6 p-r">
            <label>Position</label>
            <input type="text" name="position" class="form-control" />
         </div>
         <div class="form-group col-md-6 p-l">
            <label>Years of Experience</label>
            <input type="text" name="exp" class="form-control" />
         </div>
         <a href="#einfo"><button id="btn2" type="submit" name="einfo_btn" class="btn btn-default btn-block">Next</button></a>
         <!-- </div> -->
      </form>
   </div>
</div>

Answer 1

最好的方法是使用Ajax。 使用ajax提交第一个表单，然后响应成功回调，只需在下一个选项卡上触发click事件，然后它将转到您指定的选项卡。

将此标签转到第二​​个标签。

 request1 = $.ajax({
            url: "url",
            type: "POST",
            data:  yourdata
        });
        request1.done(function (response, textStatus, jqXHR) {
              $('#li2').trigger('click')
         });

将此标签转到第3个标签。

 request2= $.ajax({
            url: "url",
            type: "POST",
            data:  yourdata
        });
        request2.done(function (response, textStatus, jqXHR) {
              $('#li3').trigger('click')
         });