11536 sujets

JavaScript, DOM et API Web HTML5

Formulaire : Problème avec toogle (JQuery) pour imposer un choix

Bonjour,

Dans le cadre de mon stage, j'ai fait un devis pour un site internet (je peux le donner en MP)

J'ai presque réussit à faire tout ce que je souhaitais sauf une fonctionnalité.

J'ai deux radio buttons (oui ou non pour une même question) qui font apparaitre soit une liste déroulante soit une autre selon le choix. Le problème est que je n'arrive pas à imposer le choix d'une valeur de l'une des deux listes...

J'avais mis des :

- class="none" sur mes select de listes
- et ajouté un toogle comme ceci :

.toggle(function(){ $(this).addClass("validate Smiley required "); },function(){ $(this).removeClass("validate Smiley required "); });

Mais cela ne fonctionne pas...

J'aurai vraiment besoins de votre aide car je ne maitrise pas vraiment Jquery

Merci beaucoup
Modifié par newty (25 Aug 2010 - 11:41)
Bon... j'ai tenté une autre approche :

jQuery("input[@name='enfants_charge']").change(function(){
			alert('Hello world!');
    			if (jQuery("input[@name='enfants_charge']:checked").val() == 'oui')
			{
				alert('Hello world!');
				jQuery("#departement").hide();
				jQuery("#departement_conjoint").hide();
				jQuery("#tr_departement").hide();
				jQuery("#tr_departement_conjoint").hide();

				jQuery("#dpt_residence").removeAttr("style");
				jQuery("#tr_dpt_residence").removeAttr("style");
				jQuery("#dpt_residence").addClass("validate[required]");
			}	
    			else if (jQuery("input[@name='enfants_charge']:checked").val() == 'non')
        		{
				jQuery("#dpt_residence").hide();
				jQuery("#dpt_residence").removeClass("validate[required]");

				jQuery("#departement").show();
				jQuery("#departement_conjoint").show();
				jQuery("#tr_departement").show();
				jQuery("#tr_departement_conjoint").show();
				
				jQuery("#departement").addClass("validate[required]");
				jQuery("#departement_conjoint").addClass("validate[required]");
			}
		});


Le hic c'est que je ne vois pas d'alerte... Je ne rentre donc pas ni dans la fonction ni dans le if. Un problème avec @name ?

Merci Smiley smile
Modifié par newty (25 Aug 2010 - 13:05)
Salut newty,

ben tu fais comme tu veux mais :

* paolo n'est sans doute pas le seul à pouvoir t'aider.

* si ça se trouve il vient juste de partir pour 5 semaines de vacances et il n'est pas prêt de te répondre. Smiley lol

* les balises BBCODE [ code=html] et [ /code] (sans espace après le crochet ouvrant) du forum ont justement été créées pour pouvoir montrer son code à tout le monde.
Modifié par Heyoan (25 Aug 2010 - 14:30)
Salut Smiley smile

Ce n'est pas faux, voici la majeure partie de mon code html


		<table>
		<tr>
			<td>Civilité :</td>
			<td>
				<select name="civilite" id="civilite"  class="validate[required]">
					<option value=""></option>
					<option value="madame">Madame</option>
					<option value="monsieur">Monsieur</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>Nom :</td>
			<td><input type="text" name="nom" class="validate[required,custom[onlyLetter],length[0,100]] text-input" id="nom" /></td>
		</tr>
		<tr>
			<td>Prénom :</td>
			<td><input type="text" name="prenom" class="validate[required,custom[onlyLetter],length[0,100]] text-input" id="prenom" /></td>
		</tr>
		<tr>
			<td>xxxxxxxxxxxxxxxxx</td>
			<td>
				<input type="radio" name="enfants_charge" id="enfants_charge_oui" class="validate[required] radio" value="oui"><label for="enfants_charge_oui">Oui</label>
			    	<input type="radio" name="enfants_charge" id="enfants_charge_non" class="validate[required] radio" value="non"><label for="enfants_charge_non">Non</label>
			</td>
		</tr>
		<tr id="tr_dpt_residence">
			<td>xxxxxxxxxxxxxxxxx</td>
			<td>
				<select name="dpt_residence" id="dpt_residence">
					<option value="" selected>Choix du département</option>
					<option value="01">01 - Ain</option>
					<option value="02">02 - Aisne</option>
					<option value="975">975 - Saint Pierre et Miquelon</option>
					<option value="976">976 - Mayotte</option>				</select>
			</td>
		</tr>
		<tr id="tr_departement">
			<td>Numéro de votre département :</td>
						<td>
				<select name="departement" id="departement">
					<option value="" selected>Choix du département</option>
					<option value="01">01 - Ain</option>
					<option value="02">02 - Aisne</option>
					<option value="975">975 - Saint Pierre et Miquelon</option>
					<option value="976">976 - Mayotte</option>				</select>
			</td>
		</tr>
		<tr id="tr_departement_conjoint">
			<td>Numéro du département de votre conjoint(e):</td>
			<td>
				<select name="departement_conjoint" id="departement_conjoint">
					<option value="" selected>Choix du département</option>
					<option value="01">01 - Ain</option>
					<option value="02">02 - Aisne</option>
					<option value="975">975 - Saint Pierre et Miquelon</option>
					<option value="976">976 - Mayotte</option>				</select>
			</td>
		</tr>
		<tr>
			<td>xxxxxxxxxxxxxxxxx</td>
			<td>
				<input type="radio" name="bien_immobilier"  id="bien_immobilier_oui" class="validate[required] radio" value="oui"><label for="bien_immobilier_oui">Oui</label>
				<input type="radio" name="bien_immobilier"  id="bien_immobilier_non" class="validate[required] radio" value="non"><label for="bien_immobilier_non">Non</label>
			</td>
		</tr>
		<tr>
			<td>xxxxxxxxxxxxxxxxx</td>
			<td><input type="text" name="email" id="email" class="validate[required,custom[email]] text-input" /></td>
		</tr>
		<tr>
			<td>xxxxxxxxxxxxxxxxx</td>
			<td><input type="text" name="conf_email" id="conf_email" class="validate[required,confirm[email]] text-input" /></td>
		</tr>
		<tr>
			<td>xxxxxxxxxxxxxxxxx</td>
			<td>
				<input type="radio" name="recontacter" id="recontacter_oui" class="validate[required] radio" value="oui"><label for="recontacter_oui">Oui</label>
				<input type="radio" name="recontacter" id="recontacter_non" class="validate[required] radio" value="non"><label for="recontacter_non">Non</label>
			</td>
		</tr>
		<tr id="tr_telephone">
			<td>xxxxxxxxxxxxxxxxx</td>
			<td><input type="text" name="telephone"  id="telephone" class="validate[required,custom[onlyNumber],length[0,10]] text-input" /></td>
		</tr>
		</table>
		<input class="submit" type="submit" value="Valider"/>
		</form>
	</div>
	<script type="text/javascript">
		jQuery("#dpt_residence").hide();
		jQuery("#departement").hide();
		jQuery("#departement_conjoint").hide();
		jQuery("#telephone").hide();
		jQuery("#telephone").val("0000000000");
		jQuery("#tr_dpt_residence").hide();
		jQuery("#tr_departement").hide();
		jQuery("#tr_departement_conjoint").hide();
		jQuery("#tr_telephone").hide();
		

		jQuery("input[@name='enfants_charge']").change(function(){
			alert('Hello world!');
    			if (jQuery("input[@name='enfants_charge']:checked").val() == 'oui')
			{
				alert('Hello world!');
				jQuery("#departement").hide();
				jQuery("#departement_conjoint").hide();
				jQuery("#tr_departement").hide();
				jQuery("#tr_departement_conjoint").hide();

				jQuery("#dpt_residence").removeAttr("style");
				jQuery("#tr_dpt_residence").removeAttr("style");
				jQuery("#dpt_residence").addClass("validate[required]");
			}	
    			else if (jQuery("input[@name='enfants_charge']:checked").val() == 'non')
        		{
				jQuery("#dpt_residence").hide();
				jQuery("#dpt_residence").removeClass("validate[required]");

				jQuery("#departement").show();
				jQuery("#departement_conjoint").show();
				jQuery("#tr_departement").show();
				jQuery("#tr_departement_conjoint").show();
				
				jQuery("#departement").addClass("validate[required]");
				jQuery("#departement_conjoint").addClass("validate[required]");
			}
		});


	

		jQuery("input[id='recontacter_oui']").change(function(){
			jQuery("#telephone").val("");
			jQuery("#telephone").toggle();
			jQuery("#tr_telephone").toggle();
		});

		jQuery("input[id='recontacter_non']").change(function(){
			jQuery("#telephone").hide();
			jQuery("#telephone").val("0000000000");
			jQuery("#tr_telephone").hide();
		});	
	</script>
    </div>
</div>

Modifié par Heyoan (25 Aug 2010 - 15:33)
J'ai mis à jour ton code car il était (beaucoup) trop long en supprimant 99% des options de SELECT et en rajoutant =html dans [ code]. Smiley cligne
Le problème venait de l'@

Apparemment, pour les version récentes, il n'y a plus besoin de le mettre Smiley smile
Sujet clos
Aller à