Question

请考虑以下不可用的HTML文档：

<html> 
    <body>
        <form action="" method="GET" onsubmit="return f(this);">
            <input type="text" name="bar" value="" />
            <input type="button" name="foo" value="foo" />
        </form>
    </body>
    <script type="text/javascript">
        function f(x) {
            alert(x.bar);
        }
    </script>
</html>

我想要实现的是当（a）按下foo按钮时;或者（b）在文本输入具有焦点时按下输入;然后使用s文本输入的内容调用函数f - 否则浏览器应该在f返回后保持在同一页面上。

我怎样才能做到这一点？

Answer 1

您应该使用提交输入而不是按钮输入，并且要从文本输入中获取文本，您使用value属性并返回false以防止表单提交

<html>
    <body>
        <form action="" method="GET" onsubmit="return f(this);">
            <input type="text" name="bar" value="" />
            <input type="submit" name="foo" value="foo"/>
        </form>
        <script type="text/javascript">
                function f(x)
                {
                    alert(x.bar.value);
                    return false;
                }
        </script>
        </body>
</html>

FIDDLE

Answer 2

只需使用值而不是表单元素调用它吗？

onsubmit="return f(this.bar.value);"

要阻止发送该页面，您可以从false返回f。

但是使用正确的事件处理程序而不是onsubmit-attribute会更清晰。详细了解here。

<html>
    <body>
        <form id="inputform" action="" method="GET">
            <input type="text" name="bar" value="" />
            <input type="button" name="foo" value="foo"/>
        </form>
        <script type="text/javascript">
        function f(x) {
            alert(x.bar);
        }
        var form = document.getElementById("inputform");
        form.onsubmit = function(event) {
            var x = f(form.bar.value);
            if (!x)
                event.preventDefault();
        };
        </script>
    </body>
</html>

表单提交转到Javascript - 并保持同一页面

2 个答案: