Две формы на одной странице - отправка через jquery

Question

Я новичок во всем этом, и у меня есть два экземпляра одной формы на странице, которые я хочу отправить с помощью Jquery.Я возился с несколькими учебными пособиями, но кажется, что первая форма обрабатывается только моим методом.

Я пытался использовать разные идентификаторы отправки, но функция не запускается и дублирует скрипт для каждой формы - ноЯ не знаком с JS, поэтому не смог разобраться.

FORMS

<form name=Form1" action="URL" method="post">
<input type="email" size=65 name="Email" id="Email1" required>
<input type="hidden" name="field1" value="y">
<input type="submit" value="submit" name="Submit">
</form>

<form name=Form2" action="URL" method="post">
<input type="email" size=65 name="Email" id="Email2" required>
<input type="hidden" name="field1" value="n">
<input type="submit" value="submit" name="Submit">
</form>

Функция JS

<script type="text/javascript">

$(document).ready(function() {

  $('form').submit(function(event) {

    var formData = {
      'field1': $('input[name=field1]').val(),
      'Email': $('input[name=Email]').val(),
    };

    $.ajax({
        type: 'POST',
        url: 'URL',
        data: formData,
      })

      .done(function(data) {
        if (!data.success) {
          window.location = 'THANK YOU URL';
        }
      });

    event.preventDefault();

  });
});
</script>

Answer 1

Формируемые вами данные не являются динамическими. С

var formData = {
    'field1': $('input[name=field1]').val(),
    'Email': $('input[name=Email]').val(),
};

вы всегда получите значения из первого набора полей ввода. Если вы хотите, чтобы значения зависели от отправленной формы, вам нужно использовать $(this) , чтобы получить отправленную форму и найти соответствующие поля ввода:

$(document).ready(function() {

  $('form').submit(function(event) {

    event.preventDefault();

    var formData = {
      'field1': $(this).find('input[name=field1]').val(),
      'Email': $(this).find('input[name=Email]').val(),
    };

    console.log(formData);

    $.ajax({
        type: 'POST',
        url: 'URL',
        data: formData,
      })

      .done(function(data) {
        if (!data.success) {
          window.location = 'THANK YOU URL';
        }
      });


  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="Form1" action="URL " method="post ">
  <input type="email" size=65 name="Email" id="Email1" required>
  <input type="hidden" name="field1" value="y">
  <input type="submit" value="submit" name="Submit">
</form>

<form name="Form2" action="URL" method="post">
  <input type="email" size=65 name="Email" id="Email2" required>
  <input type="hidden" name="field1" value="n">
  <input type="submit" value="submit" name="Submit">
</form>