Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add the ability to redirect based on a radio button chosen. #374

Closed
wants to merge 2 commits into from
Closed

Add the ability to redirect based on a radio button chosen. #374

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
54731fa
Adds the ability to redirect based on contents of form input with exa…
tsmorgan Apr 13, 2017
be1c9db
Switched the ordering of the data and redirect instruction.
tsmorgan Apr 18, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 12 additions & 7 deletions docs/documentation_routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,16 +45,21 @@ router.get('/examples/template-data', function (req, res) {

// Branching

router.get('/examples/over-18', function (req, res) {
// get the answer from the query string (eg. ?over18=false)
var over18 = req.query.over18
router.get('/examples/branch/aliens', function (req, res) {
// get the answer from the query string (eg. ?aliens=2)
// we convert to a number as data in HTTP is always a string
var aliens = Number(req.query.aliens)

if (over18 === 'false') {
if (aliens > 5) {
// redirect to the relevant page
res.redirect('/docs/examples/under-18')
res.redirect('/docs/examples/branch/too-many-aliens')
return
} else if (aliens >= 1 && aliens <= 5) {
res.redirect('/docs/examples/branch/some-aliens')
return
} else {
// if over18 is any other value (or is missing) render the page requested
res.render('examples/over-18')
// everything looks ok, render the requested page
res.render('examples/branch/aliens')
}
})

Expand Down
30 changes: 30 additions & 0 deletions docs/views/examples/branch/aliens.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
{% extends "layout.html" %}

{% block page_title %}
Example - Branching - Some aliens
{% endblock %}

{% block content %}
<main id="content" role="main">

{% include "includes/breadcrumb_examples.html" %}

<div class="grid-row">
<div class="column-two-thirds">

<h1 class="heading-xlarge">
No aliens sighted
</h1>

<p>
This is normal.
</p>

<p>
<a href="/docs/examples/branching">Back to the branching example</a>
</p>

</div>
</div>
</main>
{% endblock %}
30 changes: 30 additions & 0 deletions docs/views/examples/branch/director.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
{% extends "layout.html" %}

{% block page_title %}
Example - Branching - Director
{% endblock %}

{% block content %}
<main id="content" role="main">

{% include "includes/breadcrumb_examples.html" %}

<div class="grid-row">
<div class="column-two-thirds">

<h1 class="heading-xlarge">
Director
</h1>

<p>
Congratulations, you are a director of a limited company.
</p>

<p>
<a href="/docs/examples/branching">Back to the branching example</a>
</p>

</div>
</div>
</main>
{% endblock %}
30 changes: 30 additions & 0 deletions docs/views/examples/branch/employed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
{% extends "layout.html" %}

{% block page_title %}
Example - Branching - Employed
{% endblock %}

{% block content %}
<main id="content" role="main">

{% include "includes/breadcrumb_examples.html" %}

<div class="grid-row">
<div class="column-two-thirds">

<h1 class="heading-xlarge">
Employed
</h1>

<p>
Congratulations, you are employed.
</p>

<p>
<a href="/docs/examples/branching">Back to the branching example</a>
</p>

</div>
</div>
</main>
{% endblock %}
30 changes: 30 additions & 0 deletions docs/views/examples/branch/self-employed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
{% extends "layout.html" %}

{% block page_title %}
Example - Branching - Self-employed
{% endblock %}

{% block content %}
<main id="content" role="main">

{% include "includes/breadcrumb_examples.html" %}

<div class="grid-row">
<div class="column-two-thirds">

<h1 class="heading-xlarge">
Self-employed
</h1>

<p>
Congratulations, you are self-employed.
</p>

<p>
<a href="/docs/examples/branching">Back to the branching example</a>
</p>

</div>
</div>
</main>
{% endblock %}
30 changes: 30 additions & 0 deletions docs/views/examples/branch/some-aliens.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
{% extends "layout.html" %}

{% block page_title %}
Example - Branching - Some aliens
{% endblock %}

{% block content %}
<main id="content" role="main">

{% include "includes/breadcrumb_examples.html" %}

<div class="grid-row">
<div class="column-two-thirds">

<h1 class="heading-xlarge">
Some aliens sighted
</h1>

<p>
You have seen some aliens, we will send someone to investigate.
</p>

<p>
<a href="/docs/examples/branching">Back to the branching example</a>
</p>

</div>
</div>
</main>
{% endblock %}
30 changes: 30 additions & 0 deletions docs/views/examples/branch/too-many-aliens.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
{% extends "layout.html" %}

{% block page_title %}
Example - Branching - Lots of aliens
{% endblock %}

{% block content %}
<main id="content" role="main">

{% include "includes/breadcrumb_examples.html" %}

<div class="grid-row">
<div class="column-two-thirds">

<h1 class="heading-xlarge">
Lots of aliens sighted!
</h1>

<p>
Stay calm, we are sending the army.
</p>

<p>
<a href="/docs/examples/branching">Back to the branching example</a>
</p>

</div>
</div>
</main>
{% endblock %}
92 changes: 66 additions & 26 deletions docs/views/examples/branching.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@
<div class="grid-row">
<div class="column-two-thirds">

<form action="/docs/examples/over-18" method="get" class="form">

<h1 class="heading-xlarge">
Branching
</h1>
Expand All @@ -23,41 +21,83 @@ <h1 class="heading-xlarge">
</p>

<p>
You can see the code for this example here:
You can make this happen by including <code class="code">, redirect(&lt;url&gt;)</code> after the data in your radio button values. For example:</URL>
</p>

<div class="code">
/docs/documentation_routes.js
/docs/views/examples/branching.html
<div class="code" style="width:150%;overflow:auto;margin-bottom:30px">
&#x3C;div class=&#x22;multiple-choice&#x22;&#x3E;
&#x3C;input id=&#x22;workStatusEmp&#x22; type=&#x22;radio&#x22; name=&#x22;work_status&#x22; value=&#x22;employed, redirect(branch/employed)&#x22;&#x3E;
&#x3C;label for=&#x22;workStatusEmp&#x22;&#x3E;Employed&#x3C;/label&#x3E;
&#x3C;/div&#x3E;
&#x3C;div class=&#x22;multiple-choice&#x22;&#x3E;
&#x3C;input id=&#x22;workStatusSelf&#x22; type=&#x22;radio&#x22; name=&#x22;work_status&#x22; value=&#x22;selfemployed, redirect(branch/self-employed)&#x22;&#x3E;
&#x3C;label for=&#x22;workStatusSelf&#x22;&#x3E;Self-employed&#x3C;/label&#x3E;
&#x3C;/div&#x3E;
&#x3C;div class=&#x22;multiple-choice&#x22;&#x3E;
&#x3C;input id=&#x22;workStatusDir&#x22; type=&#x22;radio&#x22; name=&#x22;work_status&#x22; value=&#x22;director, redirect(branch/director)&#x22;&#x3E;
&#x3C;label for=&#x22;workStatusDir&#x22;&#x3E;Director of a limited company&#x3C;/label&#x3E;
&#x3C;/div&#x3E;
</div>

<h2 class="heading-medium">
Are you 18 or over?
</h2>
<form action="/docs/examples/branching" method="get" class="form">

<div class="form-group">
<fieldset class="inline">
<div class="form-group">

<legend class="visuallyhidden">Are you 18 or over?</legend>
<h2 class="heading-medium">
What is your employment status?
</h2>

<div class="multiple-choice">
<input id="over18True" type="radio" name="over18" value="true">
<label for="over18True">Yes</label>
</div>
<fieldset class="">

<div class="multiple-choice">
<input id="over18False" type="radio" name="over18" value="false">
<label for="over18False">No</label>
</div>
<legend class="visuallyhidden">What is your employment status?</legend>

</fieldset>
</div>
<div class="multiple-choice">
<input id="workStatusEmp" type="radio" name="work_status" value="employed, redirect(branch/employed)">
<label for="workStatusEmp">Employed</label>
</div>

<div class="form-group">
<input type="submit" class="button" value="Continue">
</div>
<div class="multiple-choice">
<input id="workStatusSelf" type="radio" name="work_status" value="selfemployed, redirect(branch/self-employed)">
<label for="workStatusSelf">Self-employed</label>
</div>

<div class="multiple-choice">
<input id="workStatusDir" type="radio" name="work_status" value="director, redirect(branch/director)">
<label for="workStatusDir">Director of a limited company</label>
</div>

</fieldset>
</div>

<div class="form-group">
<input type="submit" class="button" value="Continue">
</div>

</form>

<p>&nbsp;</p>

<h2 class="heading-large">Advanced method</h2>

<p>You can write some 'route' code to branch on any kind of input.</p>

<p>You can see the code for this in <span class="code">/docs/documentation_routes.js</span></p>

<p>&nbsp;</p>

<form action="/docs/examples/branch/aliens" method="get" class="form">

<div class="form-group">
<label class="form-label-bold" for="aliens">How many aliens did you see?</label>
<p class="form-hint">Enter 0, 5 or 20 to see the branching pages</p>
<input type="text" class="form-control" name="aliens" id="aliens">
</div>

<div class="form-group">
<input type="submit" class="button" value="Continue">
</div>

</form>
</form>

</div>
</div>
Expand Down
26 changes: 25 additions & 1 deletion lib/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,13 +209,36 @@ var storeData = function (input, store) {
}
}

// check for `redirect(<url>)` in submitted form data
// and optionally a value that's been passed too (ie. `redirect(<url>),<data>` )

var checkRedirect = function (formdata) {
if (Object.keys(formdata).length !== 0) {
for (var key in formdata) {
if (typeof formdata[key] === 'string') {
var match = formdata[key].match(/([^,]*).*redirect\(([^)]*)\)?/)
if (match !== null) {
// update the data for saving to session
formdata[key] = match[1] || match[2]

// return the redirect destination url
return match[2]
}
}
}
}
return null
}

// Middleware - store any data sent in session, and pass it to all views

exports.autoStoreData = function (req, res, next) {
if (!req.session.data) {
req.session.data = {}
}

var redirect = checkRedirect(req.query) || checkRedirect(req.body)

storeData(req.body, req.session)
storeData(req.query, req.session)

Expand All @@ -227,5 +250,6 @@ exports.autoStoreData = function (req, res, next) {
res.locals.data[j] = req.session.data[j]
}

next()
if (redirect) res.redirect(redirect)
else next()
}