在jquery选项卡中插入表单，以便使用php在数据库中提交数据

我使用一个表单在三个不同的表中提交数据，它实际上是一个带有一个提交按钮的简单表单

但是现在我想把表单分为三个不同的选项卡，每个选项卡都有一个按钮，当页面加载时，第一个选项卡应该打开一个表单，该表单有个人详细信息，单击“继续”按钮时有一个“继续”按钮，第二个选项卡应该打开，其中包含表单的另一部分，最后一个选项卡有一个“提交”按钮

我不明白如何使用php和JQuery选项卡来完成它

这就是我写的代码

    <script type="text/javascript">
  function OtherWork(val){
   var element=document.getElementById('wtype');
      if(val=='other')
  element.style.display='block';
   else  
   element.style.display='none';
       }

</script> 

  <h2>Add New Entry</h2>
   <hr />
   <form action="processnewentry.php" method="post" name="myForm" onsubmit="return validateForm();" >
  <table width="560" border="0" cellspacing="5" cellpadding="0">
     <tr>
     <td width="234">Lead Name :</td>
     <td width="311"><input type="text" name="lename" /></td>
    </tr>
    <tr>
       <td width="234">Lead Date : (mm/dd/yyyy)</td>
       <td width="311"><input type="text" name="ldate" class="datepicker" /></td>
    </tr>
   <tr>
     <td width="234">Contact Person :</td>
     <td width="311"><input type="text" name="conper"  /></td>
  </tr>
   <tr>
    <td width="234">Company Name :</td>
    <td width="311"><input type="text" name="cname"  /></td>
   </tr>
      <tr>
    <td width="234">Mobile No. :</td>
    <td width="311"><input type="text" name="mobno"  /></td>
     </tr>
  <tr>
    <td width="234">Landline No. :</td>
   <td width="311"><input type="text" name="phone"  /></td>
  </tr>
  <tr>
    <td width="234">Address :</td>
    <td width="311"><textarea name="address" ></textarea></td>
   </tr>
   <tr>
    <td width="234">Email :</td>
    <td width="311"><input type="text" name="email" /></td>
  </tr>
   <tr>
   <td width="234">Alt Address :</td>
   <td width="311"><textarea name="altaddress" ></textarea></td>
   </tr>

   <tr>
    <td width="234">Work Type :</td>
    <td width="311"><select name="wtype" onchange='OtherWork(this.value);'>
    <option value="Website Designing">Website Designing</option>
   <option value="Android Application">Android Application</option>
   <option value="other">Other</option>
    </select><br />
    <input type="text" name="wtype" id="wtype" style='display:none;'/>
    </td>

  </select>

       </tr>
       <tr>
          <td width="234">Work Description :</td>
          <td width="311"><textarea name="wdesc" ></textarea></td>
        </tr>
          <tr>
         <td width="234">Expected Budget :</td>
          <td width="311"><input type="text" name="exbudget"  /></td>
          </tr>
            <tr>
          <td width="234">Lead Executive :</td>
           <td width="311"><select name="lexec">
            <?php
     $q=mysql_query('SELECT * FROM $table');
   while($rr=mysql_fetch_array($q))
       {
  $na=$rr['name'];
?>
       <option value="<?php echo $na;?>"><?php echo strtoupper($na);?></option>
   <?php } ?>
    </select></td>
      </tr>
      <tr>
    <td width="234">Lead Manager :</td>
        <td width="311"><select name="lmana">
       <?php
 $q=mysql_query('SELECT * FROM $table');
while($rr=mysql_fetch_array($q))
{
$na=$rr['name'];
?>
   <option value="<?php echo $na;?>"><?php echo strtoupper($na);?></option>
    <?php } ?>
    </select></td>
   </tr>
   <tr>
    <td width="234">Closing Date : (mm/dd/yyyy)</td>
    <td width="311"><input type="text" name="cldate" class="datepicker" /></td>
   </tr>
    <tr>
    <td width="234">Lead Status :</td>
    <td width="311"><select name="lstat">
     <option value="Hot">Hot</option>
     <option value="Warm">Warm</option>
     <option value="Cold">Cold</option>
     </select></td>
    </tr>
    <tr>
    <td width="234">Follow Up :</td>
    <td width="311"><textarea name="followup" ></textarea></td>
   </tr>
    <tr>
    <td width="234">Next Follow up : (mm/dd/yyyy)</td>
    <td width="311"><input type="text" name="nfoldate" class="datepicker" /></td>
 </tr>
   <tr>
   <td width="234">Remark if any :</td>
    <td width="311"><textarea name="remark" ></textarea></td>
  </tr>
  <tr>
    <td width="234">&nbsp;</td>
    <td width="311"><input name="submit" type="submit" value="Submit"  class="buttton" /></td>
    </tr>
 </table>
      </form>

功能其他工作（val）{
var元素=document.getElementById（'wtype'）；
如果（val==‘其他’）
element.style.display='block'；
其他的
element.style.display='none'；
}
添加新条目

潜在客户名称：
交付日期：（年月日）
联系人：
公司名称：
手机号码：
固定电话号码：
地址:
电邮：
Alt地址：
工作类型：
网站设计
Android应用程序
其他


工作描述：
预期预算：
首席执行官：
您的表单有3个部分（i.ir 3个不同的选项卡），因此为其字段提供3个不同的html类。
第一个选项卡上的字段如下所示：
第一个选项卡上的字段如下所示：
第一个选项卡上的字段如下所示：

首先，第二个和第三个选项卡上的字段将显示为“无”

现在单击第一个继续按钮，验证字段（如果需要），然后使用jquery使第一个选项卡上的字段显示无（即添加css属性）
例如

第二个继续按钮也一样。
点击第三个按钮（即提交），提交您的表格
您是否有代码伙伴。。？？
$("#first_proceed").click(function(){
   $(".first").css("display","none");
})