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。你能告诉我什么是错的吗？

Answer 1

有两个拼写错误：

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

Answer 2

不要在表单上设置action属性，而应考虑在每个formaction元素上设置input属性。

文档：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>

Answer 3

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

这是关于如何做到这一点的链接。

How can I get the button that caused the submit from the form submit event?

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>

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 

  }
}

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

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

5 个答案: