Измените действие формы на основе кнопки отправки

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

Захват отправить событие и определить, какая кнопка была нажата. Из этого вы можете изменить действие формы.

Вот ссылка о том, как это сделать.

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

Answer 3

Кроме того, не дают форме действия до щелчка не происходит вообще, это лишнее.

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

Что делать, если вы попробуете его с помощью переключателя? Что-то вроде:

<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 

    } 
} 

Просто идея. Не проверял это еще, но, возможно, это может быть полезно. Я надеюсь, что это так.

Answer 5

Вместо того, чтобы устанавливать атрибут action на самой форме, рассмотрите настройку атрибута formaction для каждого элемента input.

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