Sujet Précédent Sujet Suivant

Envoyer un formulaire avec le bouton Entrée

Résolu/Fermé
pulls Messages postés 136 Date d'inscription mercredi 30 décembre 2009 Statut Membre Dernière intervention 13 septembre 2023 - Modifié par pulls le 5/03/2013 à 12:52
pulls Messages postés 136 Date d'inscription mercredi 30 décembre 2009 Statut Membre Dernière intervention 13 septembre 2023 - 11 mars 2013 à 11:09
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

Réponse 1 / 5
tidjool
5 mars 2013 à 14:36
salut,
essaies de remplacer getElementsById par getElementById
1
Réponse 2 / 5
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
5 mars 2013 à 14:44
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
Réponse 3 / 5
pulls Messages postés 136 Date d'inscription mercredi 30 décembre 2009 Statut Membre Dernière intervention 13 septembre 2023 3
5 mars 2013 à 17:11
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
0
acige Messages postés 18 Date d'inscription lundi 16 avril 2012 Statut Membre Dernière intervention 15 mars 2013 1
6 mars 2013 à 19:51
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.
0
Réponse 4 / 5
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
5 mars 2013 à 20:47
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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
pulls Messages postés 136 Date d'inscription mercredi 30 décembre 2009 Statut Membre Dernière intervention 13 septembre 2023 3
11 mars 2013 à 11:09
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.
0