Comment soumettre un formulaire en javascript?

190

J'ai un formulaire avec un identifiant theFormqui a le div suivant avec un bouton d'envoi à l'intérieur:

<div id="placeOrder" 
     style="text-align: right; width: 100%; background-color: white;">
    <button type="submit" 
            class='input_submit' 
            style="margin-right: 15px;" 
            onClick="placeOrder()">Place Order
    </button>
</div>

Lorsqu'on clique dessus, la fonction placeOrder()est appelée. La fonction change le innerHTML du div ci-dessus en "traitement ..." (donc le bouton d'envoi a maintenant disparu).

Le code ci-dessus fonctionne, mais maintenant le problème est que je ne parviens pas à envoyer le formulaire! J'ai essayé de mettre ceci dans la placeOrder()fonction:

document.theForm.submit();

Mais ça ne marche pas.

Comment puis-je envoyer le formulaire?

Nate
la source
3
Je suppose que vous avez une <form>balise quelque part sur votre page.
Justin808
Je ne vois aucun <form> dans le code.
dotoree
1
que voulez-vous dire par: La fonction change le innerHTML du div ci-dessus en "traitement ..." (le bouton d'envoi a donc disparu). et pourriez-vous partager cette logique. Au fait, si vous avez un bouton d'envoi (quelque part en bas avec name = submit), la fonction theform.submit () ne fonctionnera pas. Veuillez clarifier votre question en ajoutant la balise <form> comme vous l'avez dans votre code. Vous pourriez utiliser jsfiddle.net
sakhunzai
5
... si vous avez un bouton de soumission (quelque part en bas avec nom = soumettre) ... Cela a résolu mon problème! C'était <input type = "button" name = "submit" ..., mais bloquait toujours le javascript d'envoyer le formulaire.
Nikolay Ivanov

Réponses:

136

Définissez l' nameattribut de votre formulaire sur "theForm"et votre code fonctionnera.

Andrew Hare
la source
14
Cela peut sembler super évident à certains, mais j'avais un bouton avec le nom et l'identifiant «soumettre» et j'ai document.theForm.submit()signalé une erreur. Une fois que j'ai renommé mon bouton, le code fonctionnait parfaitement.
Jonathan
1
@Jonathan Quel est le nom du bouton que vous aviez? Coz, selon api.jquery.com/submit, les éléments enfants d'un formulaire ne doivent pas utiliser de noms d'entrée ou d'identifiants en conflit avec les propriétés d'un formulaire.
keya
106

Vous pouvez utiliser...

document.getElementById('theForm').submit();

... mais ne remplacez pas le innerHTML. Vous pouvez masquer le formulaire puis insérer un traitement ... span qui apparaîtra à sa place.

var form = document.getElementById('theForm');

form.style.display = 'none';

var processing = document.createElement('span');

processing.appendChild(document.createTextNode('processing ...'));

form.parentNode.insertBefore(processing, form);
Alex
la source
Comment lui dire où envoyer le formulaire? Par exemple, dans mon cas, je veux que le contenu me soit envoyé par e-mail
CodyBugstein
@Imray Vous voudrez probablement que le code côté serveur fasse cela pour vous.
alex
@CodyBugstein définit les action="/{controller}/{action-method}" method="post"attributs du formulaire que vous essayez de publier.
barnes
2
car mon nom de formulaire est printoffersForm et id est le même. document.getElementById('printoffersForm').submit();mais je me donne une erreur, soumettre n'est pas une fonction
Madhuri Patel
@MadhuriPatel Pourriez-vous avoir votre bouton Soumettre également nommé Soumettre? Voir la réponse stackoverflow.com/questions/833032/…
rbassett
37

Cela fonctionne parfaitement dans mon cas.

document.getElementById("form1").submit();

En outre, vous pouvez l'utiliser en fonction comme ci-dessous:

function formSubmit()
{
     document.getElementById("form1").submit();
} 
Chintan Thummar
la source
cela soumettra-t-il des valeurs de formulaire à partir d'un inputtag?
simanacci
@roy Oui, il soumettra les valeurs de formulaire à partir des balises d'entrée.
Chintan Thummar
2
@ChintanThummar et ensuite vous pouvez gérer le formulaire soumettre en utilisant document.getElementById ("form1"). Onsubmit = function () {// Vous pouvez utiliser le code Ajax ici pour soumettre le formulaire // sans actualiser la page}
Shubham Kumar
Je n'ai pas essayé ça mais ça a l'air plus battant que ce que j'avais fourni. Merci;)
Chintan Thummar
12
document.forms["name of your form"].submit();

ou

document.getElementById("form id").submit();

Vous pouvez essayer n'importe lequel de ces éléments ... cela fonctionnera définitivement.

Aruna
la source
5

C'est un ancien message mais je vais laisser la façon dont je le fais pour soumettre le formulaire sans utiliser de namebalise à l'intérieur du formulaire:

HTML

<button type="submit" onClick="placeOrder(this.form)">Place Order</button>

JS

function placeOrder(form){
    form.submit();
}

J'espère que cette solution peut aider quelqu'un d'autre. TQ

SkyClasher
la source
4

HTML

<!-- change id attribute to name  -->

<form method="post" action="yourUrl" name="theForm">
    <button onclick="placeOrder()">Place Order</button>
</form>

JavaScript

function placeOrder () {
    document.theForm.submit()
}
Chandan Gupta
la source
4
Veuillez ajouter quelques explications à votre réponse.
Sampada
Cela n'améliore pas la qualité des réponses déjà données.
Randy
C'est la seule réponse qui montre le nom du formulaire dans le html réel pour la définition du formulaire. En outre, c'est simple et direct.
Tim Bird le
2

Si votre formulaire n'a pas d'identifiant mais qu'il a un nom de classe comme theForm, vous pouvez utiliser l'instruction ci-dessous pour le soumettre:

document.getElementsByClassName("theForm")[0].submit();
Bimal Jha
la source
Qu'en est-il des autres formulaires avec le même nom de classe ci-dessus?
Jack1987 le
0

J'ai trouvé une solution simple en utilisant un formulaire simple caché sur mon site Web avec les mêmes informations que les utilisateurs connectés. Exemple Si vous souhaitez qu'un utilisateur soit connecté sur ce formulaire, vous pouvez ajouter quelque chose comme ceci au formulaire ci-dessous.

<input type="checkbox" name="autologin" id="autologin" />

pour autant que je sache, je suis le premier à cacher un formulaire et à le soumettre en cliquant sur un lien. Il y a le lien soumettant un formulaire caché avec les informations. Pas sûr à 100% si vous n'aimez pas les méthodes de connexion automatique sur votre site Web avec des mots de passe placés sur une zone de texte de mot de passe masquée ......

Bon alors voici le travail. Disons que $siteidc'est le compte et$sitepw mot de passe.

Commencez par créer le formulaire dans votre script php si vous n'aimez pas le html, utilisez un minimum de données, puis effectuez un écho dans la valeur sous une forme cachée. J'utilise juste une valeur php et un écho partout où je veux pref à côté du bouton de formulaire comme vous ne pouvez pas le voir.

Formulaire PHP à imprimer

$hidden_forum = '
<form id="alt_forum_login" action="./forum/ucp.php?mode=login" method="post" style="display:none;">
    <input type="text" name="username" id="username" value="'.strtolower($siteid).'" title="Username" />
    <input type="password" name="password" id="password" value="'.$sitepw.'" title="Password" />
</form>';

PHP et lien pour soumettre le formulaire

<?php print $hidden_forum; ?>
<pre><a href="#forum" onClick="javascript: document.getElementById('alt_forum_login').submit();">Forum</a></pre>
AgeofTalisman
la source
Il est vrai que vous devez soumettre le formulaire, mais le lien n'apparaîtra pas dans mon codage désolé mais faites un onclick ou href = javascript: document.getElementById ('alt_forum_login').
Submit
La question concerne le javascript, il n'y a pas du tout besoin du code php
Shedokan
0

vous pouvez utiliser le code ci-dessous pour soumettre le formulaire en utilisant Javascript;

document.getElementById('FormID').submit();
Abhijeet Navgire
la source
-1
<html>
<body>

<p>Enter some text in the fields below, then press the "Submit form" button to submit the form.</p>

<form id="myForm" action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br><br>
  <input type="button" onclick="myFunction()" value="Submit form">
</form>

<script>
function myFunction() {
    document.getElementById("myForm").submit();
}
</script>

</body>
</html>
Jay Nagar
la source
Pouvez-vous partager une réponse correcte qui ne contient que la partie pertinente et quelques explications la prochaine fois?
Nico Haase
Cette réponse pourrait être utile pour certains stackoverflow.com/a/54619085/7003760
Mayer Spitzer