I just wrote a jQuery code for a form so when the user is switching Names (see the snippet), if there was a selection made for the Car , it is reset, while the Transmission selection remains (if a radio button was selected).
Now I would like to display the message in <div class="formalertmsg">Please select a car.</div> if when switching Names , a Transmission is selected, and Car is NOT selected. Otherwise, it should be hidden. Here's my code so far:
var nameRadio = $(".radio-838 input") ;
var carRadio = $(".radio-839 input") ;
var transmissionRadio = $(".radio-60 input");
//Reset the Car selection when a change has been made on the Name
function carInit() {
carRadio.prop("checked", false);
}
nameRadio.on("change", carInit);
// Alert msg when no Car is selected and a Transmission is selected
function checkCar (){
if(transmissionRadio.is(":checked") && carRadio.not(":checked")){
$(".formalertmsg").show();
}
else{
$(".formalertmsg").hide();
}
}
nameRadio.on("change", checkCar);
carRadio.on("change", checkCar);
$(window).on('load', checkCar );
<script src="http://ift.tt/1oMJErh"></script>
<div class="formel" id="formtde">
<h3>Name</h3>
<p>
<span class="radio-838">
<span class="first">
<label>
<input type="radio" name="radio-838" value="JOHN">
<span>JOHN</span>
</label>
</span>
<span class="last">
<label>
<input type="radio" name="radio-838" value="BOBBY">
<span>BOBBY</span>
</label>
</span>
</span>
</p>
</div>
<div class="formel" id="formgec">
<h3>Car</h3>
<p>
<span class="radio-839">
<span class="first">
<label>
<input type="radio" name="radio-839" value="FORD">
<span>FORD</span>
</label>
</span>
<label>
<input type="radio" name="radio-839" value="CHEVROLET">
<span>CHEVROLET</span>
</label>
<label>
<input type="radio" name="radio-839" value="PORSCHE">
<span>PORSCHE</span>
</label>
<label>
<input type="radio" name="radio-839" value="NISSAN">
<span>NISSAN</span>
</label>
</span>
</p>
<div class="formalertmsg">
Please select a car.
</div>
</div>
<div class="formel">
<h3>Transmission</h3>
<p>
<span class="radio-60">
<span class="first">
<label>
<input type="radio" name="radio-60" value="MANUAL">
<span>MANUAL</span>
</label>
</span>
<span class="last">
<label>
<input type="radio" name="radio-60" value="AUTO">
<span>AUTO</span>
</label>
</span>
</span>
</p>
</div>
The message triggers correctly but it won't disappear when the user selects a Car although I'm triggering the checkCar function with carRadio.on("change", checkCar);. Can someone please explain to me why? And help me correct this without rewriting all my code from scratch? Thank you, Kim.
Aucun commentaire:
Enregistrer un commentaire