Plateformes d'assistanceDiscussions & Opinions des Communautés
|
|
|
|
[javascript] controle et verif form
Dernière réponse le 13 mai 2009 à 11:10:37 txiki, le 27 jan 2006 à 15:47:20Bonjour aux spécialistes des formulaires et javascript,
J'ai fait un formulaire avec 4 champs obligatoires parmi d'autres. Un script.js de controle de ces champs.
Jusque là: OK !.
Mais j'ai un autre script qui me génére (mal mais...) une pop up avec le résumé.
Celui là fonctionne aussi mais.... c'est soit l'un, soit l'autre. Pas les deux en même temps. Dans le head j'ai:
<script language="JavaScript" src="../scripts/verif.js" type="text/JavaScript"></script> <script language="JavaScript" src="../scripts/resume.js" type="text/JavaScript"></script>
puis le verif.js:
<!-- Vérification des champs du formulaire
function verif()
{
var nom = document.formulaire.nom.value;
if (document.formulaire.nom.value == "")
{
alert ('Veuillez entrer votre nom');
document.formulaire.nom.focus();
return false;
}
if(document.formulaire.prenom.value == "")
{
alert ('Veuillez entrer votre prénom');
document.formulaire.prenom.focus();
return false;
}
if(document.formulaire.matricule.value == "")
{
alert ('Veuillez entrer votre matricule');
document.formulaire.matricule.focus();
return false;
}
if(document.formulaire.matricule.value.length != 4)
{
alert ('Le matricule doit comporter 4 chiffres');
document.formulaire.matricule.focus();
return false;
}
if(document.formulaire.telephone.value == "")
{
alert ('Veuillez entrer un n° de téléphone');
document.formulaire.telephone.focus();
return false;
}
if(document.formulaire.telephone.value.length != 6)
{
alert ('Le n° de téléphone doit comporter 6 chiffres');
document.formulaire.telephone.focus();
return false;
}
else {return true;}
}
//--> et le resume.js:
<!--popup confirmation après validation formulaire.
function resum(){
Fenetreresum = window.open('','Vérification','scrollbars=no, resizable=no, toolbar=no, status=no, top=220, left=250, width=420, height=300')
Fenetreresum.document.write("Merci de prrendre le temps de vérifier ce que vous venez de saisir:<br> ( coordonnées, téléphone où e-mail et la date). <br><strong> Merci !</strong>");
Fenetreresum.document.write("<br><br><b>Nom : </b>" + document.formulaire.nom.value);
Fenetreresum.document.write("<br><b>Prénom : </b>" + document.formulaire.prenom.value);
Fenetreresum.document.write("<br><b>matricule: </b>" + document.formulaire.matricule.value);
Fenetreresum.document.write("<br><b>téléphone: </b>" + document.formulaire.telephone.value);
Fenetreresum.document.write("<br><b>e-mail: </b>" + document.formulaire.courriel.value);
Fenetreresum.document.write("<br><b>date choisie: </b>" + document.formulaire.select.value);
Fenetreresum.document.write("<br><b>commentaire éventuel: </b>" + document.formulaire.textarea.value);
}
//--> D'ailleur ce dernier est incomplet car je ne peux pas définir la police, sa taille, sa graisse sa couleur etc.... mais je ne sais pas comment l'écrire ici dessus.
Ma question est celle-ci: Comment je peux afficher une pop up avec le résumé de la saisie , faire OK pour la valider puis afficher une indication (remerciement où autre) pour indiquer au visiteur que son action a bien été effectuée.
Merci mille fois pour vos lumières.
Le bonheur est la seule chose que l'on peut donner sans l'avoir.
Meilleures réponses pour « [javascript] controle et verif form » dans :
Javascript - Effacer un champ de formulaire lors du clic (focus) VoirIl vous est sûrement arrivé de tomber sur un formulaire HTML avec des valeurs pré-remplies décrivant par exemple le type de valeur attendue.
L'intention est louable mais il est désagréable de devoir sélectionner ce texte et le supprimer avant de...
Javascript - Modifier la hauteur (height) d'un élément HTML VoirPour modifier la hauteur d'un élément HTML en javascript, il suffit d'utiliser sa propriété de style "height".
Pour cela vous pouvez y faire référence de la manière suivante :
Si vous souhaitez connaître la hauteur (height) d'un bloc HTML, il...
Télécharger Notebook Hardware Control VoirNotebook Hardware Control est un outil de contrôle des composants de votre Notenook.
- Il contrôle la gestion d'alimentation de votre système.
- Il personnalise Notebook (open source).
- Il prolonge la durée de vie de votre batterie.
- Il...
Javascript - Les événements VoirQu'appelle-t-on un événement?
Les événements sont des actions de l'utilisateur, qui vont pouvoir donner
lieu à une interactivité. L'événement par excellence est le clic
de souris, car c'est le seul que le HTML gère. Grâce au Javascript il est...
Javascript - La notion d'objet VoirNotion d'objet
Le but de cette section n'a pas pour ambition de traîter de la programmation
orientée objet mais de donner une idée de ce qu'est un objet, concept
nécessaire à la création de scripts Javascript.
Le Javascript traite les éléments qui...
Javascript - Les variables VoirLe concept de variable
Une variable est un objet repéré par son nom, pouvant contenir
des données, qui pourront être modifiées lors de l'exécution du programme.
En Javascript, les noms de variables peuvent être aussi long que l'on désire,...
<html>
<head>
<script language="javascript" type="text/javascript">
function verif()
{
var nom = document.formulaire.nom.value;
if (document.formulaire.nom.value == "")
{
alert ('Veuillez entrer votre nom');
document.formulaire.nom.focus();
return false;
}
if(document.formulaire.prenom.value == "")
{
alert ('Veuillez entrer votre prénom');
document.formulaire.prenom.focus();
return false;
}
if(document.formulaire.matricule.value == "")
{
alert ('Veuillez entrer votre matricule');
document.formulaire.matricule.focus();
return false;
}
if(document.formulaire.matricule.value.length != 4)
{
alert ('Le matricule doit comporter 4 chiffres');
document.formulaire.matricule.focus();
return false;
}
if(document.formulaire.telephone.value == "")
{
alert ('Veuillez entrer un n° de téléphone');
document.formulaire.telephone.focus();
return false;
}
if(document.formulaire.telephone.value.length != 6)
{
alert ('Le n° de téléphone doit comporter 6 chiffres');
document.formulaire.telephone.focus();
return false;
}
else
{
if(window.document.all('flag').innerHTML="false"){
resum();
return false;
}else{
return true;
}
}
}
function resum(){
html= "";
html += " <head>";
html += " <style>";
html += " body, table, tr,td{";
html += " background-color: #FFFFCC;";
html += " color: #009900;";
html += " font-family: Verdana, Arial, Courrier;";
html += " font-size: 10px;";
html += " }";
html += " </style>";
html += " </head>";
html += " <body>";
html += "<i>Merci de prendre le temps de vérifier ce que vous venez de saisir:<br> ( coordonnées, téléphone ou e-mail et la date).</i>";
html += "<p/><strong> Merci !</strong><p/>";
html += " <table>";
html += " <tr>";
html += " <td><b>Nom</b></td>";
html += " <td>: ";
html += document.formulaire.nom.value;
html += " </td>";
html += " </tr>";
html += " <tr>";
html += " <td><b>Prénom</b></td>";
html += " <td>: ";
html += document.formulaire.prenom.value;
html += " </td>";
html += " </tr>";
html += " <tr>";
html += " <td><b<Matricule</b></td>";
html += " <td>: ";
html += document.formulaire.matricule.value;
html += " </td>";
html += " </tr>";
html += " <tr>";
html += " <td><b>Téléphone</td>";
html += " <td>: ";
html += document.formulaire.telephone.value;
html += " </td>";
html += " </tr>";
html += " <tr>";
html += " <td><b>E-mail</b></td>";
html += " <td>: ";
html += document.formulaire.courriel.value;
html += " </td>";
html += " </tr>";
html += " <tr>";
html += " <td><b>Date choisie</b></td>";
html += " <td>: ";
html += document.formulaire.select.value;
html += " </td>";
html += " </tr>";
html += " <tr>";
html += " <td><b>Commentaire éventuel</b></td>";
html += " <td>: ";
html += document.formulaire.textarea.value;
html += " </td>";
html += " </tr>";
html += " <tr>";
html += " <td colspan='2'>";
html += " <button onclick='window.opener.document.all(\"flag\").innerHTML=\"true\";window.opener.document.formulaire.submit();self.close();'>Je confirme</button>";
html += " <button onclick='self.close();'>Je veux modifier</button>";
html += " </td>";
html += " </tr>";
html += " <table>";
html += " </body>";
Fenetreresum = window.open('','Vérification','scrollbars=no,resizable=no,toolbar=no,status=no,top=220,left=250,width=420,height=300')
Fenetreresum.document.write(html);
}
</script>
</head>
<body>
<form name="formulaire" method="GET" action="http://www.somewhere.com">
<table>
<tr>
<td>Nom:</td>
<td><input type="" name="nom" value="Hack" /></td>
</tr>
<tr>
<td>Prénom:</td>
<td><input type="" name="prenom" value="Track" /></td>
</tr>
<tr>
<td>Matricule:</td>
<td><input type="" name="matricule" value="1234" /></td>
</tr>
<tr>
<td>Téléphone:</td>
<td><input type="" name="telephone" value="123456" /></td>
</tr>
<tr>
<td>Courriel:</td>
<td><input type="" name="courriel" value="hack_track@hotmail.com" /></td>
</tr>
<tr>
<td>Date:</td>
<td>
<select name="select">
<option value="01/04/2006">01/04/2006</option>
<option value="01/10/2006">01/10/2006</option>
</select>
</tr>
<tr>
<td>Commentaire:</td>
<td><textarea cols="40" rows="5" name="textarea" value="">Juste pour tester. HackTrack</textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" onclick="javascript: return verif();"/> <input type="reset"/></td>
</tr>
</table>
</form>
<div id="flag" name="flag" style="display: none;">false</div>
</body>
</html>
;-) HackTrack |
Merci infiniment !
|
Salut Hack,
<script language.......><script>dans le head du formulaire. Ca fonctionne très bien. Si tu veux, lundi je t'enverrai le code complet de la page en question... Merci encore et bon week end. Le bonheur est la seule chose que l'on peut donner sans l'avoir. |
Moi j'ai un ti pb avec ton script HackTrack !
<html>
<head>
<script language="javascript" type="text/javascript">
function verif()
{
var nom = document.formulaire.nom.value;
if (document.formulaire.nom.value == "")
{
alert ('Veuillez entrer votre nom');
document.formulaire.nom.focus();
return false;
}
if(document.formulaire.prenom.value == "")
{
alert ('Veuillez entrer votre prénom');
document.formulaire.prenom.focus();
return false;
}
if(document.formulaire.matricule.value == "")
{
alert ('Veuillez entrer votre matricule');
document.formulaire.matricule.focus();
return false;
}
if(document.formulaire.matricule.value.length != 4)
{
alert ('Le matricule doit comporter 4 chiffres');
document.formulaire.matricule.focus();
return false;
}
if(document.formulaire.telephone.value == "")
{
alert ('Veuillez entrer un n° de téléphone');
document.formulaire.telephone.focus();
return false;
}
if(document.formulaire.telephone.value.length != 6)
{
alert ('Le n° de téléphone doit comporter 6 chiffres');
document.formulaire.telephone.focus();
return false;
}
else
{
if(window.document.all('flag').innerHTML="false"){
resum();
return false;
}else{
return true;
}
}
}
function resum(){
html= "";
html += " <head>";
html += " <style>";
html += " body, table, tr,td{";
html += " background-color: #FFFFCC;";
html += " color: #009900;";
html += " font-family: Verdana, Arial, Courrier;";
html += " font-size: 10px;";
html += " }";
html += " </style>";
html += " </head>";
html += " <body>";
html += "<i>Merci de prendre le temps de vérifier ce que vous venez de saisir:<br> ( coordonnées, téléphone ou e-mail et la date).</i>";
html += "<p/><strong> Merci !</strong><p/>";
html += " <table>";
html += " <tr>";
html += " <td><b>Nom</b></td>";
html += " <td>: ";
html += document.formulaire.nom.value;
html += " </td>";
html += " </tr>";
html += " <tr>";
html += " <td><b>Prénom</b></td>";
html += " <td>: ";
html += document.formulaire.prenom.value;
html += " </td>";
html += " </tr>";
html += " <tr>";
html += " <td><b<Matricule</b></td>";
html += " <td>: ";
html += document.formulaire.matricule.value;
html += " </td>";
html += " </tr>";
html += " <tr>";
html += " <td><b>Téléphone</td>";
html += " <td>: ";
html += document.formulaire.telephone.value;
html += " </td>";
html += " </tr>";
html += " <tr>";
html += " <td><b>E-mail</b></td>";
html += " <td>: ";
html += document.formulaire.courriel.value;
html += " </td>";
html += " </tr>";
html += " <tr>";
html += " <td><b>Date choisie</b></td>";
html += " <td>: ";
html += document.formulaire.select.value;
html += " </td>";
html += " </tr>";
html += " <tr>";
html += " <td><b>Commentaire éventuel</b></td>";
html += " <td>: ";
html += document.formulaire.textarea.value;
html += " </td>";
html += " </tr>";
html += " <tr>";
html += " <td colspan='2'>";
html += " <button onclick='window.opener.document.all(\"flag\").innerHTML=\"true\";window.opener.document.formulaire.submit();self.close();'>Je confirme</button>";
html += " <button onclick='self.close();'>Je veux modifier</button>";
html += " </td>";
html += " </tr>";
html += " <table>";
html += " </body>";
Fenetreresum = window.open('','Vérification','scrollbars=no,resizable=no,toolbar=no,status=no,top=220,left=250,width=420,height=300')
Fenetreresum.document.write(html);
}
</script>
</head>
<body>
<form name="formulaire" method="post" action="index2.php">
<table>
<tr>
<td>Nom:</td>
<td><input type="" name="nom" value="nom" /></td>
</tr>
<tr>
<td>Prénom:</td>
<td><input type="" name="prenom" value="fred" /></td>
</tr>
<tr>
<td>Matricule:</td>
<td><input type="" name="matricule" value="1234" /></td>
</tr>
<tr>
<td>Téléphone:</td>
<td><input type="" name="telephone" value="123456" /></td>
</tr>
<tr>
<td>Courriel:</td>
<td><input type="" name="courriel" value="Mon_mail@fai.fr" /></td>
</tr>
<tr>
<td>Date:</td>
<td>
<select name="select">
<option value="01/04/2006">01/04/2006</option>
<option value="01/10/2006">01/10/2006</option>
</select>
</tr>
<tr>
<td>Commentaire:</td>
<td><textarea cols="40" rows="5" name="textarea" value="">Juste pour tester.</textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" onclick="javascript: return verif();"/> <input type="reset"/>
<td colspan='2'>";
</td>
</tr>
</table>
</form>
<div id="flag" name="flag" style="display: none;">false</div>
</body>
</html>
Et voici juste le script javascript d’ouverture de la popup de ma page index2.html </script>
<script language="javascript">
function popupcentree(page,largeur,hauteur,options)
{
var top=(screen.height-hauteur)/2;
var left=(screen.width-largeur)/2;
window.open(page,"popup","top="+top+",left="+left+",width="+largeur+",height="+hauteur+","+options);
}
</script> |
A voir également Plus
Effacer value form javascript- Form javascript post
- Form onsubmit javascript multipart/form-data
- Javascript controle champs formulaire return false fin des conditions
- Javascript controle d'un input et focus
- Javascript controles saisie
- Javascript document form checked
- Javascript document.form
- Javascript envoyer form
- Javascript focus controle d'input
- Javascript fonction verif mail
- Javascript form
- Javascript form post get value
- Javascript recuperer valeur form
- Javascript submit a form
- Refresh form javascript
- Send form variables javascript
- Test javascript champs form
