根據提交按鈕更改表單操作

我在頁面上有許多類似於以下的表單。現在我想改變在此基礎上提交按鈕，用戶點擊表單動作（當然提交表單）根據提交按鈕更改表單操作

<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");  
});

但形式上總是submited到products.php 。你能告訴我什麼是錯的嗎？

來源

2013-07-15 Bad Pussycat

你拼寫錯誤的類名。 – lifetimes

你可以使用.closest（'form'）而不是兩個父（）選擇器來清理它。 –

不要在表單上設置action屬性，而應考慮設置'''formaction'每個'''input'''元素的''屬性。 Docs：http://www.w3.org/TR/html-markup/input.submit.html#input.submit.attrs.formaction – xorcus

有兩個錯別字：

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

來源

2013-07-15 18:51:45

捕捉提交事件，並確定哪個按鈕被點擊。從那裏，你可以改變表單的動作。

下面是如何做到這一點的鏈接。

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

來源

2013-07-15 18:56:19 JeffRegan

而且，不給的形式動作，直到點擊發生的話，那是多餘的。

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

來源

2013-07-15 18:57:09

如果用交換機來代替它，該怎麼辦？喜歡的東西：

<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 

    } 
}

只是一個想法。還沒有測試過，但也許它可能會有所幫助。但願如此。

來源

2013-07-15 18:58:01 user1659653

謝謝，但與jQuery的代碼更短;） –

沒有問題。很高興你找到了解決方案:) – user1659653

不要在表單上設置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>

來源

2015-11-19 10:18:16 xorcus

根據提交按鈕更改表單操作

回答

相關問題