11496 sujets

JavaScript, DOM et API Web HTML5

Formulaire de sélection, affichage selon le clique

Bonjour,

Sur un nouvelle page de mon site je doit faire affiché des procédures d'activation de 3 de nos caméras sous forme de pdf.

L'idée est de faire un formulaire de sélection qui, à la toute fin, affiche le fichiers demandé.

page: -http://www.spypoint.com/activation/

5 champ:
choix de la caméra
choix du pays
choix du fournisseur (affichage selon le pays sélectionné)
option (pour la caméra LIVE seulement)
choix de la langue


1 - Si je clique sur "LIVE", tous les champs sont disponible l'un après l'autre...
2 - Si en 2e, je clique sur "internationale", ça doit m'emmené directement au "options" pour LIVE ou directement au choix de langue pour LIVE-3G.
3 - Si je clique sur "WiFi", ça m'amène directement au choix de langue.


Nous avions fait affaire avec un programmeur, qui a fait une bonne partie du travail, mais a rendu un truc bugé...

Voilà qu'on rendre le projet et le dit programmeur ne répond plus.

Après plusieurs corrections, j'ai pu débuggé une bonne parti du formulaire, mais il reste encore un truc qui ne fonctionne pas correctement. Le point 1 fonctionnait déjà à l'origine. J'ai réussi à faire fonctionné le point 3. Reste que le point 2... et c'est là que je bloque.

Il s'agit de faire en sorte que le champ "fournisseurs" ne s'affiche pas lorsque l'on clique sur "internationale".

Si quelqu'un peu m'aider à ce niveau, ça me rendrait un grand service!

Voilà où j'en suis dans mon code js:
// JavaScript Document

$(document).ready(function() {
	function resetForm(hidden) {
		$(hidden).each(function(i, e) { $(e).hide(); }); // hide every element 
		$(document).find("select").each(function(i, e) { $(e).prop("selectedIndex", 0); });
		$(document).find("input[type=radio]").each(function(i, e) {
			$(e).closest("p").attr("class") != "cameras" && $(e).prop("checked", false);
		});
	}
	
	var ps = new Array();
	
	var pPays = $("p.pays");
	var pFourn = $("p.fournisseurs");
	var pOptions = $("p.option");
	var pLangue = $("p.langue");
	var pOk = $("p.ok");
	hidden = [ pPays, pFourn, pOptions, pLangue, pOk ];
	
	var showOptions = false;
	var showPays = false;
	var showFourn = false;
	
	// reset form by default
	resetForm(hidden);
	
	$("p.cameras input[name=cameras]").change(function() {
		// reset form on change
		resetForm(hidden);
		showOptions = false;
		showPays = false;
			
		var name = $(this).attr("id");
		if($(this).is(":checked") && name == "live") {
			showOptions = true; // raise show option flag
		} else { showOptions = false; }
		
		var name = $(this).attr("id");
		if($(this).is(":checked") && name == "wifi") {
			showPays = true; // raise show option flag
		} else { showPays = false; }
	});
	
	$("p.cameras input[name=cameras]").change(function() {
		if($(this).val() != "wifi") {
			// show next section
			if(showPays) {
				// show langue
				$(pLangue).show();
			} else {
				// show pays
				$(pPays).show();
			}
		}
	});
	
	
	$("p.pays input[name=pays]").change(function() {	
		var name = $(this).attr("id");
		if($(this).is(":checked") && name == "intl") {
			showFourn = true; // raise show option flag
		} else { showFourn = false; }
	});
	
	
	$("p.pays input[name=pays]").change(function() {
		// reset every fournisseurs
		
		var pays = $(this);
		$(pFourn).find("select[name=fournisseurs]").prop("selectedIndex", 0);
		// hide invalid fournisseur for next section
		$(pFourn).find("select[name=fournisseurs] option").each(function(i, e) {
			$(e).show();
			if(i > 0 && $(e).attr("data-pays") != pays.val() && pays.val() != "INTL") {
				$(e).hide();
			}
		});
		
		
		// show next section
		$(pFourn).show();
	});
	
	$("p.fournisseurs select[name=fournisseurs]").change(function() {
		if($(this).val() != "choisir") {
			// show next section
			if(showOptions) {
				// show options
				$(pOptions).show();
			} else {
				// show langue
				$(pLangue).show();
			}
		}
	});
	
	// option
	$("p.option input[name=option]").change(function() {
		$(pLangue).show();
	});
	
	// langue
	$("p.langue input[name=langue]").change(function() {
		$(pOk).show();
	});
});

Modifié par juliesunset (03 Jun 2013 - 21:53)
Petite avancé
J'ai réussi à régler le point 2, donc concrètement mon formulaire fonctionne correctement. Il n'y a que sous iE9 que la sélection des fournisseurs ne se fait pas correctement.

Mon nouveau code js:
// JavaScript Document

$(document).ready(function() {
	function resetForm(hidden) {
		$(hidden).each(function(i, e) { $(e).hide(); }); // hide every element 
		$(document).find("select").each(function(i, e) { $(e).prop("selectedIndex", 0); });
		$(document).find("input[type=radio]").each(function(i, e) {
			$(e).closest("p").attr("class") != "cameras" && $(e).prop("checked", false);
		});
	}
	
	var ps = new Array();
	
	var pPays = $("p.pays");
	var pFourn = $("p.fournisseurs");
	var pOptions = $("p.option");
	var pLangue = $("p.langue");
	var pOk = $("p.ok");
	hidden = [ pPays, pFourn, pOptions, pLangue, pOk ];
	
	var showOptions = false;
	var showPays = false;
	var showFourn = false;
	
	// reset form by default
	resetForm(hidden);
	
	$("p.cameras input[name=cameras]").change(function() {
		// reset form on change
		resetForm(hidden);
		showOptions = false;
		showPays = false;
			
		var name = $(this).attr("id");
		if($(this).is(":checked") && name == "live") {
			showOptions = true; // raise show option flag
		} else { showOptions = false; }
		
		var name = $(this).attr("id");
		if($(this).is(":checked") && name == "wifi") {
			showPays = true; // raise show option flag
		} else { showPays = false; }

		if($(this).val() != "wifi") {
			// show next section
			if(showPays) {
				// show langue
				$(pLangue).show();
			} else {
				// show pays
				$(pPays).show();
			}
		}
	});
	
	
	$("p.pays input[name=pays]").change(function() {
		
		showFourn = false;
			
		var name = $(this).attr("id");
		if($(this).is(":checked") && name == "intl") {
			showFourn = false; // raise show option flag
		} else { showFourn = true; }
	

		// reset every fournisseurs
		if($(this).val() != "INTL") {	
			var pays = $(this);
			$(pFourn).find("select[name=fournisseurs]").prop("selectedIndex", 0);
			// hide invalid fournisseur for next section
			$(pFourn).find("select[name=fournisseurs] option").each(function(i, e) {
				$(e).show();
				if(i > 0 && $(e).attr("data-pays") != pays.val() && pays.val() != "INTL") {
					$(e).hide();
				}
			});
		
		
			// show next section
			$(pFourn).show();
		
		} else {
			if(showOptions) {
				// show options
				$(pOptions).show();;
			} else {
				// show langue
				$(pLangue).show();
			}
		}

	});
	
	$("p.fournisseurs select[name=fournisseurs]").change(function() {
		if($(this).val() != "choisir") {
			// show next section
			if(showOptions) {
				// show options
				$(pOptions).show();
			} else {
				// show langue
				$(pLangue).show();
			}
		}
	});
	
	// option
	$("p.option input[name=option]").change(function() {
		$(pLangue).show();
	});
	
	// langue
	$("p.langue input[name=langue]").change(function() {
		$(pOk).show();
	});
});


Je vous mets mon code php aussi, je pense que le problème sous iE9 vient de là mais j'ignore où pour le moment...
<form method="post" class="proc">
	<fieldset>
    	<legend class="gradient-gray">
    	<h2><?php
		if($lang == "FR"){ echo 'Procédure d\'activation';}
		else{ echo 'Activation procedure';} ?></h2>
    	</legend>
        <?php
		if (!empty($_POST['lang'])){
			$lang = $_POST['lang'];
		}
        if (!empty($_POST['ok'])){
						
			$cameras = trim($_POST['cameras']);
            $pays = trim($_POST['pays']);
            $fournisseur = strtoupper($_POST['fournisseurs']);
            $option = strtoupper(trim($_POST['option']));
            $langue = strtoupper(trim($_POST['langue']));
			
			?><p class="fichier">
			<?php
			if($cameras == 'LIVE'){
				echo'<a href="/activation/procedures/LIVE-';
				if($pays == 'INTL'){
					echo 'INTL-'.$option.'-'.$langue.'.pdf" class="bouton"><span class="ico_archives" aria-hidden="true"></span>LIVE-INTL-'.$option.'-'.$langue.'.pdf</a>';
				}
				else{
					echo $pays.'-'.$fournisseur.'-'.$option.'-'.$langue.'.pdf" class="bouton"><span class="ico_archives" aria-hidden="true"></span>LIVE-'.$pays.'-'.$fournisseur.'-'.$option.'-'.$langue.'.pdf</a>';
				}
			}
			else{
				echo'<a href="/activation/procedures/';
				if($pays == 'INTL'){
					echo $cameras.'-INTL-'.$langue.'.pdf" class="bouton"><span class="ico_archives" aria-hidden="true"></span>'.$cameras.'-INTL-'.$langue.'.pdf</a>';
				}
				elseif($pays != 'INTL'){
					if($cameras == 'LIVE-3G'){
						echo 'LIVE-3G-'.$pays.'-'.$fournisseur.'-'.$langue.'.pdf" class="bouton"><span class="ico_archives" aria-hidden="true"></span>LIVE-3G-'.$pays.'-'.$fournisseur.'-'.$langue.'.pdf</a>';
					}
					if($cameras == 'WiFi'){
						echo 'WiFi-'.$langue.'.pdf" class="bouton"><span class="ico_archives" aria-hidden="true"></span>WiFi-'.$langue.'.pdf</a>';
					}
				}
			}
			?></p><?php
		}
		
		ob_start();
		// récuperation code js ds var php
		
		// fin recup code js ds var php
		$preprocess["js"][] = ob_get_clean();
		
		?>
        
		<p class="cameras">
			<label><?php
				if($lang == "FR"){ echo 'Sélectionner une caméras:';}
				else{ echo 'Select a camera:';}?> </label>
			<span><input name="cameras" id="live" type="radio" value="LIVE"><label for="live"><img src="/Images/photosProduits/LIVE/LIVE_logo.gif" width="80" height="39" alt="LIVE"></label>
			<input name="cameras" id="live3g" type="radio" value="LIVE-3G"><label for="live3g"><img src="/Images/photosProduits/LIVE-3G/LIVE-3G_logo.gif" width="80" height="39" alt="LIVE-3G"></label>
				<input name="cameras" id="wifi" type="radio" value="WiFi"><label for="wifi"><img src="/Images/photosProduits/WiFi/WiFi_logo.gif" width="80" height="39" alt="WiFi"></label></span>
        </p>
		
        <p class="pays"><label><?php
				if($lang == "FR"){ echo 'Choisir un pays:';}
				else{ echo 'Select a country:';}?> </label>
        	<span><input name="pays" id="ca" type="radio" value="CA"><label for="canada">Canada</label>
            <input name="pays" id="usa" type="radio" value="USA"><label for="usa"><?php
				if($lang == "FR"){ echo 'États-Unis';}
				else{ echo 'United States';}?></label>
            <input name="pays" id="intl" type="radio" value="INTL"><label for="intl"><?php
				if($lang == "FR"){ echo 'Internationale';}
				else{ echo 'International';}?></label></span>
        </p>
		
        <p class="fournisseurs">
			<label for="fournisseurs"><?php
				if($lang == "FR"){ echo 'Choisir un fournisseur:';}
				else{ echo 'Choosing a provider:';}?> </label>
			<select name="fournisseurs" id="fournisseurs">
				<option selected value="choisir"><?php
				if($lang == "FR"){ echo '--choisir--';}
				else{ echo '--select--';}?></option>
				<?php
					$select = mysql_query('SELECT fournisseurs, pays FROM fournisseurs_cell WHERE pays = "Canada" OR pays = "USA" ORDER BY fournisseurs') or die("186 - ".mysql_error());
					while ($data = mysql_fetch_array($select)){
						$p = "";
						if($data["pays"] == "Canada") { $p = "CA"; }
						else { $p = $data["pays"]; }
						?>
					<option value="<?php echo $data['fournisseurs'] ?>" data-pays="<?=$p?>"><?php echo $data['fournisseurs']; ?></option>
						<?php
					}
				?>
			</select>
        </p>
		
        <p class="option">
			<label>Option : </label>
        	<span><input name="option" id="mms" type="radio" value="mms"><label for="mms">MMS</label>
            <input name="option" id="email" type="radio" value="email"><label for="email">Email</label>

			<input name="option" id="myspypoint" type="radio" value="myspypoint"><label for="myspypoint">mySPYPOINT™</label></span>
        </p>
		
        <p class="langue">
			<label><?php
				if($lang == "FR"){ echo 'Choisir une langue:';}
				else{ echo 'Choose a language:';}?> </label>
        	<span><input name="langue" id="fr" type="radio" value="fr"><label for="fr"><?php
				if($lang == "FR"){ echo 'Français';}
				else{ echo 'French';}?></label>
            <input name="langue" id="en" type="radio" value="en"><label for="en"><?php
				if($lang == "FR"){ echo 'Anglais';}
				else{ echo 'English';}?></label>
            <input name="langue" id="de" type="radio" value="de"><label for="de"><?php
				if($lang == "FR"){ echo 'Allemand';}
				else{ echo 'Deutsh';}?></label></span>
        </p>
		
        <p class="ok">
			<label></label>
           <input name="ok" type="submit" value="OK" /></p>
    </fieldset>
    <fieldset class="switch">
<?php
	if($lang == "FR"){ echo '<input name="lang" id="EN" type="submit" value="View in english">';}
	else{ echo '<input name="lang" id="FR" type="submit" value="Afficher en français">';}?> 
    </fieldset>
</form>
Sujet clos
Aller à