Formulaire non soumis avec JS
-
10-07-2019 - |
Question
J'ai la fonction javascript la plus simple au monde:
fnSubmit()
{
window.print();
document.formname.submit();
}
Qui est appelé par:
<button type="button" id="submit" onclick="fnSubmit()">Submit</button>
Tout va bien, la boîte de dialogue d'impression s'affiche. Cependant, après l'impression ou l'annulation de l'impression, l'erreur suivante apparaît:
" document.formname.submit n'est pas une fonction "
Mon formulaire est défini comme suit: (évidemment, je n'utilise pas nomformname dans le code réel, mais vous en avez l'idée)
<form name="formname" id="formname" method="post" action="<?=$_SERVER['SCRIPT_NAME']?>">
Évidemment, je n'essaie pas de faire quelque chose de spécial ici et j'ai déjà utilisé des approches similaires dans le passé. Qu'est-ce qui me manque ici?
La solution
En bref: remplacez l'identifiant de votre bouton d'envoi par un autre élément que & "soumettre &"; De même, ne définissez pas le nom sur cette valeur non plus.
Maintenant, un aperçu plus profond. Le cas général est que document.formname.submit
est une méthode qui, lorsqu'elle est appelée, soumet le formulaire. Cependant, dans votre exemple, name
n'est plus une méthode, mais le nœud DOM représentant le bouton.
Cela se produit car les éléments d'un formulaire sont disponibles en tant qu'attributs de son nœud DOM, via leurs attributs id
et document.forms.example.exampleField
. Cette formulation est un peu déroutante, voici donc un exemple:
<form name="example" id="example" action="/">
<input type="text" name="exampleField" />
<button type="button" name="submit" onclick="document.example.submit(); return false;">Submit</button>
</form>
Sur cet exemple, document.forms.example.exampleField.value
est un nœud DOM représentant le champ portant le nom & "exampleField &"; Vous pouvez utiliser JS pour accéder à ses propriétés, telles que sa valeur: document.forms.example.submit
.
Cependant, dans cet exemple, il existe un élément du formulaire appelé & "submit &"; il s'agit du bouton d'envoi, accessible à l'aide de <=>. Cela remplace la valeur précédente, qui était la fonction qui vous permet de soumettre le formulaire.
EDIT:
Si renommer le champ ne vous convient pas, il existe une autre solution. Peu de temps avant d’écrire cela, j’ai laissé la question sur le site et obtenu une réponse sous la forme d’un hack JavaScript soigné:
function hack() {
var form = document.createElement("form");
var myForm = document.example;
form.submit.apply(myForm);
}
Voir Comment envoyer de manière fiable un formulaire HTML avec JavaScript? pour plus de détails
Autres conseils
Étant donné que votre formulaire comporte à la fois un id
et un name
défini, vous pouvez utiliser l'un des deux suivants:
Avec la form
balise <=>:
document.getElementById('formname').submit();
Avec l'attribut <=> de la balise <=>:
document.forms['formname'].submit();
Essayez ceci:
fnSubmit()
{
window.print();
document.getElementById("formname").submit();
}
Le coupable le plus probable est qu’IE confond les variables JavaScript, les identifiants et les noms. Recherchez dans votre source quelque chose qui partage le nom de votre formulaire.
- Placez un bouton de saisie dans votre formulaire.
- Donnez tabindex = " -1 " dessus.
- Rendez-le invisible en utilisant style = " display: none; ".
Comme ceci
<input type="submit" tabindex="-1" style="display:none;" />