Highlighted

submit button action(s)

New Here ,
Jul 26, 2018

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.

  1. 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"
  2. 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!

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.

  1. 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"
  2. 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>

Views

348

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

submit button action(s)

New Here ,
Jul 26, 2018

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.

  1. 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"
  2. 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!

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.

  1. 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"
  2. 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>

Views

349

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 26, 2018 0
Adobe Community Professional ,
Jul 26, 2018

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.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 26, 2018 1
New Here ,
Jul 27, 2018

Copy link to clipboard

Copied

The version is CS6. I had no idea they dropped spry.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 27, 2018 0
Adobe Community Professional ,
Jul 26, 2018

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 26, 2018 1
LEGEND ,
Jul 27, 2018

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 27, 2018 1
LEGEND ,
Jul 27, 2018

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 27, 2018 0
New Here ,
Jul 27, 2018

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 27, 2018 0
LEGEND ,
Jul 27, 2018

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.

  1. 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"
  2. 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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 27, 2018 1
New Here ,
Jul 27, 2018

Copy link to clipboard

Copied

Thank you for sharing your code and expertise! This works - much appreciated!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 27, 2018 0