Formulaire en javascript
Résolu/Fermé
A voir également:
- Formulaire en javascript
- Formulaire de réclamation facebook - Guide
- Telecharger javascript - Télécharger - Langages
- Formulaire instagram compte suspendu - Guide
- Le formulaire rempli - Guide
- Formulaire remboursement frais de résiliation free pdf ✓ - Forum Freebox
5 réponses
Utilisateur anonyme
6 janv. 2015 à 00:15
6 janv. 2015 à 00:15
Voilà un bon tuto sur la validation de formulaire avec jQuery
https://www.grafikart.fr/tutoriels/valider-formulaire-jquery-57
Bon maintenant HTML5 le fait aussi partiellement.
Sinon pourquoi tu as à la fois un method="get" et un method="post" dans ton form, sinon t'as page est en PHP? Si oui pour rediriger tu peux utiliser la fonction header(), sinon pour poster ton formulaire utilise l'AJAX et redirige avec window.location
https://www.grafikart.fr/tutoriels/valider-formulaire-jquery-57
Bon maintenant HTML5 le fait aussi partiellement.
Sinon pourquoi tu as à la fois un method="get" et un method="post" dans ton form, sinon t'as page est en PHP? Si oui pour rediriger tu peux utiliser la fonction header(), sinon pour poster ton formulaire utilise l'AJAX et redirige avec window.location
salut merci d'avoir répondu, les method post et get je vais les faire apres maintenant je voulais faire un formulaire juste en javascript (pas de jquery)!!
jordane45
Messages postés
38350
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
26 décembre 2024
4 719
6 janv. 2015 à 16:45
6 janv. 2015 à 16:45
Bonjour,
Sachant que tu dois en choisir un.. tu ne peux pas mettre les deux dans un form !
Jquery... c'est du javascript.... c'est juste une librairie de fonctions faites en Javascript pour aider à coder...
Maintenant.. si tu préfères le faire en "pure" javascript .. pas de soucis.
- Déjà... il faut mettre des ID à tes éléments HTML... sinon ce sera plus compliqué à manipuler.
- Tu peux aussi mettre des class fictives sur les éléments qui sont censé être REQUIRED... ainsi.. on pourra directement tous les testé
Un truc du genre :
Bien sûr.. pour déclencher la vérification il te faudra le mettre dans le onclick de ton bouton
Sans oublier que pour pouvoir "submit" ta "form" il est préférable de lui donner un nom:
les method post et get je vais les faire apres
Sachant que tu dois en choisir un.. tu ne peux pas mettre les deux dans un form !
formulaire juste en javascript (pas de jquery)!!
Jquery... c'est du javascript.... c'est juste une librairie de fonctions faites en Javascript pour aider à coder...
Maintenant.. si tu préfères le faire en "pure" javascript .. pas de soucis.
- Déjà... il faut mettre des ID à tes éléments HTML... sinon ce sera plus compliqué à manipuler.
- Tu peux aussi mettre des class fictives sur les éléments qui sont censé être REQUIRED... ainsi.. on pourra directement tous les testé
Un truc du genre :
<script type="text/javascript">
// Pour les "vieux" Navigateurs < IE9
if (typeof document.getElementsByClassName!='function') {
document.getElementsByClassName = function() {
var elms = document.getElementsByTagName('*');
var ei = new Array();
for (i=0;i<elms.length;i++) {
if (elms[i].getAttribute('class')) {
ecl = elms[i].getAttribute('class').split(' ');
for (j=0;j<ecl.length;j++) {
if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
ei.push(elms[i]);
}
}
} else if (elms[i].className) {
ecl = elms[i].className.split(' ');
for (j=0;j<ecl.length;j++) {
if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
ei.push(elms[i]);
}
}
}
}
return ei;
}
}
//Vérifie tous les élements d'une CLASS pour voir si ils ne sont pas vides
function verifElementByClassName(class_name){
var ArrElem = document.getElementsByClassName(class_name);
var nbElemeVide = 0;
for ( x=0;x<ArrElem.length;x++){
//console.log(ArrElem[x].id);
if(ArrElem[x].value==null ||ArrElem[x].value ===''){
alert(ArrElem[x].name + " est vide !");
//on incrémente le nombre d'éléments vides
nbElemeVide++;
}
}
// Si aucun élément vide ... envoie du formulaire :
if( nbElemeVide ==0 ){
// ici.. tu pourras faire appel à un AJAX pour envoyer tes données en BDD par exemple ou déclencher le "submit" de ton form.
document.forms["myform"].submit();
}
}
Bien sûr.. pour déclencher la vérification il te faudra le mettre dans le onclick de ton bouton
<input Value="Valider" Type="button" onclick="verifElementByClassName('classe_bidon');" >
Sans oublier que pour pouvoir "submit" ta "form" il est préférable de lui donner un nom:
<form method="post" name="myform" enctype="multipart/form-data" action="">
une autre remarque @jordan j'ai pas bien compris ton code !! voici un exemple de formulaire que j'ai fait sur un retaurant avec le javascript:
EDIT : Ajout des balises de code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="fich-css.css"/>
<meta charset="UTF-8" />
<TITLE> RESTAURANT </TITLE>
<SCRIPT type="text/JavaScript">
function prixRepas(prixrep,Nomberpers)
{
return prixrep*Nomberpers;
}
function calculeTarif()
{
return prixRepas(document.commande.entrer.value,document.commande.entrernbP.value)+prixRepas(document.commande.plat.value,document.commande.platnbP.value)+prixRepas(document.commande.dessert.value,document.commande.dessertnbP.value);
}
function entrerSelected()
{
if(document.commande.entrer.value!=0)
document.commande.entrernbP.value=1;
}
function platSelected()
{
if(document.commande.plat.value!=0)
document.commande.platnbP.value=1;
}
function dessertSelected()
{
if(document.commande.dessert.value!=0)
document.commande.dessertnbP.value=1;
}
function testnombrePersonne()
{
if(document.commande.entrernbP.value<0)
{
document.commande.entrernbP.value=0;
alert('IMPOSSIBLE !!!!!!');
}
if(document.commande.entrernbP.value>10)
{
document.commande.entrernbP.value=10;
alert('NOMBER MAXIMALE EST 10 !!!!!!');
}
if(document.commande.platnbP.value<0)
{
document.commande.platnbP.value=0;
alert('IMPOSSIBLE !!!!!!');
}
if(document.commande.platnbP.value>10)
{
document.commande.platnbP.value=10;
alert('NOMBER MAXIMALE EST 10 !!!!!!');
}
if(document.commande.dessertnbP.value<0)
{
document.commande.dessertnbP.value=0;
alert('IMPOSSIBLE !!!!!!');
}
if(document.commande.dessertnbP.value>10)
{
document.commande.dessertnbP.value=10;
alert('NOMBER MAXIMALE EST 10 !!!!!!');
}
}
function testAdresse(adr)
{
if(adr==""||adr=="entrer votre adresse")
return 0;
else
return 1;
}
function testCommande()
{
if(document.commande.plat.value==0&&document.commande.entrer.value==0&&document.commande.dessert.value==0)
return 0;
else
return 1;
}
</SCRIPT>
</head>
<body>
<center>
<div class="formulaire">
<form method="post" action="mailto:***@***" name="commande" onMouseOver="document.commande.tarif.value=calculeTarif();testnombrePersonne();" >
<fieldset width="100px">
<h1 >Votre commande</h1>
<label> </label>
<table>
<tr>
<td>Entrée:</td>
<td>
<select name="entrer" onChange="entrerSelected();">
<option name="aucune" value="0" selected >aucune</option>
<option name="salade mixte" value="25" >salade mixte</option>
<option name="soupe" value="20">soupe</option>
<option name="salade fruit" value="35">salade fruit</option>
</select>
</td>
<td>pour</td>
<td><input type="number" name="entrernbP" value="0"/></td>
<td>personnes</td>
</tr>
<tr>
<td>Plat:</td>
<td>
<select name="plat" onChange="platSelected();">
<option name="aucune" value="0" selected >aucune</option>
<option name="tajine" value="75">tajine</option>
<option name="pizza quatre saisons" value="80">pizza quatre saisons</option>
<option name="couscous" value="60">couscous</option>
</select>
</td>
<td>pour</td>
<td><input type="number" name="platnbP" value="0"/></td>
<td>personnes</td>
<td><label>PRIX</label></td>
</tr>
<tr>
<td>Dessert:</td>
<td>
<select name="dessert" onChange="dessertSelected();" >
<option name="aucune" value="0" selected >aucune</option>
<option name="glace" value="15">glace</option>
<option name="tarte au chocolat" value="50">tarte au chocolat</option>
<option name="jus fruits" value="45">jus fruits</option>
</select>
</td>
<td>pour</td>
<td><input type="number" name="dessertnbP" value="0"></td>
<td>personnes</td>
<td><div id="prix"><input type="text" name="tarif" value="0" size="5" disabled />DH</div></td>
</tr>
</table>
<div id="adresse">
<textarea name="adresse" rows="5" cols="40" value="" onFocus="this.value='';">entrer votre adresse</textarea><br/>
</div>
<div id="commander">
<button type="button" name="Submit" value="Commander" onClick="if(testCommande())if(testAdresse(document.commande.adresse.value))commande.submit();else alert('invalide adresse');else alert('vous avez rien commander');"/>Commander</button>
</div>
</fieldset>
</form>
</div>
</body>
</html>
EDIT : Ajout des balises de code
jordane45
Messages postés
38350
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
26 décembre 2024
4 719
7 janv. 2015 à 01:28
7 janv. 2015 à 01:28
Bonsoir,
Ligne 38 du code que je t'ai posté.
Mais rien ne t'empèche de rajouter un ELSE à la fin du code.. dans le bloc
Et bien tu es donc capable de coder en Javascript la vérification pour tes champs... pourquoi alors nous poser ta question ???
Et donc au final... QUELLE est exactement ton besoin ??
(sachant que je n'écrirait pas le code pour toi.. je ne ferai que t'aider à le faire...)
@loran.. petite remarque.. jordanE s'écrit avec un "E" merci d'y penser....
Cordialement,
Jordane
une petite remarque ou sont ils les "alert" dans ton code qui vont indiquer une erreur genre un champ mal rempli ou le formulaire n'est pas bien saisi
Ligne 38 du code que je t'ai posté.
Mais rien ne t'empèche de rajouter un ELSE à la fin du code.. dans le bloc
// Si aucun élément vide ... envoie du formulaire :
if( nbElemeVide ==0 ){
// ici.. tu pourras faire appel à un AJAX pour envoyer tes données en BDD par exemple ou déclencher le "submit" de ton form.
document.forms["myform"].submit();
}else{
alert("Certains champs ne sont pas remplis..");
}
voici un exemple de formulaire que j'ai fait sur un retaurant avec le javascript:
Et bien tu es donc capable de coder en Javascript la vérification pour tes champs... pourquoi alors nous poser ta question ???
Et donc au final... QUELLE est exactement ton besoin ??
(sachant que je n'écrirait pas le code pour toi.. je ne ferai que t'aider à le faire...)
@loran.. petite remarque.. jordanE s'écrit avec un "E" merci d'y penser....
Cordialement,
Jordane
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question