Envoyer un formulaire avec le bouton Entrée [Résolu/Fermé]

Signaler
Messages postés
131
Date d'inscription
mercredi 30 décembre 2009
Statut
Membre
Dernière intervention
24 mars 2020
-
Messages postés
131
Date d'inscription
mercredi 30 décembre 2009
Statut
Membre
Dernière intervention
24 mars 2020
-
Bonjour,

J'ai un formulaire avec 5 champs et un bouton Enregistrer. 4 champs contiennent des valeurs par défaut. Après avoir renseigné le champ code vendeur qui est le 5ème champ, j'aimerais qu'en appuyant sur le bouton Entrée, j'envoie le formulaire(submit) . Jusqu'ici , je suis obligé d'avancer le curseur sur le bouton Enregistrer, avec la touche de tabulation, avant d'appuyer sur Entrée pour faire le submit.

Par ailleurs, le champ code vendeur doit enregistrer un nombre à 5 caractères pas plus pas moins.

Voici ce que j'ai essayé de faire avec Javascript:

function valider(){ 
  var taille=document.getElementsById('vendeur').value.lengh; 
   
  if(taille==5){ 
   document.getElementsById('button').focus(); 
   } 
  else{ 
   document.getElementsById('vendeur').focus(); 
   } 
  } 





<input tabindex="1" name="vendeur" type="text" id="vendeur" size="8" maxlength="5"  onchange="valider()"/> 





L'idée est que dès que je tape 5 caractères, le curseur se déplace sur le bouton Enregistrer, et en appuyant sur Entrée, je fais le submit. Malheureusement, ça ne marche pas.

Aidez moi s'il vous plait.

5 réponses

salut,
essaies de remplacer getElementsById par getElementById
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60511 internautes nous ont dit merci ce mois-ci

Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
880
normalement si tu as mis ton bouton envoyer

<input type="submit" name="..........." />
la touche entrée doit envoyer le formulaire sans avoir à modifier le code

par contre pour vérifier que le champ code vendeur contient bien 5 caractères il faut appeler la fct javascript par

<form method="post" ................ onsubmit="valider();" >
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60511 internautes nous ont dit merci ce mois-ci

Messages postés
131
Date d'inscription
mercredi 30 décembre 2009
Statut
Membre
Dernière intervention
24 mars 2020
2
Merci de m'aider,

j'ai mis le type de mon bouton envoyer à "button" et non "submit" parce que à submit il ne fonctionne pas normalement. Voici la fonction checkform() rattachée à ce bouton:

<script language="javascript">

function checkForm(){
	with(document.form){
		if (date.value.trim()==''){
			alert("Vous devez saisir la date");
			date.focus();
			return;
		}	
		
		
		if (produit.value=='init'){
			alert("Vous devez choisir un produit");
			produit.focus();
			return;
		}
		if (qte.value.trim()==''){
			alert("Vous devez saisir la quantité")
			qte.focus();
			return;
		}	
		
		if (vendeur.value.trim()==''){
			alert("Vous devez saisir le code vendeur")
			vendeur.focus();
			return;
			
		}	
		
				
		submit();
		window.opener.location.reload();
	}
}
</script>



voici mon bouton envoyer:


<input name="button" type="button" class="kpo" id="button" value="Enregistrer"  tabindex="2" onclick="checkForm();"/>



Cette fonction contrôle si les champs sont remplis avant de faire le submit.

quand je mets le type à submit, le message d'erreur s'affiche en cas de non remplissage d'un champ,ce qui est normal, mais en plus quand je clique sur ok pour faire partir ce message, d'autres messages qui sont dans mon formulaire s'affiche aussi et qui n'ont même pas de rapport avec cette erreur.

s'il vous y a t il une solution pour empêcher d'autres messages de s'afficher?

merci

Par ailleurs le code suivant ne fonctionne pas, certainement il doit avoir une erreur que je ne trouve.


function valider(){
		var taille=document.getElementById('vendeur').value.lengh;
		
		if(taille<>5){
		     alert(" Le code du vendeur doit avoir 5 chiffres");
			document.getElementsById('vendeur').focus();
			return;
		}
		
		}



Cordialement
Messages postés
18
Date d'inscription
lundi 16 avril 2012
Statut
Membre
Dernière intervention
15 mars 2013
1
Tout d'abord c'est length en non lengh =)

Mais je te conseille de suivre les conseils de Alain_42 ci dessous qui rend ton code plus clair et plus lisible.
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
880
voilà comment procéder:

<script type="text/javascript">
function checkForm(){
	//verif du champ date
	var champ_date=document.getElementById('date'); //evites les noms réservés comme date etc...
	if (champ_date.value==''){
		alert("Vous devez saisir la date");
		champ_date.focus();
		return false; //empèche l'envoi du formulaire
	}	
		
	//verif du champ produit
	var champ_produit=document.getElementById('produit'); 
	if (champ_produit.value==''){
		alert("Vous devez saisir produit");
		champ_produit.focus();
		return false;
	}
	
	//tu peux ainsi verifeir autant de champs que tu veux

	//verif du champ vendeur (pas vide et taille)
	var champ_vendeur=document.getElementById('vendeur'); 
	if (champ_vendeur.value==''){
		alert("Vous devez saisir le code vendeur");
		champ_produit.focus();
		return false;
	}else if(champ_vendeur.value.length != 5){
		alert("Le code vendeur doit comporter 5 caractères");
		champ_produit.focus();
		return false;
	}
	
	//si on est arrivés la c'est que tout est ok alors on autorise l'envoi du formulaire
	return true;
}
</script>




le formulaire:
<form name="form1" method="post" action="...." onsubmit="return checkForm();" >
<!-- en mettant onsubmit= return checkform()  lorsque le formulaire est soumis soit par le bouton envoyer soit par la touche envoi la fct JS checkform est appelée, si elle retourne false le formulaire ne part pas, si elle retounrne true il part -->
........
<input type="text" name="date" id="date" value="" />
<input type="text" name="produit" id="produit" value="" />
<input type="text" name="vendeur" id="vendeur" value="" />
....

<input name="button" type="submit" class="kpo" id="button" value="Enregistrer"  tabindex="2" />


la vérification javascript ne suffit pas il faut aussi faire une verif en php au cas ou js désactivé chez l'internaute
Messages postés
131
Date d'inscription
mercredi 30 décembre 2009
Statut
Membre
Dernière intervention
24 mars 2020
2
Merci à Alain_42 et à tous

Je vous en suis très reconnaissant pour tout le temps que vous avez consacré pour m'aider. J'apprends chaque jour un peu plus.

Encore merci.