javascript 根据提交按钮更改表单操作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17661645/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change form action based on submit button
提问by Bad Pussycat
I have many forms like the following on the page. Now I want change the form action based on which submit button the user clicked (and of course submit the form)
我在页面上有很多像下面这样的表格。现在我想根据用户单击的提交按钮更改表单操作（当然还需要提交表单）
<form action="/shop/products.php" data-ajax="false" method="post">
<div data-role="fieldcontain">
<input name="submit" class="obutn" type="submit" value="Order" />
<input name="submit" class="oEbutn" type="submit" value="Extras" />
</div>
</form>
I tried with
我试过
$(".obtn").click(function() {
$(this).parent().parent().attr("action", "/shop/products.php");
});
$(".oEbtn").click(function() {
$(this).parent().parent().attr("action", "/shop/extras.php");
});
but the form is always submited to products.php. Can you tell me what's wrong?
但表单总是提交到 products.php。你能告诉我有什么问题吗？
回答by xorcus
Instead of setting the actionattribute on the form itself, consider setting formactionattribute on each individual inputelement.
与其action在表单本身上设置formaction属性，不如考虑在每个单独的input元素上设置属性。
Docs: http://www.w3.org/TR/html-markup/input.submit.html#input.submit.attrs.formaction
文档：http: //www.w3.org/TR/html-markup/input.submit.html#input.submit.attrs.formaction
<form data-ajax="false" method="post">
<div data-role="fieldcontain">
<input formaction="/shop/products.php"
name="submit" class="obutn" type="submit" value="Order" />
<input formaction="/shop/extras.php"
name="submit" class="oEbutn" type="submit" value="Extras" />
</div>
</form>
回答by Ionic? Biz?u
There are two typos:
有两个错别字：
obtninstead ofobutnoEbtninstead ofoEbutn
obtn代替obutnoEbtn代替oEbutn
Another suggestion is to use closest("form")to get the form that contains the clicked button.
另一个建议是使用closest("form")获取包含单击按钮的表单。
$(".obutn").click(function() {
$(this).closest("form").attr("action", "/shop/products.php");
});
$(".oEbutn").click(function() {
$(this).closest("form").attr("action", "/shop/extras.php");
});
$("form").on("submit", function () {
alert($(this).attr("action"));
});
回答by JeffRegan
Capture the submit event and determine which button was clicked. From that, you can change the action of the form.
捕获提交事件并确定单击了哪个按钮。从中，您可以更改表单的操作。
Here's a link on how to do that.
这是有关如何执行此操作的链接。
How can I get the button that caused the submit from the form submit event?
回答by Michael Draper
Also, don't give the form the action until the click happens at all, it is superfluous.
另外，在点击发生之前不要给表单操作，这是多余的。
<form data-ajax="false" method="post">
<div data-role="fieldcontain">
<input name="submit" class="obutn" type="submit" value="Order" />
<input name="submit" class="oEbutn" type="submit" value="Extras" />
</div>
</form>
回答by user1659653
What if you try it out with a switch instead? Something like:
如果你用一个开关来试试呢？就像是：
<input name="submit" id = "1" class="obutn" type="submit" value="Order" />
<input name="submit" id = "2" class="oEbutn" type="submit" value="Extras" />
And then in JavaScript we have:
然后在 JavaScript 中我们有：
//param: The Id attr of the button that was clicked
function postTo(id){
switch(id){
case 1: postProducts();
break;
case 2: postExtras();
break;
default: //Do something else
}
}
Just an idea. Haven′t tested that yet, but maybe it could be helpful. I hope so.
只是一个想法。还没有测试过，但也许它会有所帮助。但愿如此。
