2 select update a textfield
Hello i have build a small script in jquery for a formular
The way is
User use select field => if select it activate the second select
If user select the second, it compare value of first select and second, and output on textfield value
My script is not so good, actually running if user change one, and change the second, i get the good value
But if user come back on first it does'nt update the textfield
I think it miss a adlistner or something like
Code:
$("#inputCotisation").css({ opacity: 0.3 });
$("#inputMontant").css({ opacity: 0.3 });
$('#inputPersonnes').change(function() {
//interaction première select
if($(this).find('option:selected').val() == "0" ){$("#inputCotisation").css({ opacity: 0.3 });}
else { $('#inputCotisation').fadeTo("slow", 1);} });
//interaction second select
$('#inputCotisation').change(function() {
if($(this).find('option:selected').val() == "0" ){$("#inputMontant").css({ opacity: 0.3 }); }
else {
if(($(this).find('option:selected').val() == "Niveau 1") && ($('#inputPersonnes').find('option:selected').val() == "Seul")){$('#inputMontant').val('5,45 €');};
if(($(this).find('option:selected').val() == "Niveau 1") && ($('#inputPersonnes').find('option:selected').val() == "Couple")){$('#inputMontant').val('8,73 €');};
if(($(this).find('option:selected').val() == "Niveau 1") && ($('#inputPersonnes').find('option:selected').val() == "Famille")){$('#inputMontant').val('10,91 €');};
if(($(this).find('option:selected').val() == "Niveau 2") && ($('#inputPersonnes').find('option:selected').val() == "Seul")){$('#inputMontant').val('6,25 €');};
if(($(this).find('option:selected').val() == "Niveau 2") && ($('#inputPersonnes').find('option:selected').val() == "Couple")){$('#inputMontant').val('10,25 €');};
if(($(this).find('option:selected').val() == "Niveau 2") && ($('#inputPersonnes').find('option:selected').val() == "Famille")){$('#inputMontant').val('12,91 €');};
if(($(this).find('option:selected').val() == "Niveau 3") && ($('#inputPersonnes').find('option:selected').val() == "Seul")){$('#inputMontant').val('7,05 €');};
if(($(this).find('option:selected').val() == "Niveau 3") && ($('#inputPersonnes').find('option:selected').val() == "Couple")){$('#inputMontant').val('11,76 €');};
if(($(this).find('option:selected').val() == "Niveau 3") && ($('#inputPersonnes').find('option:selected').val() == "Famille")){$('#inputMontant').val('14,91 €');};
$('#inputMontant').fadeTo("slow", 1);
}
});
Code:
<select name="inputPersonnes" id="inputPersonnes" >
<option value="0">---Sélectionnez---</option>
<option value="Seul">Moi</option>
<option value="Couple">Mon couple</option>
<option value="Famille">Ma famille</option>
</select>
<select name="inputCotisation" id="inputCotisation">
<option value="0">---Sélectionnez---</option>
<option value="Niveau 1">50 €</option>
<option value="Niveau 2">75 €</option>
<option value="Niveau 3">100 €</option>
</select>
<input type="text" id="inputMontant" name="inputMontant" placeholder="Calcul de votre cotisation" readonly="readonly" >
Any idea to correct my script
Thanks to the community