根据提交按钮更改表单操作

Question

我在页面上有很多类似以下的表单。现在我想根据用户点击哪个提交按钮来更改表单操作（并且当然要提交表单）。

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

我尝试使用

$(".obtn").click(function() {
    $(this).parent().parent().attr("action", "/shop/products.php");     
});
$(".oEbtn").click(function() {
    $(this).parent().parent().attr("action", "/shop/extras.php");       
});

但表单始终会提交到products.php。你能告诉我问题出在哪里吗？

- Bad Pussycat

---

你把课程名称拼错了。 - dsgriffin

你可以使用.closest('form')代替两个parent()选择器来简化代码。 - Justin Bicknell

不要在表单本身上设置action属性，而是考虑在每个单独的input元素上设置formaction属性。文档：http://www.w3.org/TR/html-markup/input.submit.html#input.submit.attrs.formaction - xorcus

Answer 1

不要在表单本身上设置action属性，考虑在每个input元素上设置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>

- xorcus

---

你也可以在<button>标签中使用formaction属性：<button form="FORM_ID" formaction="/my/new/action">保存</button>。 - Jastrzebowski

Answer 2

这里有两个错别字：

• obtn 应该改为 obutn
• oEbtn 应该改为 oEbutn

另一个建议是使用 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"));
});

JSFIDDLE

- Ionică Bizău

Answer 3

捕获提交事件并确定点击的按钮。从那里，您可以更改表单的操作。

这里有一个链接，告诉你如何做到这一点。

如何从表单提交事件中获取导致提交的按钮？

- JeffRegan

Answer 4

此外，在单击事件发生之前不要给表单设置操作，这是多余的。

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

- Michael Draper

Answer 5

如果你用开关语句试试呢？类似这样：

<input name="submit" id = "1" class="obutn" type="submit" value="Order" />
<input name="submit" id = "2" class="oEbutn" type="submit" value="Extras" />

然后在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 

  }
}

只是一个想法。我还没有测试过，但也许它可能会有所帮助。希望如此。

- user1659653

---

没问题。很高兴你找到了解决方案 :) - user1659653