Несколько отправок формы с использованием одной и той же функции

Question

У меня есть форма, в которой используется такая функция, как

$(document).ready(function() {
        $("#form1").submit(function() {

Но у меня есть 2 другие формы, которые я хотел бы использовать ту же функцию, если / когда они отправляют, как мне написать это?

$(document).ready(function() {
        $("#form1").submit(function(), 
        $("#form2").submit(function(), 
        $("#form3").submit(function() {

Спасибо

Answer 1

Вы должны просто сделать это:

$("#form1, #form2, #form3").submit(function() {
    formid = this.id;
    console.log('Processing form [' +formid+ ']');
    ...etc...

Любой из указанных идентификаторов вызовет функцию отправки.

Используя formid var, вы можете точно настроитьлюбые специфичные для формы моды внутри функции.

Answer 2

Вы можете передать идентификатор формы, чтобы отправить их отдельно.

Этот код позволит вам иметь столько форм, сколько вам нужно, без необходимости обновления JS.

function submitForm(id) {
  $("#" + id).submit(function(e) {
    e.preventDefault();
    for (let i = 0; i < e.target.length - 1; i++) {
      console.log(e.target[i].name, e.target[i].value);
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1">
   <input name="name">
   <button onClick="submitForm('form1')">Submit</button>
</form>
<form id="form2">
   <input name="name">
   <button onClick="submitForm('form2')">Submit</button>
</form>
<form id="form3">
   <input name="name">
   <button onClick="submitForm('form3')">Submit</button>
</form>

Answer 3

По JQuery вы можете использовать приведенную ниже функцию $("form").submitNow() с любым элементом формы.

$.fn.submitNow = function() {
  var form = $(this);
  // handle form element
  console.log(this.id, this.action);
  $(this).submit();
}
//use it
$("form").submitNow();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="./action1" id="action1">
  <input type="submit" value="form1" />
</form>
<form action="./action2" id="action2">
  <input type="submit" value="form2" />
</form>
<form action="./action3" id="action3">
  <input type="submit" value="form3" />
</form>

Answer 4

Если я понимаю, вы хотите поделиться функцией для различных обработчиков событий отправки.Это довольно просто:

function submitHandler() {
   // handler stuff here.
}
$(document).ready(function() {
    $("#form1").submit(submitHandler);
    $("#form2").submit(submitHandler);
    $("#form3").submit(submitHandler);
}

и альтернативой, если вы хотите обрабатывать все формы, является указание, какие формы в селекторе jquery.Вы можете сделать это для всех форм на странице:

$(document).on('submit','form', function() { });

или, если вы просто добавите имя класса в формы, на которых хотите использовать его:

$(document).on('submit','.formclass', function() { });