Soumettez plusieurs formulaires à d'autres sites en un seul clic. (Il ne prend pas en charge AJAX.)

Question

J'utilise jQuery pour présenter des formes multiples en utilisant cette fonction:

<script> 
    var submitted = ""; 
    function submitAllForms() {    

     var i=0; 

     $("form").each(function() { 

       submitted += $(this).submit(); 
       alert("submitted:"+i); 

       i++; 
     }); 
    } 

</script>'; 

Mais, cela ne se soumet pas à tous. Il soumet et publie des données sur un seul site. En d'autres termes, un seul formulaire est affiché.

Answer 1

RÉPONSE À JOUR

Selon le commentaire:

Il a travaillé sur Firefox, mais ne fonctionne pas sur Google Chrome

Ce problème est lié au dom événement prêt. Cela ne fonctionne pas dans Firefox. J'ai testé l'extrait modifié avec les dernières versions de Chrome, FF, Edge, IE. Seulement pour FF je devais utiliser la charge d'événement au lieu de prêt.

Une solution peut être basée sur IFRAMES (si vous pouvez les utiliser):

• utiliser un bouton unique pour présenter toutes les formes
• insert ou créer un conteneur div sans visiblité
• pour chaque forme insérer dans le div précédent un iframe
• ajouter à un tel iframe le contenu du formulaire correspondant avec des données mises à jour
• soumettre chaque formulaire dans le iframe correspondant
• prendre soin de vider le réservoir ...

L'extrait:

function onIframeReady(doc, html) { 
    doc.find('body').append(html); 
    // 
    // if it's needed to change the action atr use: 
    // doc.find('form').attr('action', 'new ac'); 
    // 
    doc.find('form').submit(); 
} 

$(function() { 
    $('#submitMoreForms').on('click', function(e){ 
    $('#frmWrapper').empty(); 
    $('form').each(function(idx, ele){ 
     $(ele).find(':input').each(function(index, element) { 
     if (element.type == 'textarea') { 
      $(element).text($(element).val()); 
     } else { 
      $(element).attr('value', $(element).val()); 
     } 
     }); 

     $('<iframe>', { 
     id: 'frm' + idx 
     }).appendTo('#frmWrapper').ready(function() { 
     if (window.mozInnerScreenX == null) { // if not firefox 
      onIframeReady($('#frm' + idx).contents(), ele.outerHTML); 
     } 
     }).one('load', function(e) { 
     if (window.mozInnerScreenX != null) { // if firefox 
      onIframeReady($('#frm' + idx).contents(), ele.outerHTML); 
     } 
     }); 
    }); 
    }); 
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 


<form action="action1" method="post"> 
    FORM1:<br/> 
    Name: <input type="text" name="name" /> 
    Comment: <textarea name="comment"></textarea> 
    <input type="checkbox" name="vehicle" value="Bike"> I have a bike 
    <input type="checkbox" name="vehicle" value="Car" checked> I have a car 
</form> 
<form action="action2" method="post"> 
    FORM2:<br/> 
    Name: <input type="text" name="name" /> 
    Comment: <textarea name="comment"></textarea> 
</form> 
<form action="action3" method="post"> 
    FORM3:<br/> 
    Name: <input type="text" name="name" /> 
    Comment: <textarea name="comment"></textarea> 
</form> 

<input id="submitMoreForms" type="button" value="Submit More Forms" /> 
<div id="frmWrapper" style="display: none;"></div> 

Answer 2

Vous ne pouvez pas soumettre plusieurs formulaires sur une page de cette manière. Il soumettra toujours le premier formulaire rencontré, car après la soumission du formulaire, la page sera actualisée (post). Ce genre de choses doit être fait avec AJAX ou une requête HTTP JavaScript.

Il y a une option que vous pouvez essayer et qui est de définir la cible du formulaire à vide, donc sur soumettre, il ouvrira un nouvel onglet ou une fenêtre du navigateur. De cette façon, vous pouvez soumettre tous les formulaires. Je dois vous avertir pour cela si vous voulez l'utiliser dans une application utilisée par d'autres utilisateurs que vous-même, car la plupart des navigateurs vont bloquer les popups créés par le formulaire.