Question

我的目标是拥有一个文本框和一个按钮。如果我进入＆＃34;你好＆＃34;在文本框中按下提交按钮我希望看到文本框中填充＆＃34; 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>

Answer 1

问题是表单在验证后立即提交。因此，您再次被重定向到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属性（更好地分离关注点，您可以添加多个事件侦听器等。）。

Answer 2

当您提交页面时，将加载操作页面中的内容。

在您的情况下，将加载test.html。

如果你想要价值＆＃34; World＆＃34;在点击提交时显示在文本框中，然后在validateForm（）方法上返回false。

Answer 3

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

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

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

3 个答案: