[RESOLU] Bouton "Imprimer"

Idfix
Invité n'ayant pas de compte PHPfrance

07 sept. 2016, 22:03

Bonsoir.

Je me lance dans le codage d'un formulaire et je me retrouve devant une difficulté. En effet, mon bouton "Imprimer" en bas de page ne fonctionne pas. Pour une impression simple, j'y suis arrivé mais mon but, c'est qu'il ne soit accessible que si certains champs sont remplis. Et c'est là que je sèche. Pouvez-vous m'aider, s'il vous plait ?

J'aimerai non pas un code tout fait mais bel et bien comprendre comment on construit cette fonction, s'il vous plait !


Voici mon code :

Code : Tout sélectionner

<html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type" /> <title>Formulaire de préinscription 2016-2017</title> <script language="javascript" type="text/javascript"> function compare() { if (document.getElementById('mail').value != document.getElementById('mailconfirm').value) { alert('Erreur'); } else { document.getElementById('form1').submit(); } } function verif() { if (document.getElementById('date').value != "" && document.getElementById('lieu').value != "" && document.getElementById('Nom').value != "" && document.getElementById('Prenom').value != "" && document.getElementById('Naissance').value != "" && document.getElementById('sexe').value != "" && document.getElementById('classe').value != "" && document.getElementById('adresse').value != "" && document.getElementById('mail').value != "" && document.getElementById('mailconfirm').value != "" && document.getElementById('activite1').value != "" && document.getElementById('cotisation').value != "" && document.getElementById('mode').value != "" && document.getElementById('GSM').value != "") { window.print(); return false; } else { return false; } } .marge { margin-left: 10em; } </script> </head> <body> <fieldset> <p align="center" style="margin-left:30px;"><b>Formulaire de préinscription 2016-2017<br> Centre Artistique Provence Verdon</b></p> </fieldset> <br> <form method="post" action=""> <fieldset> <legend align="center">Date et lieu d'inscription</legend> <!-- Titre du fieldset --> <p align="center"><label for="Date">Date</label> : <input type="date" name="date" id="date" placeholder="jj/mm/aaaa" required />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label for="Nom">Lieu</label> : <input type="text" name="lieu" id="lieu" required />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Inscrit en 2015/2016<input type="checkbox" name="deja" id="deja" /></p> </fieldset> <br> <fieldset> <legend align="center"><b>Adhérent</b></legend> <!-- Titre du fieldset --> <p align="center"> <label for="Nom">Nom</label> : <input type="text" name="nom" id="nom" required />&nbsp;&nbsp;&nbsp;<label for="Prénom">Prénom</label> : <input type="text" name="prénom" id="prenom" required /> </p> <p align="center"> <label for="Naissance">Né(e) le</label> : <input type="date" name="naissance" id="naissance" placeholder="jj/mm/aaaa" required />&nbsp;&nbsp;&nbsp; Sexe<input type="radio" name="sexe" value="masc" id="sexe" /> <label for="masc">M</label><input type="radio" value="fem" name="sexe" id="sexe" /> <label for="fem">F</label>&nbsp;&nbsp;&nbsp;<label for="classe">Classe</label> : <input type="text" name="classe" id="classe" required /> </p> <!--<div><a onClick="this.nextSibling.style.display=((this.nextSibling.style.display=='none')?'':'none');" href="javascript:;">Si l'élève est mineur, cliquer ici</a></a><span style="display: none;">Coucou !</font></span></div></p> --> </fieldset> <br> <fieldset> <legend align="center"><b>Coordonnées</b></legend> <!-- Titre du fieldset --> <p align="center"> <label for="adresse">Adresse postale</label> <textarea name="adresse" id="adresse"></textarea>&nbsp&nbsp&nbsp&nbsp&nbsp<label for="GSM">Numéro de téléphone portable</label> : <input type="tel" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$" name="GSM" id="GSM" size="12" placeholder="06XXXXXXXX" maxlength="10" required /> </p> <p align="center">Adresse mail (contact) : <input id="mail" name="Adresse mail (contact)" type="email" oncopy="return false;" oncut="return false;" required/><br/><br/> Confirmation de l'adresse mail : <input id="mailconfirm" name="Confirmation de l'adresse mail" type="email" onchange="compare();" onpast="return false;" required/> </p> </fieldset> <br> <fieldset> <legend align="center"><b>Responsables légaux (pour les adhérents mineurs)</b></legend> <p align="center"> <label for="Nom"><b>Nom et prénom du père</b></label> : <input type="text" name="nom" id="nomp" /> </p> <p align="center"> <label for="adresse">Adresse postale (si différente)</label> <textarea name="adresse" id="adressep"></textarea>&nbsp&nbsp&nbsp&nbsp&nbsp<label for="GSM">Numéro de téléphone portable</label> : <input type="tel" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$" name="GSM" id="GSMp" size="12" placeholder="06XXXXXXXX" maxlength="10" /> </p> <p align="center">Adresse mail (contact) : <input id="mailp" name="Adresse mail (contact)" type="email" oncopy="return false;" oncut="return false;" /><br/><br/> Confirmation de l'adresse mail : <input id="mailconfirmp" name="Confirmation de l'adresse mail" type="email" onchange="compare();" onpast="return false;" /> </p> <HR align=center> <br> <p align="center"> <label for="Nom"><b>Nom et prénom de la mère</b></label> : <input type="text" name="nom" id="nomm" /> </p> <p align="center"> <label for="adresse">Adresse postale (si différente)</label> <textarea name="adresse" id="adressem"></textarea>&nbsp&nbsp&nbsp&nbsp&nbsp<label for="GSM">Numéro de téléphone portable</label> : <input type="tel" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$" name="GSM" id="GSMm" size="12" placeholder="06XXXXXXXX" maxlength="10" /> </p> <p align="center"> Adresse mail (contact) : <input id="mailm" name="Adresse mail (contact)" type="email" oncopy="return false;" oncut="return false;" /><br/><br/> Confirmation de l'adresse mail : <input id="mailconfirmm" name="Confirmation de l'adresse mail" type="email" onchange="compare();" onpast="return false;" /> </p> </fieldset> <br> <fieldset> <legend align="center"><b>Activités</b></legend> <!-- Titre du fieldset --> <p align="center"> <label for="Activité">Quelle activité choisie ?</label> <select name="Activité" id="activite1" required> <option value="" selected disabled></option> <optgroup label="Musique"> <option value="Guitare">Guitare</option> <option value="Basse">Basse</option> <option value="Flûte">Flûte</option> <option value="Batterie">Batterie</option> <option value="Eveil musical">Eveil musical</option> <option value="Groupe vocal">Groupe vocal</option> <optgroup label="Expression corporelle"> <option value="Théâtre">Théâtre</option> <option value="Danse">Danse</option> </select> &nbsp;&nbsp;&nbsp; <label for="Activité">Une deuxième ? <i>(optionnel)</i></label> <select name="Activité" id="activite2" > <option value="" ></option> <optgroup label="Musique"> <option value="Guitare">Guitare</option> <option value="Basse">Basse</option> <option value="Flûte">Flûte</option> <option value="Batterie">Batterie</option> <option value="Eveil musical">Eveil musical</option> <option value="Groupe vocal">Groupe vocal</option> <optgroup label="Expression corporelle"> <option value="Théâtre">Théâtre</option> <option value="Danse">Danse</option> </select> &nbsp;&nbsp;&nbsp; <label for="Activité">Une troisième ? <i>(optionnel)</i></label> <select name="Activité" id="activite2" > <option value="" ></option> <optgroup label="Musique"> <option value="Guitare">Guitare</option> <option value="Basse">Basse</option> <option value="Flûte">Flûte</option> <option value="Batterie">Batterie</option> <option value="Eveil musical">Eveil musical</option> <option value="Groupe vocal">Groupe vocal</option> <optgroup label="Expression corporelle"> <option value="Théâtre">Théâtre</option> <option value="Danse">Danse</option> </select> </p> <p align="center"> <label for="Nom">Cotisation annuelle</label> : <input type="text" name="cotisation" id="cotisation" required /> </p> <p align="center"> <label for="Nom">Frais de prélèvement</label> : <input type="text" name="prelevement" id="prelevement" required /> </p> <p align="center">Mode de paiement : <input type="radio" name="mode" value="cheque" id="mode" /> <label for="mode">Chèque</label> <input type="radio" name="mode" value="prelevement" id="mode" /> <label for="mode">Prélèvement</label> <input type="radio" name="mode" value="troischeques" id="mode" /> <label for="mode">Trois chèques</label> </p> <p align="center"> <label for="Nom">Nom du détenteur du compte</label> : <input type="text" name="nom" id="nom" required /> </p> </fieldset> <br> <fieldset> <legend align="center"><b>Vos souhaits</b></legend> <!-- Titre du fieldset --> <br> <textarea name="souhait" id="souhait"></textarea> </fieldset> <br> <fieldset> <label for="adresse"><b>Signature :</b></label> <br><br><br><br><br> </fieldset> <br> <fieldset> <legend align="center"><b>IMPORTANT !!</b></legend> <!-- Titre du fieldset --> <p align="center"> LES INSCRIPTIONS SONT SOUSCRITES POUR L’ANNEE ENTIERE.<br><br> ELLES NE SERONT DEFINITIVEMENT PRISES EN COMPTE QU’EN ÉCHANGE DU MOYEN DE PAIEMENT<br><br> <b>J’ACCEPTE</b> &nbsp <b>JE N’ACCEPTE PAS</b> &nbsp LA PUBLICATION DE PHOTOS OU FILM CONTENANT MON IMAGE OU CELLE DE MON ENFANT (rayer la mention inutile) </p> </fieldset> <div id="printBox"> <div class="Printbutton"> <input type="submit" name="bouton" id="bouton" value="Imprimer" onclick="verif()"/></div> </div> </form> </body> </html>
J'espère qu'il n'est pas trop dégueux.


Merci par avance ! :)


Idfix.

Avatar de l’utilisateur
Administrateur PHPfrance
Administrateur PHPfrance | 7256 Messages

07 sept. 2016, 23:01

Bonjour,

Quel est le problème ?
A quel niveau ça bloques ?

As tu regardé dans la console Javascript de ton navigateur pour voir si il n'y avait pas d'erreur ? (Ctrl + Maj + i sous Firefox ou Chrome)
Quand tout le reste a échoué, lisez le mode d'emploi...

Idfix
Invité n'ayant pas de compte PHPfrance

08 sept. 2016, 22:05

Salut, @rthur !

Merci pour ton aide. Le problème se situe au niveau du bouton Imprimer qui... n'imprime pas...

Dans la console, j'ai ca :

SyntaxError: expected expression, got '.'

Aucune idée de ce que ca veut dire... Une idée ?

Merci ! :)


Idfix.

Avatar de l’utilisateur
Modérateur PHPfrance
Modérateur PHPfrance | 8755 Messages

09 sept. 2016, 09:14

salut,

cela indique une erreur de syntaxe (sisi) tu dois pouvoir cliquer sur le message pour aller à la source sinon il indique (normalement) le fichier et la ligne concernée.

dans ton cas tu as du css au bout du code JS (enfin sur ce que tu nous montre plus haut)
=> .marge {
margin-left: 10em;
}

en supprimant cela il n'y a pas de problème avec le code que tu fournis.

est ce que c'est consultable en ligne ?
@+
Il en faut peu pour être heureux ......

Idfix
Invité n'ayant pas de compte PHPfrance

09 sept. 2016, 13:48

Salut, moogli.


En effet, tu as raison, c'est bien ce code CSS qui foutait le ouaille. Merci pour ton aide ! Tout fonctionne bien, désormais...


Bien content d'être passé voir des gens compétents ! :D


A bientôt !