Test javascript sur bouton radio

Pascale -  
Alain_42 Messages postés 5413 Statut Membre -
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
Configuration: Windows XP Internet Explorer 7.0

9 réponses

  1. Alain_42 Messages postés 5413 Statut Membre 904
     
    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:

    if(form.question1.value == form.question2.value)


    un seul test suffit
    0
  2. Pascale
     
    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
    0
  3. 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
    0
  4. Alain_42 Messages postés 5413 Statut Membre 904
     
    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
    0
  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. Alain_42 Messages postés 5413 Statut Membre 904
     
    oups j'ai oublié les ; après les return false et true
    0
  7. Pascale
     
    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
    0
  8. Alain_42 Messages postés 5413 Statut Membre 904
     
    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

    <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'>
    0
  9. Pascale
     
    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
    0
  10. Alain_42 Messages postés 5413 Statut Membre 904
     
    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.
    0