当前位置： 文江博客话题详情

乘以在JavaScript中提交后显示下一个DIV类的乘法表格？

发布于 2025-01-17 13:45:29 字数 5107 浏览 4 评论 0原文

我正在尝试创建一个飞行预订计划，要求用户输入其详细信息。当他们单击“储备飞行”时，然后向他们显示一份收据，并在其上打印其详细信息。

但是，这是我的JavaScript代码，应该显示下一个代码。函数ShowTab正常工作，但我无法弄清楚如何处理功能提交（n）。

var currentTab = 0;
showTab(currentTab);

function showTab(n) {
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Reserve Flight";
  } else {
    document.getElementById("nextBtn").innerHTML = "Reserve Flight";
  }
  fixStepIndicator(n)
}

function submit(n) {
  var x = document.getElementsByClassName("tab");
  if (n == 1 && !validateForm()) return false;
  x[currentTab].style.display = "none";
  currentTab = currentTab + n;
  if (currentTab >= x.length) {
    document.getElementById("regForm").submit();
    return false;
  }
  showTab(currentTab);
}

function validateForm() {
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  for (i = 0; i < y.length; i++) {
    if (y[i].value == "") {
      y[i].className += " invalid";
      valid = false;
    }
  }
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 10;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
body{
  font-family: sans-serif;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background: #ededed;
}
.container{
  top: 100px;
  max-width: 700px;
  width: 100%;
  background-color: #fff;
  padding: 25px 30px;
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}
.container .title{
  font-size: 25px;
  font-weight: 500;
  position: relative;
}

/*Input Box Sizes*/
.content form .user-details{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px 0 12px 0;
}
form .user-details .input-box{
  margin-bottom: 15px;
  width: calc(100% / 3 - 20px);
}
form .input-box span.details{
  display: block;
  font-weight: 100;
  margin-bottom: 5px;
  font-size: 12px;
}
.user-details .input-box input{
  height: 40px;
  width: 100%;
  outline: none;
  font-size: 15px;
  border-radius: 3px;
  padding-left: 15px;
  border: 1px solid #ccc;
  transition: all 0.3s ease;
}
form .button{
  height: 45px;
  margin: 35px 0;
}
.next-btn{
  height: 200%;
  width: 150%;
  margin-left: 400%;
  border-radius: 5px;
  border: none;
  color: #fff;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #2e69ff;
  display: inline-block;
}
form .next-btn input:hover{
  /* transform: scale(0.99); */
  background: #193f9e;
}

And my HTML 
<body>
  <div class="container">
    <div class="tab">
      <div class="title">Flight Regsitration</div>
      <br><br>
      <div class="content">
        <form id="regForm"> 

          <span class="details">Passenger Name</span>
          <div class="user-details">
            <div class="input-box">
            <input type="text" placeholder="" id="nameTitle">
            <span class="details">Title</span>
            </div>

            <div class="input-box">
            <input type="text" placeholder="" id="nameFirst" required>
            <span class="details">First Name</span>
            </div>

            <div class="input-box">
            <input type="text" placeholder="" id="nameLast" required>
            <span class="details">Last Name</span>
            </div>
          </div>

          <div>
            <button type="submit" class="next-btn" id="nextBtn">Reserve Flight</button>
           </div>
           
        </form>
      </div>
    </div>

    <div class="tab">
      <div class="title">Itinerary Receipt</div>
      <br><br>

      <table class="table" id="receipt">
      <tr>
        <th style="background-color: #dddddd;">Passenger Details</th>
        <th style="background-color: #dddddd;"></th>
      </tr>
      <tr>
        <td>Name Title</td>
        <td>Insert user input here</td>
       </tr>
       <tr>
        <td>First Name</td>
        <td>Insert user input here</td>
       </tr>
       <tr>
        <td>Last Name</td>
        <td>Insert user input here</td>
       </tr>
      <table>

      <br><br>
      <p>Thank you for patronizing our services.<p>
    </div>

  <script src="javascript-multistep.js"></script>
  </div>
</body>

原文

I am trying to create a flight reservation program that asks users to input their details. When they click 'Reserve flight', they are then shown a receipt on which their details are printed.

However, this is my javascript code that is supposed to show the next . The function showTab works correctly but I cannot figure out what to do with function submit(n).

var currentTab = 0;
showTab(currentTab);

function showTab(n) {
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Reserve Flight";
  } else {
    document.getElementById("nextBtn").innerHTML = "Reserve Flight";
  }
  fixStepIndicator(n)
}

function submit(n) {
  var x = document.getElementsByClassName("tab");
  if (n == 1 && !validateForm()) return false;
  x[currentTab].style.display = "none";
  currentTab = currentTab + n;
  if (currentTab >= x.length) {
    document.getElementById("regForm").submit();
    return false;
  }
  showTab(currentTab);
}

function validateForm() {
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  for (i = 0; i < y.length; i++) {
    if (y[i].value == "") {
      y[i].className += " invalid";
      valid = false;
    }
  }
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 10;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
body{
  font-family: sans-serif;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background: #ededed;
}
.container{
  top: 100px;
  max-width: 700px;
  width: 100%;
  background-color: #fff;
  padding: 25px 30px;
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}
.container .title{
  font-size: 25px;
  font-weight: 500;
  position: relative;
}

/*Input Box Sizes*/
.content form .user-details{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px 0 12px 0;
}
form .user-details .input-box{
  margin-bottom: 15px;
  width: calc(100% / 3 - 20px);
}
form .input-box span.details{
  display: block;
  font-weight: 100;
  margin-bottom: 5px;
  font-size: 12px;
}
.user-details .input-box input{
  height: 40px;
  width: 100%;
  outline: none;
  font-size: 15px;
  border-radius: 3px;
  padding-left: 15px;
  border: 1px solid #ccc;
  transition: all 0.3s ease;
}
form .button{
  height: 45px;
  margin: 35px 0;
}
.next-btn{
  height: 200%;
  width: 150%;
  margin-left: 400%;
  border-radius: 5px;
  border: none;
  color: #fff;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #2e69ff;
  display: inline-block;
}
form .next-btn input:hover{
  /* transform: scale(0.99); */
  background: #193f9e;
}

And my HTML 
<body>
  <div class="container">
    <div class="tab">
      <div class="title">Flight Regsitration</div>
      <br><br>
      <div class="content">
        <form id="regForm"> 

          <span class="details">Passenger Name</span>
          <div class="user-details">
            <div class="input-box">
            <input type="text" placeholder="" id="nameTitle">
            <span class="details">Title</span>
            </div>

            <div class="input-box">
            <input type="text" placeholder="" id="nameFirst" required>
            <span class="details">First Name</span>
            </div>

            <div class="input-box">
            <input type="text" placeholder="" id="nameLast" required>
            <span class="details">Last Name</span>
            </div>
          </div>

          <div>
            <button type="submit" class="next-btn" id="nextBtn">Reserve Flight</button>
           </div>
           
        </form>
      </div>
    </div>

    <div class="tab">
      <div class="title">Itinerary Receipt</div>
      <br><br>

      <table class="table" id="receipt">
      <tr>
        <th style="background-color: #dddddd;">Passenger Details</th>
        <th style="background-color: #dddddd;"></th>
      </tr>
      <tr>
        <td>Name Title</td>
        <td>Insert user input here</td>
       </tr>
       <tr>
        <td>First Name</td>
        <td>Insert user input here</td>
       </tr>
       <tr>
        <td>Last Name</td>
        <td>Insert user input here</td>
       </tr>
      <table>

      <br><br>
      <p>Thank you for patronizing our services.<p>
    </div>

  <script src="javascript-multistep.js"></script>
  </div>
</body>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

最终幸福

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文