Fomulaire inscription html/javascript

Fermé

gringo - 6 déc. 2008 à 23:46
Neils - 13 déc. 2008 à 03:41

Bonjour,
Je viens vers vous car je ne parviens pas à débugger moi même ma page web. Mon problème est simple, je souhaite faire une page html contenant un formulaire (type formulaire d'inscription à un forum) qui renvoit sur une autre page si les champs sont remplis (pour l'instant je m'en tiens au fait qu'il soit rempli, je verrais plus tard le fait qu'ils soient correctement remplis).

Je poste donc mon code, en espérant que quelqu'un puisse me sortir de la panade.

<html>
<link href="..\CSS\style.css" rel="stylesheet" type="text/css">
<body class="style1">
<center>Veuillez remplir le formulaire ci-dessous afin de vous inscrire en tant que membre </center><br><br><br>

<form name="forum" method="post" action="Inscription.html" onSubmit="return verification(this.form)">
<table border=0 align="center">
<tr><td>Nom<font color="red">*</font></td><td><input type="texte" name="nom"></td></tr>
<tr><td>Prenom<font color="red">*</font></td><td><input type="texte" name="prenom"></td></tr>
<tr><td>Pseudo<font color="red">*</font></td><td><input type="texte" name="pseudo"></td></tr>
<tr><td>Adresse mail<font color="red">*</font></td><td><input type="texte" name="mail"></td></tr>
<tr><td>Adresse</td><td><input type="texte" name="adresse"></td></tr>
<tr><td>Telephone</td><td><input type="texte" name="numtel"></td></tr>
</table>
</form>

<center>
<center><input type="button" value="Inscription" onClick="verification(forum)" src="..\Jscript\biblio.js"></center>
</body>
</html>

et mon code Java script associé

function verification(x)

{

if(x.nom.value == '') // s'il manque le nom
{
alert('Merci de saisir votre nom');
}
if(x.prenom.value == '') // s'il manque le prenom
{
alert('Merci de saisir votre prŽnom');
}
if(x.pseudo.value == '') // s'il manque le pseudo
{
alert('Merci de saisir votre matricule');
}
if(x.mail.value == '') // s'il manque le mail
{
alert('Merci de saisir votre numŽro de tŽlŽphone');
}
if(x.adresse.value == '') // s'il manque l'adresse
{
alert('Merci de saisir votre numŽro de tŽlŽphone');
}
if(x.numtel.value == '') // s'il manque le tŽl
{
alert('Merci de saisir votre numŽro de tŽlŽphone');
}
else
{
x.go.click();
}
}

Voila, étant débutant en programmation, je prend tous les conseils et toutes les remarque, notamment sur la syntaxe.

Merci d'avance

A voir également:

Fomulaire inscription html/javascript
Wetransfer gratuit sans inscription - Guide
Twitter inscription - Guide
WeTransfer - Télécharger - Téléchargement & Transfert
Instagram inscription gratuite - Guide
Paypal rdc inscription - Guide

2 réponses

Réponse 1 / 2

gringo
7 déc. 2008 à 12:15

Ok, merci pour les remarques. Quelques questions quand même. Concrètement pourquoi mon html est mal structuré ? et d'autre part, j'ai cherché un peu à droit à gauche mais je ne comprend pas l'intérêt du doctype, et ou est-ce qu'on l'intègre d'ailleurs ?

Donc mon code, légèrement modifié :

<html>

<head>
<script language="javascript" src="..\jscript\biblio.js" type="text/javascript"></script>
<link href="..\CSS\style.css" rel="stylesheet" type="text/css">
</head>

<body class="style1">
<center>Veuillez remplir le formulaire ci-dessous afin de vous inscrire en tant que membre </center>

<br><br><br>

<form name="forum" method="post" action="Inscription.html" onSubmit="return verification(this.form)">

<table border=0 align="center">
<tr><td>Nom<font color="red">*</font></td><td><input type="texte" name="nom"></td></tr>

<tr><td>Prenom<font color="red">*</font></td><td><input type="texte" name="prenom"></td></tr>

<tr><td>Pseudo<font color="red">*</font></td><td><input type="texte" name="pseudo"></td></tr>

<tr><td>Adresse mail<font color="red">*</font></td><td><input type="texte" name="mail"></td></tr>

<tr><td>Adresse</td><td><input type="texte" name="adresse"></td></tr>

<tr><td>Telephone</td><td><input type="texte" name="numtel"></td></tr>

</table>

</form>

<center>

<center><input type="button" value="Inscription" onClick="verification(forum)"></center>

</body>

</html>

Neils
13 déc. 2008 à 03:41

Pour le Doctype, je te ferais un petit résumé plus tard car malgré tout c'est, si ce n'est compliqué, cela reste une norme consice à adopter avec précaution.
Ton code HTML.
<html>
<head>
<script language="javascript" src="biblio.js" type="text/javascript"></script>
<link href="..\CSS\style.css" rel="stylesheet" type="text/css">
</head>
<body class="style1">
<center>Veuillez remplir le formulaire ci-dessous afin de vous inscrire en tant que membre </center>
<br><br><br>
<form name="forum" method="post" action="Inscription.html" onSubmit="return verification(this.form)">
<table border=0 align="center">
<tr><td>Nom<font color="red">*</font></td><td><input type="texte" name="nom"></td></tr>
<tr><td>Prenom<font color="red">*</font></td><td><input type="texte" name="prenom"></td></tr>
<tr><td>Pseudo<font color="red">*</font></td><td><input type="texte" name="pseudo"></td></tr>
<tr><td>Adresse mail<font color="red">*</font></td><td><input type="texte" name="mail"></td></tr>
<tr><td>Adresse</td><td><input type="texte" name="adresse"></td></tr>
<tr><td>Telephone</td><td><input type="texte" name="numtel"></td></tr>
</table>
</form>
<center>
<center><input type="button" value="Inscription" onClick="verification(forum)"></center>
</body>
</html>
Ton script biblio qui va bien avec (je ne rentre pas dans les détails, car ce script je l'ai réalisé vite fait. Il devrait fonctionner avec tous les navigateurs modernes, compatibles DOM. Pour les autres rien bien de compliqué dans l'adaptation mais je n'ai vraiment pas le temps de taper un code exhaustif. A toi de pousser les investigations (http://www.quirksmode.org/ le site de référence)
Ta fonction initiale modifiée et commentée :
function verification( el )
{
if( el.getElementsByTagName ) // si la propriété getElementsByTagName existe (DOM)
{
fields = el.getElementsByTagName('input'); // recherche de tous les tags 'Input'
for( i = 0; i< fields.length; i++ ) // parcours des champs de type 'input'
if( !fields[i].value.replace(/^\s+/g,'').length ) // si le contenu du champ est vide,
alert (fields[i].name + ' est vide'); // affichage d'un message
} else { // sinon
el.go.click(); // peu de chance d'arriver ici :)
}
}

Enjoy,
Neils

Réponse 2 / 2

Neils
7 déc. 2008 à 03:24

<input type="button" value="Inscription" onClick="verification(forum)" src="..\Jscript\biblio.js">
Mauvaise inclusion de fichier externe --> src="..\Jscript\biblio.js"
Tu ajoutes un head dans lequel tu mets :
<script language="javascript" src="..\jscript\biblio.js" type="text/javascript"></script>
et tu retires src="..\Jscript\biblio.js" de la balise input.
Le javascript tout comme le css doit être préloadé avant le chargement du dom (en théorie, mais dans la pratique cela s'avère un peu plus compliqué).
Néanmoins et de prime abord :
- Il te manque le doctype,
- Il te manque le head,
- le html est mal structuré,
- le javascript est simpliste

hum, jettes un oeil sur http://fr.selfhtml.org/ pour débuter

Enjoy,

Discussions similaires

Comment regarder un film complet sans inscriptions et gratuit ?

Comment créer un compte torrent ?