如何使用 jquery 更改表单的操作

Posted

技术标签:

【中文标题】如何使用 jquery 更改表单的操作【英文标题】:How to change the action of a form with jquery 【发布时间】:2013-08-30 18:46:01 【问题描述】:

脚本在这里:

$('#txt').click(function()

         $('#formID').attr('action', 'https://www.google.se/');

);

此处为 html

<form method="post" name="myForm" action="http://www.youtube.com/" id="formID"  >

        <input type="button" id="txt" value="Submit" />

</form>

所以基本上我想要发生的是,当我按下提交按钮时,表单的操作将更改为 google 并且 google 将打开。这根本不起作用,我不知道为什么。 :|

【问题讨论】:

这对我不起作用 o.o 您可能希望绑定到表单的提交事件而不是按钮的单击事件。 我什么也没做,只是按下什么都不做的提交按钮。 【参考方案1】:

这并不是表单的设计初衷,因此您必须覆盖表单中提交按钮的正常行为。

一种方法是通过 jQuery(假设 txt 是您提交按钮的 id):

$('#txt').click(function(e) 
    e.preventDefault(); //prevent form from attempting to submit
    window.location.href = "http://google.com";
);

注意:已更新。忘记了 function() 中的 'e' 和 e.preventDefault() 之后的括号

【讨论】:

如果txt 是表单的 ID,那么它应该可以工作。您确定您的表单 ID 正确吗?确切的&lt;form id= 行是什么? 正如我在上面的 HTML 中所说,#txt 是我的按钮的 ID,我的表单的 ID 是#formID 对,对不起,我就是这个意思。好吧,这应该对你有用......但如果没有,请尝试 j08691 的答案。它会完全做你想要的。所以现在你应该有两种方法来完成这个。如果您仍有问题,请告诉我们... 我已经尝试了你的两个并且完全按照你的方式编写了它们,但是根本没有发生任何事情。如果没有脚本,我什至无法通过按我的按钮来打开 youtube 然后从一个干净的页面重新开始。我将在另一个答案中发布我本地示例中的确切代码。【参考方案2】:

试试:

$('#txt').click(function (e) 
    e.preventDefault();
    $('#formID').attr('action', 'https://www.google.se/').submit();
);

【讨论】:

【参考方案3】:

这是对我有用的确切代码。将其复制/粘贴到新文档中并试一试。您可以看到我在哪里注释掉了自己的答案以尝试 j08691 的答案(它也有效)。

让我们知道。

<html>
    <head>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <script type="text/javascript">

            $(document).ready(function() 

                $('#txt').click(function(e) 
                    e.preventDefault();
                    //window.location.href = "http://google.ca";
                    $('#test').attr('action', 'https://www.google.se/').submit();
                );
            ); //END $(document).ready()

        </script>
    </head>

<body>

    <form id="test">
        Fisrt: <input type="text" />
        Last : <input type="text" />
        <input id="txt" type="submit" value="Go" />
    </form>

</body>
</html>

【讨论】:

该按钮不会打开谷歌,而是似乎会重新加载。 好吧,我很茫然。以上适用于我的系统,打开谷歌。你用的是什么浏览器(我用最新的谷歌浏览器测试过)。另外,尝试使用window.open,例如here 好的,这似乎正在工作。我所做的只是将 jquery 版本改为 1.10.2 而不是你写的。 好的,很高兴听到。请为任何有用的帖子投票,并在您满意时选择正确的答案。 我的声望太低了,显然不能给别人投票。但我会选择你的作为正确答案,因为你一直忍受着我直到它奏效!【参考方案4】:

问题是你的按钮不是提交按钮,所以即使现在你的代码也不会做任何事情,除非你有一些其他的 JavaScript 或 jQuery 你没有向我们展示或者你遗漏了你的提交按钮?

不管怎样,这是新的 jQuery:

$(function()  //Run on page load
    $('#txt').click(function(e) 
        e.preventDefault(); //Prevent default action from happening
        $('#formID').attr('action', 'https://www.google.se/').submit(); //Change the form's action attribute
        $('#formID').submit(); //Submit the form
    );
);

此处的 HTML - 将 type="button" 更改为 type="submit" 并将 method="post" 更改为 method="get" 因为 google 不喜欢 post:

<form method="get" name="myForm" action="http://www.youtube.com/" id="formID"  >
    <input type="submit" id="txt" value="Submit" />
</form>

【讨论】:

这会为我打开 youtube。 再试一次,编辑以包含页面加载 - 感觉像一个沃利。

以上是关于如何使用 jquery 更改表单的操作的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 jquery 构建动态表单构建器

无法通过 jquery 更改表单操作

如何使用 jQuery 选择的插件重置表单?

我想在更改时保存表单,并使用 laravel 和 Jquery 创建一个动态表单

如何更改联系表单 7 的表单操作 url?

我如何知道表单输入已更改?