Javascript通过函数设置文本框的值，而不会重置

Javascript setting value of textbox by function, without getting reset

本文关键字：函数 置文本 Javascript      更新时间：2023-09-26

我的目标是有一个文本框和一个按钮。如果我在文本框中输入"Hello"并按下提交按钮，我希望看到文本框中填满"World.

"。

目前文本框的值将在

<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>

问题是表单在验证之后被提交。因此，您再次被重定向到test.html。

如果你不希望发生这种情况，添加event.preventDefault();到您的事件处理程序(检查小提琴看到它的工作):

<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>

您可以在MDN了解更多关于event.preventDefault()的信息。

只是作为旁注:通常最好使用addEventListener而不是onsubmit属性(更好地分离关注点，您可以添加多个事件侦听器等)。

当你提交你的页面时，动作页面中的内容将被加载。

在您的示例中，将加载test.html。

如果你想在点击提交时在文本框中显示值"World"，那么在validateForm()方法中返回false

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

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