Test javascript sur bouton radio
Pascale
-
Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention -
Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
j'ai un formulaire de contact en html avec un code php pour le traiter et un code javascript pour tester les champs obligatoires. Tout marche parfaitement.
A ce formulaire, je dois ajouter deux blocs de boutons radio. Ces champs ne sont pas obligatoires, mais je dois les tester s'ils sont remplis.
Ce site est celui d'une traductrice de langues. la 1ère question consiste à demander en quelle langue est le document d'origine et la 2ème question en quelle langue le document doit être traduit.
Les langues possibles sont Français, anglais et espagnol. Ce qui veut dire que si le doc d'origine est en anglais, la langue de destination ne peut forcément pas être en anglais.
l'algo du test est :
Si question1[0]=question2[0] ou question1[1]=question2[1] ou question1[2]=question2[2]
alors message d'erreur
le code du formulaire :
[code]
<fieldset>
<legend>Quelle est la langue d’origine du document ?</legend><br/>
<input name='question1' type='radio' value='Francais'>Français<br/>
<input name='question1' type='radio' value='Anglais'>Anglais<br/>
<input name='question1' type='radio' value='Espagnol'>Espagnol<br/><br/>
</fieldset>
<fieldset>
<legend>Quelle est la langue de destination du document ?</legend><br/>
<input name='question2' type='radio' value='Francais'>Français<br/>
<input name='question2' type='radio' value='Anglais'>Anglais<br/>
<input name='question2' type='radio' value='Espagnol'>Espagnol<br/><br/>
</fieldset>/code
avec en fin de formulaire le message d'erreur caché :
[code]
<span style="display: none;" id="erreurquestion">La langue d'origine du document et la même que celle de destination</span>/code
avec bien sûr en fin de formulaire :
[code]
<input class="bouton" name='valider' type='button' onclick="is_ok(this.form)" value='Valider'>/code
le code javascript pour tester : (qui ne fonctionne pas)
[code]
function test(form) {
var error = false;
if((form.question1.checked = form.question2.checked) || (form.question1[1].checked = form.question2[1].checked)
|| (form.question1[2].checked = form.question2[2].checked))
{
document.getElementById("erreurquestion").style.display = 'block';
var error = true;
}
else {
document.getElementById("erreurquestion").style.display = 'none';
}
if(!error) {
return true;
}
}
function is_ok(form) {
if(test(form)) {
form.submit();
}
}
/code
Pouvez-vous m'aider à modifier ce code pour qu'il fonctionne ?
Je vous remercie infiniment
Pascale
j'ai un formulaire de contact en html avec un code php pour le traiter et un code javascript pour tester les champs obligatoires. Tout marche parfaitement.
A ce formulaire, je dois ajouter deux blocs de boutons radio. Ces champs ne sont pas obligatoires, mais je dois les tester s'ils sont remplis.
Ce site est celui d'une traductrice de langues. la 1ère question consiste à demander en quelle langue est le document d'origine et la 2ème question en quelle langue le document doit être traduit.
Les langues possibles sont Français, anglais et espagnol. Ce qui veut dire que si le doc d'origine est en anglais, la langue de destination ne peut forcément pas être en anglais.
l'algo du test est :
Si question1[0]=question2[0] ou question1[1]=question2[1] ou question1[2]=question2[2]
alors message d'erreur
le code du formulaire :
[code]
<fieldset>
<legend>Quelle est la langue d’origine du document ?</legend><br/>
<input name='question1' type='radio' value='Francais'>Français<br/>
<input name='question1' type='radio' value='Anglais'>Anglais<br/>
<input name='question1' type='radio' value='Espagnol'>Espagnol<br/><br/>
</fieldset>
<fieldset>
<legend>Quelle est la langue de destination du document ?</legend><br/>
<input name='question2' type='radio' value='Francais'>Français<br/>
<input name='question2' type='radio' value='Anglais'>Anglais<br/>
<input name='question2' type='radio' value='Espagnol'>Espagnol<br/><br/>
</fieldset>/code
avec en fin de formulaire le message d'erreur caché :
[code]
<span style="display: none;" id="erreurquestion">La langue d'origine du document et la même que celle de destination</span>/code
avec bien sûr en fin de formulaire :
[code]
<input class="bouton" name='valider' type='button' onclick="is_ok(this.form)" value='Valider'>/code
le code javascript pour tester : (qui ne fonctionne pas)
[code]
function test(form) {
var error = false;
if((form.question1.checked = form.question2.checked) || (form.question1[1].checked = form.question2[1].checked)
|| (form.question1[2].checked = form.question2[2].checked))
{
document.getElementById("erreurquestion").style.display = 'block';
var error = true;
}
else {
document.getElementById("erreurquestion").style.display = 'none';
}
if(!error) {
return true;
}
}
function is_ok(form) {
if(test(form)) {
form.submit();
}
}
/code
Pouvez-vous m'aider à modifier ce code pour qu'il fonctionne ?
Je vous remercie infiniment
Pascale
A voir également:
- Test javascript sur bouton radio
- Test performance pc - Guide
- Test disque dur - Télécharger - Informations & Diagnostic
- Test steam deck oled - Guide
- Test composant pc - Guide
- Radio française - Télécharger - Médias et Actualité
9 réponses
if((form.question1.checked = form.question2.checked...
déja le test c'est == et pas =
form.question1[1].checked = form.question2[1].checked)
un bouton radio ne renvoie pas un array, il poste seulement la value correspondante à celui coché
donc:
un seul test suffit
déja le test c'est == et pas =
form.question1[1].checked = form.question2[1].checked)
un bouton radio ne renvoie pas un array, il poste seulement la value correspondante à celui coché
donc:
if(form.question1.value == form.question2.value)
un seul test suffit
bonjour Alain et merci pour ta réponse.
Je viens donc de modifier mon test en copiant/collant :
if(form.question1.value == form.question2.value)
je fais le test, en effet si je coche les mêmes langies d'orgine et de destination, le message d'erreur est affiché et le mail non envoyé.
Mais si je choisis 2 langues différentes, le message d'erreur est également affiché et l'envoi du mail bloqué, bien sûr.
Merci pour ton aide
Pascale
Je viens donc de modifier mon test en copiant/collant :
if(form.question1.value == form.question2.value)
je fais le test, en effet si je coche les mêmes langies d'orgine et de destination, le message d'erreur est affiché et le mail non envoyé.
Mais si je choisis 2 langues différentes, le message d'erreur est également affiché et l'envoi du mail bloqué, bien sûr.
Merci pour ton aide
Pascale
si je ne coche aucun des boutons (puisque non obligatoire poiur l'envoi), j'obtiens aussi le message d'erreur
la page est ici à toutes fins utiles :
https://www.hugedomains.com/domain_profile.cfm?d=couleurdesign&e=com
et le code donne ceci :
if(form.question1.value == form.question2.value) {
document.getElementById("erreurquestion").style.display = 'block';
var error = true;
}
else {
document.getElementById("erreurquestion").style.display = 'none';
}
Merci encore
Pascale
la page est ici à toutes fins utiles :
https://www.hugedomains.com/domain_profile.cfm?d=couleurdesign&e=com
et le code donne ceci :
if(form.question1.value == form.question2.value) {
document.getElementById("erreurquestion").style.display = 'block';
var error = true;
}
else {
document.getElementById("erreurquestion").style.display = 'none';
}
Merci encore
Pascale
modifies:
<form action="contactmail.php" method="post" name="contactmail" id="contactmail.php" onSubmit="return verif('contactmail');">
etc...
<input class="bouton" name='valider' type='submit' value='Valider'>
et ton JS:
<script type="text/javascript">
function verif(form){
if(form.question1.value !="" && form.question2.value != ""){
if(form.question1.value == form.question2.value){
document.getElementById("erreurquestion").style.display = 'block';
return false
}
}
document.getElementById("erreurquestion").style.display = 'none';
return true
}
</script>
en procedant ainsi si la fct retourne false le formualire ne part pas si true il part
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Pas de problème pour les ; j'ai fait de la programmation, donc je les aurais mis
je viens donc de modifier mon script, ainsi que le html
si je coche français à la 1ère question et français à la seconde, le mail part
donc pas d'erreur et c'est justement ce que je veux éviter
je donne la totalité du script ça sera peut-être plus facile pour toi :
function test(form) {
var error = false;
if(form.nom.value == '') {
document.getElementById("erreurnom").style.display = 'block';
var error = true;
}
else {
document.getElementById("erreurnom").style.display = 'none';
}
if(form.prenom.value == '') {
document.getElementById("erreurprenom").style.display = 'block';
var error = true;
}
else {
document.getElementById("erreurprenom").style.display = 'none';
}
if(form.phone.value == '') {
document.getElementById("erreurphone").style.display = 'block';
var error = true;
}
else {
document.getElementById("erreurphone").style.display = 'none';
}
if(form.email_expediteur.value == '') {
document.getElementById("erreurmail").style.display = 'block';
var error = true;
}
else {
document.getElementById("erreurmail").style.display = 'none';
}
if(!error) {
return true;
}
}
function verif(form) {
if(form.question1.value !="" && form.question2.value != "")
{
if(form.question1.value == form.question2.value){
document.getElementById("erreurquestion").style.display = 'block';
return false;
}
}
document.getElementById("erreurquestion").style.display = 'none';
return true;
}
function is_ok(form) {
if(test(form)) {
form.submit();
}
}
la page html tu peux l'afficher avec le lien que je t'ai donné plus haut
et enfin le php
je supprime les adresses email afin que mon message ne soit pas censuré
<?php
if(get_magic_quotes_gpc()) {
$_POST = array_map('stripslashes', $_POST);
$_GET = array_map('stripslashes', $_GET);
$_COOKIE = array_map('stripslashes', $_COOKIE);
}
// Si le formulaire a été soumis
if(!empty($_POST["nom"]))
{
// les champs du formulaire sont récupérés, leur mise en forme est arrangée
// trim() enlève les espaces en début et fin de chaine
$nom = trim(addslashes($_POST["nom"]));
$prenom = trim(addslashes($_POST["prenom"]));
$phone = trim(addslashes($_POST["phone"]));
$email = trim(addslashes($_POST["email_expediteur"]));
$objet = trim(addslashes($_POST["objet"]));
$question1 = trim(addslashes($_POST["question1"]));
$question2 = trim(addslashes($_POST["question2"]));
$question3 = trim(addslashes($_POST["question3"]));
$question4 = trim(addslashes($_POST["question4"]));
$question5 = trim(addslashes($_POST["question5"]));
$question6 = trim(addslashes($_POST["question6"]));
$message = nl2br(trim(addslashes($_POST["texte"])));
$mon_email = "truc@truc.com";
$msg_pour_moi = "Nom : $nom <br/>
Prénom : $prenom <br/>
Téléphone : $phone <br/>
E-mail : $email <br/>
Langue d'origine : $question1 <br/>
Langue de destination : $question2 <br/>
Support de document : $question3 <br/>
Volume : $question4 <br/>
Traduction assermentée : $question5 <br/>
Délai prestation : $question6 <br/><br/>
Message : <br/> $message";
// adresse email saisie valide
if(VerifMail($email))
{
$domain = explode('@', $email);
if (checkdnsrr($domain[1]))
{
// Envoi du mail
// Préparation de l'entête du message
$entete = "MIME-Version: 1.0\r\n";
$entete .= "Content-type: text/html; charset=iso-8859-1\r\n";
$entete .= "From: <$email>\r\n";
$entete .= "Reply-To: $email\r\n";
// Si le mail a été envoyé
if (mail($mon_email,$objet,$msg_pour_moi,$entete))
{
// Affichage d'un message de confirmation
header ('Location: retour.htm');
}
// Sinon erreur lors de l'envoi
else
{
echo "<p style=\"text-align:center\">Un problème s'est produit lors de l'envoi du message.\n";
// On propose un lien de retour vers le formulaire
echo "<a href=\"".$_SERVER["PHP_SELF"]."\">Réessayez...</a></p>\n";
}
}
// nom de domaine de l'adresse email saisie invalide
else
{
// Retour au formulaire de contact
header ('Location: contactb.htm');
}
}
// adresse email saisie invalide
else
{
// Retour au formulaire de contact
header ('Location: contactb.htm');
}
}
function VerifMail($email)
{
$Syntaxe='#^[\w.-]+@[\w.-]+\.[a-zA-Z]{2,6}$#';
if(preg_match($Syntaxe,$email))
return true;
else
return false;
}
?>
Merci encore pour ton aide
Pascale
je viens donc de modifier mon script, ainsi que le html
si je coche français à la 1ère question et français à la seconde, le mail part
donc pas d'erreur et c'est justement ce que je veux éviter
je donne la totalité du script ça sera peut-être plus facile pour toi :
function test(form) {
var error = false;
if(form.nom.value == '') {
document.getElementById("erreurnom").style.display = 'block';
var error = true;
}
else {
document.getElementById("erreurnom").style.display = 'none';
}
if(form.prenom.value == '') {
document.getElementById("erreurprenom").style.display = 'block';
var error = true;
}
else {
document.getElementById("erreurprenom").style.display = 'none';
}
if(form.phone.value == '') {
document.getElementById("erreurphone").style.display = 'block';
var error = true;
}
else {
document.getElementById("erreurphone").style.display = 'none';
}
if(form.email_expediteur.value == '') {
document.getElementById("erreurmail").style.display = 'block';
var error = true;
}
else {
document.getElementById("erreurmail").style.display = 'none';
}
if(!error) {
return true;
}
}
function verif(form) {
if(form.question1.value !="" && form.question2.value != "")
{
if(form.question1.value == form.question2.value){
document.getElementById("erreurquestion").style.display = 'block';
return false;
}
}
document.getElementById("erreurquestion").style.display = 'none';
return true;
}
function is_ok(form) {
if(test(form)) {
form.submit();
}
}
la page html tu peux l'afficher avec le lien que je t'ai donné plus haut
et enfin le php
je supprime les adresses email afin que mon message ne soit pas censuré
<?php
if(get_magic_quotes_gpc()) {
$_POST = array_map('stripslashes', $_POST);
$_GET = array_map('stripslashes', $_GET);
$_COOKIE = array_map('stripslashes', $_COOKIE);
}
// Si le formulaire a été soumis
if(!empty($_POST["nom"]))
{
// les champs du formulaire sont récupérés, leur mise en forme est arrangée
// trim() enlève les espaces en début et fin de chaine
$nom = trim(addslashes($_POST["nom"]));
$prenom = trim(addslashes($_POST["prenom"]));
$phone = trim(addslashes($_POST["phone"]));
$email = trim(addslashes($_POST["email_expediteur"]));
$objet = trim(addslashes($_POST["objet"]));
$question1 = trim(addslashes($_POST["question1"]));
$question2 = trim(addslashes($_POST["question2"]));
$question3 = trim(addslashes($_POST["question3"]));
$question4 = trim(addslashes($_POST["question4"]));
$question5 = trim(addslashes($_POST["question5"]));
$question6 = trim(addslashes($_POST["question6"]));
$message = nl2br(trim(addslashes($_POST["texte"])));
$mon_email = "truc@truc.com";
$msg_pour_moi = "Nom : $nom <br/>
Prénom : $prenom <br/>
Téléphone : $phone <br/>
E-mail : $email <br/>
Langue d'origine : $question1 <br/>
Langue de destination : $question2 <br/>
Support de document : $question3 <br/>
Volume : $question4 <br/>
Traduction assermentée : $question5 <br/>
Délai prestation : $question6 <br/><br/>
Message : <br/> $message";
// adresse email saisie valide
if(VerifMail($email))
{
$domain = explode('@', $email);
if (checkdnsrr($domain[1]))
{
// Envoi du mail
// Préparation de l'entête du message
$entete = "MIME-Version: 1.0\r\n";
$entete .= "Content-type: text/html; charset=iso-8859-1\r\n";
$entete .= "From: <$email>\r\n";
$entete .= "Reply-To: $email\r\n";
// Si le mail a été envoyé
if (mail($mon_email,$objet,$msg_pour_moi,$entete))
{
// Affichage d'un message de confirmation
header ('Location: retour.htm');
}
// Sinon erreur lors de l'envoi
else
{
echo "<p style=\"text-align:center\">Un problème s'est produit lors de l'envoi du message.\n";
// On propose un lien de retour vers le formulaire
echo "<a href=\"".$_SERVER["PHP_SELF"]."\">Réessayez...</a></p>\n";
}
}
// nom de domaine de l'adresse email saisie invalide
else
{
// Retour au formulaire de contact
header ('Location: contactb.htm');
}
}
// adresse email saisie invalide
else
{
// Retour au formulaire de contact
header ('Location: contactb.htm');
}
}
function VerifMail($email)
{
$Syntaxe='#^[\w.-]+@[\w.-]+\.[a-zA-Z]{2,6}$#';
if(preg_match($Syntaxe,$email))
return true;
else
return false;
}
?>
Merci encore pour ton aide
Pascale
Salut,
Mets tous tes tes dans une seule fonction
et le principe:
chaque bloc de test fait return false si erreur donc on sort de la fonction et le formulaire recevant false ne part pas
a la fin de la fonction on met return true si on est arrivé la c'est qu'il n'y a pas eu d'erreurs, donc le form partira en recevant true
pour la partie html
et supprimes le onclick sur le bouton submit !
Mets tous tes tes dans une seule fonction
et le principe:
chaque bloc de test fait return false si erreur donc on sort de la fonction et le formulaire recevant false ne part pas
a la fin de la fonction on met return true si on est arrivé la c'est qu'il n'y a pas eu d'erreurs, donc le form partira en recevant true
<script type="text/javascript">
//une seule fonction avec tous les tests dedans
function test(form) {
//tests des champs vides
if(form.nom.value == '') {
document.getElementById("erreurnom").style.display = 'block';
return false; //des qu'une erreur est detectee on retourne false donc on sort de la fct et le form ne part pas
}else {
document.getElementById("erreurnom").style.display = 'none';
}
if(form.prenom.value == '') {
document.getElementById("erreurprenom").style.display = 'block';
return false;
}else {
document.getElementById("erreurprenom").style.display = 'none';
}
if(form.phone.value == '') {
document.getElementById("erreurphone").style.display = 'block';
return false;
}else {
document.getElementById("erreurphone").style.display = 'none';
}
//mail
var exp=new RegExp("^[\\w\\-]+(\\.[\\w\\-]+)*@[\\w\\-]+(\\.[\\w\\-]+)*\\.[\\w\\-]{2,}$", "i");
if(form.email_expediteur.value == '') {
document.getElementById("erreurmail").style.display = 'block';
return false;
}else if(form.email_expediteur.value != '' && !exp.test(form.email_expediteur.value)){
document.getElementById("erreurmail").style.display = 'block';
return false;
}else {
document.getElementById("erreurmail").style.display = 'none';
}
//test coherence
if(form.question1.value !="" && form.question2.value != "") {
if(form.question1.value == form.question2.value){
document.getElementById("erreurquestion").style.display = 'block';
return false;
}
}
document.getElementById("erreurquestion").style.display = 'none';
//si on arrive la c'est qu'on a pas trrouvé d'erreur donc on return true, et le form partira
return true;
}
</script>
pour la partie html
<form action="contactmail.php" method="post" name="contactmail" id="contactmail.php" onSubmit="return test('contactmail');">
et supprimes le onclick sur le bouton submit !
<input class="bouton" name='valider' type='submit' value='Valider'>
Ok Alain
si je comprends bien, tu me fais modifier la totalité de mon code qui fonctionne parfaitement bien pour n'ajouter qu'un seul test ?
je ne suis pas programmeur en javascript mais en C et C++
Je pensais qu'en javascript, c'était comme en C, ajouter un test ne demandait pas de modifier la totalité du code....
je vais donc suivre tes conseils et tester
je te dis ensuite
Merciiii
bon week-end
Pascale
si je comprends bien, tu me fais modifier la totalité de mon code qui fonctionne parfaitement bien pour n'ajouter qu'un seul test ?
je ne suis pas programmeur en javascript mais en C et C++
Je pensais qu'en javascript, c'était comme en C, ajouter un test ne demandait pas de modifier la totalité du code....
je vais donc suivre tes conseils et tester
je te dis ensuite
Merciiii
bon week-end
Pascale
oui mais javascript a une relation avec le code de la partie html
hors tu avait mis un appel de fonction JS sur le onClick du bouton submit
ce qui fait que ce dernier postait le form et appelait la fonction
et tu avait mis un autre appel de fonction JS sur le onSubmit de <form...
ça fait un fonctionnement aléatoire
la méthode que je t'ai donné est celle préconisée.
hors tu avait mis un appel de fonction JS sur le onClick du bouton submit
ce qui fait que ce dernier postait le form et appelait la fonction
et tu avait mis un autre appel de fonction JS sur le onSubmit de <form...
ça fait un fonctionnement aléatoire
la méthode que je t'ai donné est celle préconisée.