Как использовать функцию javascript для нескольких форм html

Question

Я безуспешно пытаюсь использовать функцию сценария java для нескольких форм html. Ниже мой код. Пожалуйста, помогите мне. Спасибо

html формы

<form id="my_form_id">
    Your Email Address: <input type="text" id="email" /><br>
    <input type="submit" />
    <div id='loader' style='display:none'>
        <img src='images/loader.gif'/>
    </div>
</form>
<form id="my_form_id">
    Your Email Address: <input type="text" id="email" /><br>
    <input type="submit" />
    <div id='loader' style='display:none'>
        <img src='images/loader.gif'/>
    </div>
</form>

Javascript

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#my_form_id').on('submit', function(e){
                     $('#loader').show();
                    //Stop the form from submitting itself to the server.
                    e.preventDefault();
                    var email = $('#email').val();
                    $.ajax({
                        type: "POST",
                        url: 'xml.php',
                        data: {email: email},
                        success: function(data){
                            alert(data);
                            $('#loader').hide();
                        }
                    });
                });
            });
        </script>

Answer 1

Вы можете использовать jquery множественный селектор например

$('#my_form_id,#my_form_id2').on('submit', function(e){

Id должен быть уникальным для каждого html элемента

Также есть повторяющийся идентификатор электронной почты. Но вы хотите, чтобы в этой форме был указан адрес электронной почты c. В этом случае вы можете использовать класс, а затем использовать find

$(document).ready(function() {
  $('#my_form_id,#my_form_id2').on('submit', function(e) {
    $('#loader').show();
    //Stop the form from submitting itself to the server.
    e.preventDefault();
    var email = $(this).find('.email').val(); // children
    console.log(email)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my_form_id">
  Your Email Address: <input type="text" class="email" /><br>
  <input type="submit" />
  <div id='loader' style='display:none'>
    <img src='images/loader.gif' />
  </div>
</form>
<form id="my_form_id2">
  Your Email Address: <input type="text" class="email" /><br>
  <input type="submit" />
  <div id='loader' style='display:none'>
    <img src='images/loader.gif' />
  </div>
</form>

Answer 2

Основная проблема в том, что атрибуты id должны быть уникальными. Поскольку вы повторяете их на протяжении HTML как на form, так и на входах электронной почты, будут найдены только первые экземпляры каждого из них.

Чтобы исправить эту проблему, измените их на атрибуты class. Оттуда вы можете использовать обход DOM, чтобы найти элементы, связанные с формой, которая была отправлена, чтобы получить необходимые данные. Попробуйте это:

jQuery(function($) {
  $('.my_form').on('submit', function(e) {
    e.preventDefault();
    var $form = $(this);
    var email = $form.find('input[name="email"]').val();
    
    $form.find('.loader').show();
    
    $.ajax({
      type: "POST",
      url: 'xml.php',
      data: { email: email },
      success: function(data) {
        console.log(data);
        $form.find('.loader').hide();
      }
    });
  });
});

.loader { 
  display: none;
}

<form class="my_form">
  Your Email Address: <input type="text" name="email" /><br>
  <button type="submit">Submit</button>
  <div class="loader">
    <img src="images/loader.gif" />
  </div>
</form>
<form class="my_form">
  Your Email Address: <input type="text" name="email" /><br>
  <button type="submit">Submit</button>
  <div class="loader">
    <img src="images/loader.gif" />
  </div>
</form>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Answer 3

Идентификаторы в документе должны быть уникальными, преобразовать идентификаторы в класс,

<form class="my_form_class">

И присоединить слушателя при выборе класса.

$('.my_form_class').on('submit', function(e){// rest of the code})