Copy link to clipboard
Copied
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.
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!
...
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 ne
Copy link to clipboard
Copied
You must be using an older version of DW because Adobe dropped Spry in 2012.
I was never a big fan of Spry framework so I can't help you except to say that I would use jQuery to build conditional form fields and PHP for server-side form processing. See link below on the former.
https://formden.com/blog/conditional-form-field
A form can have only one action and one submit button.
Copy link to clipboard
Copied
The version is CS6. I had no idea they dropped spry.
Copy link to clipboard
Copied
As Nancy has stated, the form can have only one action, hence that is where we should place our logic to send the user to page 2 or page 3,
As far as Spry is concerned, Sites that I developed in 2003 (15 years ago) are still going strong. The menu-bar is the greatest let-down because it was never designed for touch screens.
Copy link to clipboard
Copied
Actually, JavaScript can change the action target upon clicking the submit button. Assuming form validation is being done on the client-side (which should be mimicked on the server-side):
<script>
function validateData(){
// perform form validation here, then...
if({all radio buttons are yes}){ document.getElementById('formName').action = "page2.html"; }
else{ document.getElementById('formName').action = "page3.html"; }
}
</script>
Now, I'm not saying that this is the way it should be done. It isn't. This was purely demonstrative. As pointed out, the proper way would be to submit to a server-side solution (PHP, ColdFusion, ASP, etc.) and use a conditional, there, to determine which message would be displayed to the user.
V/r,
^ _ ^
Copy link to clipboard
Copied
Initially l dont think you need to involve serverside validation at all, its just a case of either or either. Theres presumably nothing to validate if the user gets the message they are not qualified so you would only really need to do some serious validation if the user gets the congratulations message, which is possibly going to include a form and the ability to upload a file.
Copy link to clipboard
Copied
Thank you Ben and Nancy - I didn't know how active this forum was. I thought my question would either be deemed repetitive or just never answered.
Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
Thank you for sharing your code and expertise! This works - much appreciated!