This task seemed simple at first, but I quickly realized it's more challenging than expected. Apologies in advance, as Javascript is not my strong suit.
My goal is to have the main button (Get Your New Rate) perform different actions based on whether the user selects YES or NO on the last of the 3 styled radio buttons.
Thank you for any assistance you can provide!
To view the current page layout, click here:
<div class="radioSelection">
<input type="radio" id="radioLicenseYes" name="radioLicense"><label for="radioLicenseYes" class="radioYes">YES</label>
<input type="radio" id="radioLicenseNo" name="radioLicense"><label for="radioLicenseNo" class="radioNo">NO</label>
</div>
<button class="getRate">Get Your New Rate</button>
<script type='text/javascript'>
function CheckLicense() {
var licenseYes = document.getElementById("radioLicenseYes");
var licenseNo = document.getElementById("radioLicenseNo");
if(licenseYes.checked) {
$(".getRate").click(function() {
$("#questions").fadeOut(500);
$("#loadingAnim").delay(500).fadeIn(1).delay(7000).fadeOut(500);
$("#loading1").delay(500).fadeIn(500).delay(1500).fadeOut(500);
$("#loading2").delay(3000).fadeIn(500).delay(1500).fadeOut(500);
$("#loading3").delay(5500).fadeIn(500).delay(1500).fadeOut(500);
$("#qualify").delay(8000).fadeIn(500);
$("#redirecting").delay(8800).fadeIn(1);
$("#loadingAnim2").delay(8800).fadeIn(1);
});
}
else if(licenseNo.checked) {
$(".getRate").click(function() {
$("#questions").fadeOut(500);
$("#noQualify").delay(500).fadeIn(500);
});
}
}