用表單替換innerhtml用javascript提交

我想要一個表單，詢問用戶名字，然後用這個名字歡迎他們訪問網站，而不用重定向到不同的頁面或重新加載。所以點擊提交後基本上用「Welcome NAME」替換表單。用表單替換innerhtml用javascript提交

我的代碼：

<div id="welcomeText"> 
 
\t <form onsubmit="changeText()" method="post"> 
 
\t \t Name: <input type="text" name="fname"> 
 
\t \t <input type="submit"> 
 
\t </form> 
 
</div> 
 
     
 
     <script> 
 
      function changeText() { 
 
      var name = document.getElementById(welcomeForm).fname.value; 
 
      var welcome = "Welcome, " + name; 
 
      document.getElementById("welcomeText").innerHTML = welcome; 
 
      } 
 
     </script>

來源

2014-12-03 TheKruger

又有什麼問題？ – drinchev 2014-12-03 16:19:04

您需要在嘗試訪問它之前，提供一個名稱的形式，這樣的事情：

//create the name attribute for the form 
<form onsubmit="changeText()" method="post" name="myForm"> 
    Name: <input type="text" name="fname"> 
    <input type="submit"> 
</form> 

<script> 
     function changeText() { 
     //access myForm using document object 
     var name = document.name.fname.value; 
     var welcome = "Welcome, " + name; 
     document.getElementById("welcomeText").innerHTML = welcome; 
     } 
    </script>

來源

2014-12-03 16:19:11 V31

謝謝！我必須在某個時候拿出「welcomeForm」ID。 – TheKruger 2014-12-03 16:27:50

@TheKruger：您的歡迎。如果有幫助，請將答案標記爲已接受 – V31 2014-12-03 16:35:21

<div id="welcomeText"> 
 
\t <form onsubmit="changeText()" method="post" id="welcomeForm"> 
 
\t \t Name: <input type="text" name="fname"> 
 
\t \t <input type="submit"> 
 
\t </form> 
 
</div> 
 
     
 
     <script> 
 
      function changeText() { 
 
      var name = document.getElementById("welcomeForm").fname.value; 
 
      var welcome = "Welcome, " + name; 
 
      document.getElementById("welcomeText").innerHTML = welcome; 
 
      } 
 
     </script>

來源

2014-12-03 16:21:05 Donal

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title></title> 
    </head> 
    <body> 
     <div id="welcomeText"> 
     Name: <input type="text" name="fname" id="name"> 
     <input id="submit" type="submit" onclick="changeText()" onsubmit="changeText()"> 

</div> 

     <script> 
      function changeText() { 
      var name = document.getElementById("name").value; 
      var welcome = "Welcome, " + name; 
      document.getElementById("welcomeText").innerHTML = welcome; 
      document.getElementById("name").style.display = "none"; 
      document.getElementById("submit").style.display = "none"; 
      } 
     </script> 
    </body> 
</html>

試試這個，它會顯示「歡迎用戶」，並使按鈕和輸入消失。在這種情況下，你甚至不需要表單。您可以直接從輸入中訪問該名稱，而無需提交表單。

enter image description here

來源

2014-12-03 16:21:57 brso05

我們在這裏：

<div id="welcomeText"> 
    <form id="myform" method="post"> 
     Name: <input type="text" name="fname"> 
     <input type="submit"> 
    </form> 
</div> 

<script> 
    var form = document.getElementById("myform"); 
    form.addEventListener('submit', function (e) { 
    e.preventDefault(); // This will prevent submitting the form 
    var name = form.fname.value; 
    var welcome = "Welcome, " + name; 
    document.getElementById("welcomeText").innerHTML = welcome; 
    }); 
</script>

來源

2014-12-03 16:25:14

用表單替換innerhtml用javascript提交

回答

相關問題