javascript - 如何使用 Next Button 或 Tab 通向另一个 Form 创建多个表

标签 javascript jquery html css twitter-bootstrap

我有一个小问题，我真的不知道如何处理，我创建了一个包含 3 个段的表单(给这些段类标签)，现在我想为表单创建一个下一个和上一个按钮，它将允许用户导航到标签。但默认情况下或在加载时，我只想让 first Tab 当前可见。

.col-lg-9 {
    float: right;
    margin-top: 0px;
    padding: 0px;
}

.borderexample {
    border-color: rgb(75, 218, 75);
    border-style: solid;
    border: 40px;
    padding: 1rem;
}

body {
    background-color: gray;
}

.form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}

.form-inline .form-control {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}

.form-inline .form-group {
    margin-right: 20px;
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <title>Hello, world!</title>
  <link rel="stylesheet" href="3.css">
</head>

<body>
  <form id="fillForm" action="#">
    <div class="tab"><span class="info">Corporate Information: (fill appropriate box)</span>
      <br /> <br />
      <div class="form-group">
        Company Name:
        <input type="text" class="form-control" id="CName">
      </div>
      <div class="form-group">
        <label for="Company_office_address">Company Office Address: </label>
        <input type="text" class="form-control" id="Company_office_address">
      </div>
      <!--inline form starts here-->
      <div class="form-inline">
        <div class="form-group" id="form-inline">
          <label for="town">Town:* </label>
          <input type="text" class="form-control" id="Town" placeholder="Town">
        </div>
        <div class=" form-group" id="form-inline">
          City:*
          <input type="text" class="form-control" id="City" placeholder="City">
        </div>

        <div class="form-group" id="form-inline">
          State:* <input type="text" class="form-control" id="State" placeholder="State">
        </div>
        <div class="form-group" id="form-inline">
          Country:*
          <input type="text" class="form-control" id="Country" placeholder="Country">
        </div>

        <div class="form-group" id="form-inline">
          Incorporation Number:*
          <input type="text" class="form-control" id="Inumber">
        </div>
        <div class="form-group" id="form-inline">
          Date Incorporated:*
          <input type="text" class="form-control" id="Dincorporated">
        </div>

        <div class="form-group" id="form-inline">
          State of Incorporation:*
          <input type="text" class="form-control" id="S_incorporation">
        </div>
        <div class="form-group" id="form-inline">
          Country of Incorporated:*
          <input type="text" class="form-control" id="C_incorporated">
        </div>

        <div class="form-group" id="form-inline">
          Company Website:*<input type="text" class="form-control" id="C_website">
        </div>
        <div class="form-group" id="form-inline">
          Company Email:*
          <input type="email" class="form-control" id="C_email">
        </div>

        <div class="form-group" id="form-inline">
          FAX (if applicable):*
          <input type="text" class="form-control" id="Fax">
        </div>
        <div class="form-group" id="form-inline">
          Company Phone Number:*
          <input type="text" class="form-control" id="C_phone">
        </div>
      </div>
    </div>
    <div class="form-group">
      Tax Identification Number (TIN):*
      <input type="text" class="form-control" id="TIN">
    </div>

    <div class="form-inline">
      <div class="form-group">
        Occupation:
        <input type="text" class="form-control" id="occupation">
      </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
      <div class="form-group">
        BVN:
        <input type="text" class="form-control" id="bvn">
      </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
      <div class="form-group">
        Income Source:
        <input type="text" class="form-control" id="incomeSource">
      </div>
    </div><br /> <br />


    <div class="tab"><span class="info">Other Relevant Information</span>

      <div class="form-group" id="form-inline">
        <label for="RLA">Risk Location Address(Where applicable)</label>
        <input type="text" class="form-control" id="RLA" placeholder="Risk Location">
      </div>

      <div class="form-group" id="form-inline">
        <label for="RLA">Risk Location Address(Where applicable)</label>
        <input type="text" class="form-control" id="RLA" placeholder="Risk Location">
      </div>

      <div class="form-group">
        <label for="RLA">Risk Location Address(Where applicable)</label>
        <input type="text" class="form-control" id="RLA" placeholder="Risk Location">
      </div>

      <div class="form-group">
        <label for="RLA">Risk Location Address(Where applicable)</label>
        <input type="text" class="form-control" id="RLA" placeholder="Risk Location">
      </div>

      <div class="form-group">
        <label for="RLA">Risk Location Address(Where applicable)</label>
        <input type="text" class="form-control" id="RLA" placeholder="Risk Location">
      </div>

      <div class="form-group">
        <label for="RLA">Risk Location Address(Where applicable)</label>
        <input type="text" class="form-control" id="RLA" placeholder="Risk Location">
      </div>


    </div>
  </form>


  </div><br /> <br />
  <!--The second Tab Ends Here-->


  <div class="tab"><span class="info">BROKER'S INFORMATION</span>
    <div class="form-inline">
      <div class="form-group">
        Name: <input type="text" class="form-control" id="Brokers">
      </div>
      <div class="form-group">
        NAICOM Reg. No.:<input type="text" class="form-control" id="Naicom">
      </div>
    </div>
    <span class="broker"> (The Broker hereby certify that all the required documents as requested by law
      collected from the Client)
    </span>
    <br /><br />

    <div class="form-group">
      Signature & Stamp/Seal of Broker
      <input type="text" class="form-control" id="Signature">
    </div>
  </div>
  <br /><br />
  <!--the Brokers tab ends here-->
  </form>
  </div><br /><br />
  <!--The first Tab ends here-->

  </div>
  <!--Container ends here-->

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
  </script>
</body>

</html>

最佳答案

您可以使用三个 .html文件并粘贴三个 tabs 中每一个的代码在这三个文件中，您可以给出 tab 的下一个和上一个文件的链接。通过添加指向 anchor 标记的链接 <a>在下一个和上一个 <button>如下；

Plunker

注意:我添加了外部 IDE，因为它不可能创建三个 .html SO 片段中的文件。

更新:如果您不想创建三个文件并相互引用，您可以使用JS。如下；

tab = document.getElementsByClassName('tab')
btn = document.getElementsByClassName('btn1')
tab[1].style.display = 'none'
tab[2].style.display = 'none'
btn[0].classList.add("disabled")

function next() {
    if (tab[0].style.display != 'none') {
        tab[0].style.display = 'none'
        tab[2].style.display = 'none'
        tab[1].style.display = 'block'
        btn[0].classList.remove("disabled")
    }
    else if(tab[1].style.display != 'none'){
        tab[0].style.display = 'none'
        tab[2].style.display = 'block'
        tab[1].style.display = 'none'
        btn[1].classList.add("disabled")        
    }
}

function previous() {
    if (tab[0].style.display != 'none') {
        
    }
    else if(tab[1].style.display != 'none'){
        tab[0].style.display = 'block'
        tab[2].style.display = 'none'
        tab[1].style.display = 'none'
        btn[0].classList.add("disabled")        
    }
    else{
        tab[0].style.display = 'none'
        tab[2].style.display = 'none'
        tab[1].style.display = 'block'
        btn[1].classList.remove("disabled")
    }
}
// alert(tab[1].style.display)
.disabled{
    border: 1px solid #999999;
    background-color: #cccccc;
    color: #666666;}
.disabled:hover{
    cursor: default;
}
.col-lg-9 {
    float: right;
    margin-top: 0px;
    padding: 0px;
}

.borderexample {
    border-color: rgb(75, 218, 75);
    border-style: solid;
    border: 40px;
    padding: 1rem;
}

body {
    background-color: gray;
}

.form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}

.form-inline .form-control {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}

.form-inline .form-group {
    margin-right: 20px;
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <title>Hello, world!</title>
  <link rel="stylesheet" href="3.css">
</head>

<body>
  <form id="fillForm" action="#">
    <div class="tab"><span class="info">Corporate Information: (fill appropriate box)</span>
      <br /> <br />
      <div class="form-group">
        Company Name:
        <input type="text" class="form-control" id="CName">
      </div>
      <div class="form-group">
        <label for="Company_office_address">Company Office Address: </label>
        <input type="text" class="form-control" id="Company_office_address">
      </div>
      <!--inline form starts here-->
      <div class="form-inline">
        <div class="form-group" id="form-inline">
          <label for="town">Town:* </label>
          <input type="text" class="form-control" id="Town" placeholder="Town">
        </div>
        <div class=" form-group" id="form-inline">
          City:*
          <input type="text" class="form-control" id="City" placeholder="City">
        </div>

        <div class="form-group" id="form-inline">
          State:* <input type="text" class="form-control" id="State" placeholder="State">
        </div>
        <div class="form-group" id="form-inline">
          Country:*
          <input type="text" class="form-control" id="Country" placeholder="Country">
        </div>

        <div class="form-group" id="form-inline">
          Incorporation Number:*
          <input type="text" class="form-control" id="Inumber">
        </div>
        <div class="form-group" id="form-inline">
          Date Incorporated:*
          <input type="text" class="form-control" id="Dincorporated">
        </div>

        <div class="form-group" id="form-inline">
          State of Incorporation:*
          <input type="text" class="form-control" id="S_incorporation">
        </div>
        <div class="form-group" id="form-inline">
          Country of Incorporated:*
          <input type="text" class="form-control" id="C_incorporated">
        </div>

        <div class="form-group" id="form-inline">
          Company Website:*<input type="text" class="form-control" id="C_website">
        </div>
        <div class="form-group" id="form-inline">
          Company Email:*
          <input type="email" class="form-control" id="C_email">
        </div>

        <div class="form-group" id="form-inline">
          FAX (if applicable):*
          <input type="text" class="form-control" id="Fax">
        </div>
        <div class="form-group" id="form-inline">
          Company Phone Number:*
          <input type="text" class="form-control" id="C_phone">
        </div>
      </div>
      <div class="form-group">
        Tax Identification Number (TIN):*
        <input type="text" class="form-control" id="TIN">
      </div>

      <div class="form-inline">
        <div class="form-group">
          Occupation:
          <input type="text" class="form-control" id="occupation">
        </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <div class="form-group">
          BVN:
          <input type="text" class="form-control" id="bvn">
        </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <div class="form-group">
          Income Source:
          <input type="text" class="form-control" id="incomeSource">
        </div>
      </div><br /> <br />
    </div>



    <div class="tab"><span class="info">Other Relevant Information</span>

      <div class="form-group" id="form-inline">
        <label for="RLA">Risk Location Address(Where applicable)</label>
        <input type="text" class="form-control" id="RLA" placeholder="Risk Location">
      </div>

      <div class="form-group" id="form-inline">
        <label for="RLA">Risk Location Address(Where applicable)</label>
        <input type="text" class="form-control" id="RLA" placeholder="Risk Location">
      </div>

      <div class="form-group">
        <label for="RLA">Risk Location Address(Where applicable)</label>
        <input type="text" class="form-control" id="RLA" placeholder="Risk Location">
      </div>

      <div class="form-group">
        <label for="RLA">Risk Location Address(Where applicable)</label>
        <input type="text" class="form-control" id="RLA" placeholder="Risk Location">
      </div>

      <div class="form-group">
        <label for="RLA">Risk Location Address(Where applicable)</label>
        <input type="text" class="form-control" id="RLA" placeholder="Risk Location">
      </div>

      <div class="form-group">
        <label for="RLA">Risk Location Address(Where applicable)</label>
        <input type="text" class="form-control" id="RLA" placeholder="Risk Location">
      </div>


    </div>
  </form>

  <div class="tab"><span class="info">BROKER'S INFORMATION</span>
    <div class="form-inline">
      <div class="form-group">
        Name: <input type="text" class="form-control" id="Brokers">
      </div>
      <div class="form-group">
        NAICOM Reg. No.:<input type="text" class="form-control" id="Naicom">
      </div>
    </div>
    <span class="broker"> (The Broker hereby certify that all the required documents as requested by law
      collected from the Client)
    </span>
    <br /><br />

    <div class="form-group">
      Signature & Stamp/Seal of Broker
      <input type="text" class="form-control" id="Signature">
    </div>
  </div>
  <button onclick="previous()" class="btn1">Previous</button>  <button onclick="next()" class="btn1">Next</button>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
  </script>
  <script src="1.js"></script>
</body>

</html>

关于javascript - 如何使用 Next Button 或 Tab 通向另一个 Form 创建多个表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55921065/

上一篇：javascript - 如何取消设置数组中的条目？

下一篇：javascript - 如果使用 React 对象数组为空，如何显示消息？

相关文章：

Javascript 幻灯片放映使页面宽度变大

javascript - 按容器比例调整视频大小

javascript - 暴力破解字符串匹配javascript

javascript - 部署reactJS应用程序 - 生产模式下的路由问题

javascript - jquery 下拉菜单不起作用

javascript - 了解 jQuery .change 事件

html - Tabset 不显示选项卡内容

javascript - JS。如何用字符串表示的另一个元素/文本替换 html 元素？

javascript - 在 querySelectorAll() 中插入变量不起作用

jquery - div 不会定位到容器的顶部

©2024 IT工具网  联系我们