按功能设置文本框的Javascript值，无需重置

我的目标是拥有一个文本框和一个按钮。如果我在文本框中输入“你好”，然后按提交按钮，我想有看到充满“世界的文本框中。按功能设置文本框的Javascript值，无需重置

就目前的文本框中的值将betweeen的

改变

<html> 
    <body> 
     <script> 
      function validateForm() { 
       var x = document.forms["myForm"]["Input"].value; 
       if (x == "Hello") { 
        alert("test"); 
        document.getElementById("Input").value = "World"; 
        alert("test2"); 
       } 
      } 
     </script> 

     <form name="myForm" action="test.html" onsubmit="return validateForm()" method="post"> 
     Input: <input type="text" id="Input"><br> 
     <input type="submit" value="Submit"> 
     </form> 

    </body> 
</html>

来源

2015-08-26 demathieu

你的代码有什么问题？ – BenM

我在本地尝试了代码（Firefox和Chrome），并在文本框中填入了“世界”的对角线 – Benjamin

我在我的Windows 10计算机上使用Chrome运行它，并且一旦我点击第二条警报消息，字段就为空。难道是我的html文件的扩展名是错误的？我将我的代码保存在.html文件中，然后在浏览器中打开它 – demathieu

问题是表单在验证之后立即提交。所以你又被重定向到test.html。

如果你不希望这样的事情发生，加上event.preventDefault();到事件处理程序（check out the fiddle看到它的工作）：

<html> 
    <body> 
     <script> 
      function validateForm(event) { 
       event.preventDefault(); 

       var x = document.forms["myForm"]["Input"].value; 
       if (x == "Hello") { 
        alert("test"); 
        document.getElementById("Input").value = "World"; 
        alert("test2"); 
       } 
      } 
     </script> 

     <form name="myForm" action="test.html" onsubmit="return validateForm(event)" method="post"> 
     Input: <input type="text" id="Input"><br> 
     <input type="submit" value="Submit"> 
     </form> 

    </body> 
</html>

你可以learn more about event.preventDefault() at MDN。

正如阿里纳斯：它通常是更好地使用addEventListener代替onsubmit属性（关注更好的分离，可以添加多个事件监听器等）。

来源

2015-08-26 11:51:05 nils

当你提交你的页面，然后在操作页面中的内容将被加载。

在你的情况的test.html将被载入。

如果你想显示的值“世界”在提交的文本框中，然后返回false在您的有效ateForm（）方法。

来源

2015-08-26 11:50:34

使用return false;留在同一页面并停止表单提交。

function validateForm() { 
    var x = document.forms["myForm"]["Input"].value; 
    if (x == "Hello") { 
     document.getElementById("Input").value = "World"; 
     return false; 
    } 
}

来源

2015-08-26 11:52:42 Dandy

按功能设置文本框的Javascript值，无需重置

回答

相关问题