J'essaie d'utiliser une fonction de script java pour plusieurs formulaires html sans chance. Voici mon code. Sil te plait aide moi. Merci

Formulaires 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>
1
user934820 5 mai 2020 à 13:40

3 réponses

Meilleure réponse

Le principal problème est que les attributs id doivent être uniques. Lorsque vous les répétez tout au long du code HTML à la fois sur les entrées form et par e-mail, seules les premières instances de chacune seront trouvées.

Pour résoudre ce problème, remplacez-les par class attributs. De là, vous pouvez utiliser la traversée DOM pour trouver les éléments liés au formulaire qui a été soumis afin de récupérer les données requises. Essaye ça:

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>
2
Rory McCrossan 5 mai 2020 à 10:47

Les identifiants d'un document doivent être uniques, convertir les identifiants en classe,

<form class="my_form_class">

Et attachez l'auditeur à la sélection de la classe.

$('.my_form_class').on('submit', function(e){// rest of the code})
2
Ashish Ranjan 5 mai 2020 à 10:46

Vous pouvez utiliser jquery multiple-selector comme

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

Id doit être unique pour chaque élément html

Il existe également un identifiant de courrier électronique en double. Mais vous aimerez recevoir l'e-mail spécifique à ce formulaire. Dans ce cas, vous pouvez utiliser la classe, puis 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>
3
brk 5 mai 2020 à 10:48