Comment soumettre de manière fiable un formulaire HTML avec JavaScript?

Y at-il un moyen de soumettre un formulaire HTML en utilisant JavaScript qui est garanti pour fonctionner dans toutes les situations?Comment soumettre de manière fiable un formulaire HTML avec JavaScript?

Je développe. L'approche commune semble être:

formElement.submit()

C'est bien beau, sauf pour une chose. Les champs d'un formulaire sont disponibles en tant qu'attributs de formElement, donc s'il y a un champ avec nom ou id "text1", il peut être accédé comme formElement.text1.

Cela signifie que si un des éléments est appelé « soumettre » (que ce soit son nom ou son id), alors formElement.submit() ne fonctionnera pas. C'est parce que formElement.submit ne sera pas une méthode de la forme, mais le champ avec ce nom. Malheureusement, il est assez fréquent que les boutons d'envoi aient un nom ou un identifiant "submit".

Deux exemples pour illustrer mon propos. Tout d'abord, ce qui suit ne fonctionnera pas, car un élément de la forme a le nom « Soumettre »:

<form name="example" id="example" action="/"> 
    <button type="button" name="submit" onclick="document.example.submit(); return false;">Submit</button> 
</form>

Ce qui suit fonctionnera bien. La seule différence est que j'ai supprimé le nom de « soumettre » de la forme:

<form name="example" id="example" action="/"> 
    <button type="button" onclick="document.example.submit(); return false;">Submit</button> 
</form>

Alors, est-il une autre façon de soumettre un formulaire HTML en utilisant JavaScript?

Source

2010-01-04 pablobm

assez ennuyeux ... J'ai eu le même problème avec la propriété « longueur » de la forme (nombre de contrôles) est remplacé par la valeur d'un contrôle nommé "longueur". À la fin, j'ai changé le nom du contrôle. –

Voir http://stackoverflow.com/questions/876243/why-does-naming-your-html-form-submit-button-submit-break-things –

Suis-je stupide si je suggère de lui donner juste un autre nom. ? Par exemple. '" action "' ou '" exécuter "'. – BalusC

Créer une autre forme en JavaScript, et d'appliquer sa méthode submit() sur votre forme originale:

<html> 
    <script> 
     function hack() { 
      var form = document.createElement("form"); 
      var myForm = document.example; 
      form.submit.apply(myForm); 
     } 
    </script> 

    <form name="example" id="example" method="get" action=""> 
     <input type="hidden" value="43" name="hid"> 
     <button 
      type="button" 
      name="submit" 
      onclick="hack();return false;" 
     >Submit</button> 
    </form> 
</html>

form.submit est la référence à un nouveau et propre soumettre méthode, et vous utilisez apply(myForm) pour l'exécuter avec le formulaire original.

Source

2010-01-04 14:56:40 Jerome

Alors, existe-t-il un autre moyen de soumettre un formulaire HTML en utilisant JavaScript?

Mise à jour: Prenez les conseils de Jérôme (ailleurs dans ce fil). Je vais laisser cette réponse pour un intérêt historique, mais ce n'est pas aussi beau ou fiable que la solution de Jerome.

L'approche suivante est laide, mais fonctionne.

var x = document.forms.example; 
    var f = document.createElement('form'); 
    f.action = x.action; 
    f.method = x.method; 
    f.enctype = x.enctype; 
    for (var i = 0; i < x.elements.length; i++) { 
     var el = x.elements[i]; 
     if (el.name !== "submit") { 
      f.appendChild(el); 
     } 
    } 
    x.parentNode.replaceChild(f,x); 
    f.submit();

Source

2010-01-04 14:50:26 Quentin

Dans Firefox

formElement.constructor

retours "HTMLFormElement".Ainsi, vous pouvez soumettre le formulaire en utilisant:

HTMLFormElement.prototype.submit.call(formElement)

Vous pouvez l'étendre à d'autres navigateurs ainsi:

formElement.constructor.prototype.submit.call(formElement)

Source

2010-01-04 14:56:43 Alsciende

Cependant, tous les navigateurs n'exposent pas 'constructor' sur les éléments de formulaire (ou tout autre objet hôte, d'ailleurs). – kangax

Évidemment, ce n'est pas un navigateur croisé –

La meilleure idée est de ne pas nommer un bouton submit « submit », mais vous pouvez s'it- autour

function reallysubmitform(n){ 
n= n || 0; 
var f= document.forms[n]; 
f.onsubmit= function(){ 
    return true 
}; 
var sub= f.elements['submit']; 
if(sub && sub.type== 'submit') sub.click(); 
else f.submit(); 
}

reallysubmitform()

Source

2010-01-04 15:06:57 kennebec

Il a vraiment résolu l'un de mes problèmes, où je ne peux pas changer le nom du bouton soumettre même si j'ai le formulaire HTML dans mon fichier, car je dois soumettre sur un serveur externe et ils ont un contrôle si le formulaire soumis possède un élément SUBMIT ou non. –

L'envoi d'un formulaire à l'aide de JavaScript ne peut pas, par définition, être sûr.

Vos utilisateurs peuvent parcourir votre site Web sur leur téléphone, avoir désactivé JavaScript, modifié la source de votre page ou utilisé Lynx. Dans tous les cas, à des fins d'accessibilité, vous aurez besoin du bon vieux bouton de soumission HTML et de quelques contrôles d'entrée du côté serveur.

Source

2010-01-04 15:08:33

Bien sûr, mais des améliorations sensibles peuvent encore être ajoutées qui font usage de ces fonctionnalités. Quant à la "sécurité", je ne le demandais pas: c'était la fiabilité que je recherchais, sous la forme d'une interface stable. – pablobm

Pour un formulaire nommé soumettre en appelant simplement ses boutons, cliquez sur la fonction fonctionne pour moi.

document.forms[0].submit.click(); //where submit here is just the name of the button/input tied to the form.

Source

2012-12-09 15:09:12 Jonathon

Quand j'ai posé la question à l'origine, je développais une librairie JS. J'ai dû assumer le moins possible sur l'environnement. Par conséquent, cette solution n'aurait pas fonctionné pour moi, car j'aurais dû supposer que les utilisateurs utiliseraient le bon balisage. – pablobm

utiliser juste onsubmit ...

<form name="example" id="example" action="/" onsubmit="document.example.submit();"> 
    <button type="submit" name="submit" onclick="document.example.submit(); return false;">Submit</button> 
</form>

Source

2016-07-07 06:29:00 Zigri2612

Comment soumettre de manière fiable un formulaire HTML avec JavaScript?

Répondre

Questions connexes