Sujet Précédent Sujet Suivant

Test javascript sur bouton radio

Fermé
Pascale - 18 déc. 2009 à 16:48
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 - 19 déc. 2009 à 20:41
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
A voir également:

9 réponses

Réponse 1 / 9
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
18 déc. 2009 à 17:25
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
Réponse 2 / 9
Pascale
18 déc. 2009 à 17:35
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
Réponse 3 / 9
Pascale
18 déc. 2009 à 17:43
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
Réponse 4 / 9
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
18 déc. 2009 à 18:21 
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

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 9
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
18 déc. 2009 à 18:24
oups j'ai oublié les ; après les return false et true
0
Réponse 6 / 9
Pascale
18 déc. 2009 à 18:42
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
Réponse 7 / 9
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
19 déc. 2009 à 11:51
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
Réponse 8 / 9
Pascale
19 déc. 2009 à 18:10
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
Réponse 9 / 9
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
19 déc. 2009 à 20:41
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

Discussions similaires

Où est la touche SHIFT sur mon clavier d'ordi ?
joe! -
fernando-_ytb -

18 réponses
Bouton ON OFF, O ou I ?
Stargirlfr -
kaparzo23 -

12 réponses
PXE-E61 : media test failure, check cable
laurent -
Amal -

116 réponses
Tester une config
Antoinedu49 -
Utilisateur anonyme -

1 réponse