habitatcomms wrote I created a form with spry radio group buttons which are yes/no required. The form works as planned. I placed a submit button at the bottom. How do I accomplish the following 2 actions. - If all radio buttons are set to "yes," i want the submit button to take you to page 2 = "you qualify, please submit application and resume"
- If any buttons are set to "no," I want the submit button to take you to page 3 = "you don't appear to qualify"
Sorry if this is elementary to you folks, but I need this capability for our non-profit website and I can't find the answer online due to my ignorance of this subject and appropriate jargon. Any help greatly appreciated and tax deductable! |
Not Spry, its a bit dated now.....the example below is done with jQuery. You can really treat this as an SPA - Single Page Application. If the user ONLY selects YES then a container which contains the application/resume details opens. If the user selects a NO for any of the questions then another container opens where you can insert your do not qualify message.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Radio Buttons Questions</title>
<style>
body {
font-family: helvetica, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.questionsFormWrapper {
width: 35%;
margin: 0 auto;
border: 1px solid #ccc;
padding: 30px;
}
.questionsFormWrapper h3 {
font-size: 25px;
margin: 0 0 20px 0;
padding: 0;
}
.questionsForm h5 {
font-size: 16px;
margin: 20px 0 8px 0;
padding: 0;
}
.submit {
border: none;
background-color: #000;
color: #fff;
padding: 10px 15px;
margin: 15px 0 0 0;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
}
.not_suitable, .suitable {
display: none;
position: fixed,
top: 0;
width: 100vw;
height: 100vh;
background-color: #f2f2f2;
text-align: center;
}
.d-flex{
display: flex;
align-items: center;
justify-content: center;
}
.error_message {
display: none;
background-color: red;
color: #fff;
text-align: center;
margin: 15px 0 0 0;
padding: 12px;
}
.error_message h4 {
margin: 0;
padding: 0;
font-weight: 400;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
function runMe() {
//check that an option has been selected from each radio group
if($(".questionsForm input[type=radio]:checked").length < 4){
$('.error_message').html('<h4>Please select an option from each question</h4').fadeIn(2000, function(){
$('.error_message').fadeOut(2000);
});
return false;
}
//loop through the radio buttons and get the values
$(".questionsForm input[type=radio]:checked").each(function () {
var radioVal = $(this).val();
//if value No is found show not suitable container
if (radioVal == "No") {
$(".not_suitable").addClass('d-flex').show();
$(".suitable").hide();
$(".questionsFormWrapper").hide();
return false;
}
//if only value Yes is found show suitable container
else {
$(".suitable").addClass('d-flex').show();
$(".not_suitable").hide();
$(".questionsFormWrapper").hide();
}
});
}
</script>
</head>
<body>
<div class="not_suitable">
<div class="not_suitable_content">
<h2>Sorry, your are not suitable</h2>
<p>Content goes here</p>
</div>
</div>
<!-- end not_suitable -->
<div class="suitable">
<div class="suitable_content">
<h2>Congratulations, you are suitable</h2>
<p>Content goes here</p>
</div>
</div>
<!-- end suitable -->
<div class="questionsFormWrapper">
<h3>Questions</h3>
<form name="questionsForm" class="questionsForm">
<span>
<h5>Are you currently employed?</h5>
<input type="radio" name="group1" value="Yes">Yes<input type="radio" name="group1" value="No">No
?</span>
<span>
<h5>Do you hold a valid driving license?</h5>
<input type="radio" name="group2" value="Yes">Yes<input type="radio" name="group2" value="No">No
?</span>
<span>
<h5>Are you aged under 65?</h5>
<input type="radio" name="group3" value="Yes">Yes<input type="radio" name="group3" value="No">No
?</span>
<span>
<h5>Can you work weekends</h5>
<input type="radio" name="group4" value="Yes">Yes<input type="radio" name="group4" value="No">No
?</span>
</form>
<button class="submit" onclick="runMe()">Submit</button>
<div class="error_message"></div>
</div>
<!-- end questionsFormWrapper -->
</body>
</html>
AdChoices