堆棧內存溢出
  簡體   English   中英

Javascript 頁面重定向在注冊表單提交

[英]Javascript page redirect on Signup form submission

 原文  2020-06-30 19:18:23  2   2    javascript/ css

問題描述

我對前端開發非常陌生，我正在嘗試編寫我的第一個代碼來創建注冊表單。 要求

  1. 我想創建一個簡單的注冊表單，其中包含名字、姓氏和密碼以及一個注冊和取消按鈕。
  2. 注冊按鈕應采用表單數據並在單擊時顯示
  3. 顯示表單數據的結果頁面也應該有一個“確定”按鈕，可以將其帶到另一個頁面。

問題區域我能夠成功地獲得步驟 1 和 2 的工作代碼：所以我有一個簡單的 CSS 用於表單，其中包含名字和姓氏、密碼、注冊和取消按鈕的輸入，並且能夠顯示如下結果：名字姓氏，您現在已注冊，但我被困在第 3 步，因為我無法使用“確定”按鈕將我帶到另一個頁面。

如果有人可以在這里幫助我，我將不勝感激。

這是代碼：

<html>
<script>
  function formDisplay() {
    var first = document.getElementById("fname").value;
    var last = document.getElementById("lname").value;
    var result = first + ' ' + last + ', ' + ' ' + "You are now Signed up ";
    document.getElementById('display').textContent = result;
    document.getElementById('open-button').style.display = "none";
    document.getElementById('ok').style.display = "block";

  }
  function openform() {
    document.getElementById("form-container").style.display = "block";
  }
  function closeDisplay() {
    document.getElementById("form-container").style.display = "none";
  }
  function redirect() {
    window.open("https://www.guru99.com/computer-programming-tutorial.html");

  }
</script>

<button class="open-button" id="open-button" onclick="openform()"><b>Learn Coding</b>
  <emoji>👨‍💻</emoji>
</button><br> <br>
<div id="form-container" class="form-container">
  <form id="display" class="display">
    <b>
      <h3>Signup</h3>
    </b>
    <b>Firstname: </b><input type="text" id="fname" name="" required />
    <br> <br>
    <b>Lastname :</b> <input type="text" id="lname" name="" required />
    <br> <br>
    <b>Password : </b><input type="password" name="" required />
    <br> <br>
    <button id="button" class="signup" onclick="formDisplay()">Signup</button>

    <button id="button" class="cancel" onclick="closeDisplay()">Cancel</button>

    <button id="ok" class="ok" onclick="redirect()">OK</button>
  </form>
</div>
<style>
  .form-container {
    color: black;
    opacity: 0.85;
    max-width: 350px;
    background: transparent;
    background-color: whitesmoke;
    border-radius: 5px;
    border: 1px solid #bfcdcf;
    padding: 20px;
    height: auto;
    align-content: center;
    position: relative;
    display: none;

  }

  .open-button {
    max-width: 350px;
    background-color: crimson;
    border-radius: 5px;
    border: 1px solid crimson;
    padding: 5px;
    height: auto;
    align-content: center;
    cursor: pointer;
  }

  .signup {
    background-color: rgb(1, 228, 1);
    padding: 5px;
    height: auto;
    margin: 10px;
    align-content: center;
    cursor: pointer;
  }

  .cancel {
    background-color: rgb(245, 10, 10);
    padding: 5px;
    height: auto;
    margin: 20px;
    align-content: center;
    cursor: pointer;
  }

  .display {
    color: black;
    align-content: center;
    text-align: center;
  }

  .ok {
    color: black;
    background-color: rgb(70, 130, 243);
    padding: 5px;
    align-content: center;
    display: none;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #bfcdcf;
    bottom: 500px;
    margin: 1 auto;
    left: 200px;
  }
</style>

</html>

2 個解決方案

解決方案1
 0  2020-06-30 19:59:02

當您用“結果”替換表單的內容時，您實際上是從 DOM 中刪除了 OK 按鈕。 一個簡單的解決方案是將它從表單中刪除，同時也給它一個 type="button"。 

 <html> <script> function formDisplay() { var first = document.getElementById("fname").value; var last = document.getElementById("lname").value; var result = first + ' ' + last + ', ' + ' ' + "You are now Signed up "; document.getElementById('display').textContent = result; document.getElementById('open-button').style.display = "none"; document.getElementById('ok-button').style.display = "block"; } function openform() { document.getElementById("form-container").style.display = "block"; } function closeDisplay() { document.getElementById("form-container").style.display = "none"; } function redirect() { window.open("https://www.guru99.com/computer-programming-tutorial.html"); } </script> <button class="open-button" id="open-button" onclick="openform()"><b>Learn Coding</b> <emoji></emoji> </button><br> <br> <div id="form-container" class="form-container"> <form id="display" class="display"> <b> <h3>Signup</h3> </b> <b>Firstname: </b><input type="text" id="fname" name="" required /> <br> <br> <b>Lastname:</b> <input type="text" id="lname" name="" required /> <br> <br> <b>Password: </b><input type="password" name="" required /> <br> <br> <button id="button" class="signup" onclick="formDisplay()">Signup</button> <button id="button" class="cancel" onclick="closeDisplay()">Cancel</button> </form> <button id="ok-button" type="button" class="ok" onclick="redirect()">OK</button> </div> <style>.form-container { color: black; opacity: 0.85; max-width: 350px; background: transparent; background-color: whitesmoke; border-radius: 5px; border: 1px solid #bfcdcf; padding: 20px; height: auto; align-content: center; position: relative; display: none; }.open-button { max-width: 350px; background-color: crimson; border-radius: 5px; border: 1px solid crimson; padding: 5px; height: auto; align-content: center; cursor: pointer; }.signup { background-color: rgb(1, 228, 1); padding: 5px; height: auto; margin: 10px; align-content: center; cursor: pointer; }.cancel { background-color: rgb(245, 10, 10); padding: 5px; height: auto; margin: 20px; align-content: center; cursor: pointer; }.display { color: black; align-content: center; text-align: center; }.ok { color: black; background-color: rgb(70, 130, 243); padding: 5px; align-content: center; display: none; cursor: pointer; border-radius: 5px; border: 1px solid #bfcdcf; bottom: 500px; margin: 1 auto; left: 200px; } </style> </html>

解決方案2
 0  2020-06-30 20:03:45

簡而言之，當您在表單上設置textContent屬性時，您正在刪除該按鈕。 一個簡單的解決方案是將ok按鈕放在表單之外。 

 <html> <script> function formDisplay() { var first = document.getElementById("fname").value; var last = document.getElementById("lname").value; var result = first + ' ' + last + ', ' + ' ' + "You are now Signed up "; document.getElementById('display').textContent = result; document.getElementById('open-button').style.display = "none"; document.getElementById('ok').style.display = "block"; } function openform() { document.getElementById("form-container").style.display = "block"; } function closeDisplay() { document.getElementById("form-container").style.display = "none"; } function redirect() { window.open("https://www.guru99.com/computer-programming-tutorial.html"); } </script> <button class="open-button" id="open-button" onclick="openform()"><b>Learn Coding</b> <emoji></emoji> </button><br> <br> <div id="form-container" class="form-container"> <form id="display" class="display"> <b> <h3>Signup</h3> </b> <b>Firstname: </b><input type="text" id="fname" name="" required /> <br> <br> <b>Lastname:</b> <input type="text" id="lname" name="" required /> <br> <br> <b>Password: </b><input type="password" name="" required /> <br> <br> <button id="button" class="signup" onclick="formDisplay()">Signup</button> <button id="button" class="cancel" onclick="closeDisplay()">Cancel</button> </form> <button id="ok" class="ok" onclick="redirect()">OK</button> </div> <style>.form-container { color: black; opacity: 0.85; max-width: 350px; background: transparent; background-color: whitesmoke; border-radius: 5px; border: 1px solid #bfcdcf; padding: 20px; height: auto; align-content: center; position: relative; display: none; }.open-button { max-width: 350px; background-color: crimson; border-radius: 5px; border: 1px solid crimson; padding: 5px; height: auto; align-content: center; cursor: pointer; }.signup { background-color: rgb(1, 228, 1); padding: 5px; height: auto; margin: 10px; align-content: center; cursor: pointer; }.cancel { background-color: rgb(245, 10, 10); padding: 5px; height: auto; margin: 20px; align-content: center; cursor: pointer; }.display { color: black; align-content: center; text-align: center; }.ok { color: black; background-color: rgb(70, 130, 243); padding: 5px; align-content: center; display: none; cursor: pointer; border-radius: 5px; border: 1px solid #bfcdcf; bottom: 500px; margin: 1 auto; left: 200px; } </style> </html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 根據Jquery / Javascript中的表單提交重定向頁面？ 表單提交時的JavaScript重定向 在提交帶有警報的javascript表單后，如何重定向頁面 Ajax表單提交頁面重定向 如何在表單提交時重定向頁面 嘗試將注冊表單重定向到登錄頁面？ 成功提交表單后重定向另一個頁面 提交表單后如何重定向到其他頁面？ 頁面重定向，在表單提交時傳遞引用URL 提交表單后重定向到另一個頁面
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM