Блог

У меня есть HTML-форма и две кнопки отправки. У одного из них есть formaction атрибут.

 <form action="Action1" method="POST" id="myForm">
    <input type="text" name="field1">
    <input type="text" name="field2">
    <button type="submit">Search</button>
    <button type="submit" formaction="Action2">Save search defaults</button>
</form>
  

Затем у меня есть следующий код Javascript:

 $('#myForm').on('submit', function () {
    var form = $(this);
    var url = form.attr('action');

    console.log(url);
});
  

Почему url всегда равно Action1 , даже если я нажимаю на кнопку с formaction="Action2" ? Как я могу получить правильное действие формы при нажатии на вторую кнопку?

Проблема в том, что вы прослушиваете отправку формы — следовательно, $(this) в вашем коде создается form <form> элемент. Вместо этого вы можете прослушать нажатие кнопки отправки:

 $("[type='submit']").on("click", function() {
    var url = $(this).attr("formaction");
    console.log(url);
});
  

Как уже указывалось, $(this).attr('action') всегда ссылается на action атрибут самой вашей формы, поскольку это элемент, для которого определено ваше событие.

Что вы можете сделать сами, так это проверить наличие formaction of document.activeElement , что дает вам элемент, который в данный момент сфокусирован. Если он не определен, вы возвращаетесь к самому действию формы.

ДЕМОНСТРАЦИЯ:

 $('#myForm').on('submit', function (e) {
  e.preventDefault();
  var url = $(document.activeElement).attr('formaction') || $(this).attr('action');

  console.log(url);
});  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="Action1" method="POST" id="myForm">
  <input type="text" name="field1">
  <input type="text" name="field2">
  <button type="submit">Search</button>
  <button type="submit" formaction="Action2">Save search defaults</button>
</form>