用表单替换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提交

回答

相关问题