I'm completely new to coding - I can do some basic HTML. I'm trying to create an interactive story for a friend of mine, where I was to create a form which redirects to different pages based on keywords in a form.
ie. "What colour is the sky?" with a submit form box.
If they type 'blue' it sends them to Page A. If they type 'green' or 'yellow' it sends them to Page B. If they type 'black' it sends them to Page C.
I don't think this is too complex - I just can't find anywhere which explains how to do something like this.
I know I would need to do a HTML form and either use PHP or Javascript to do this. My only limitation would be that I'd want to ensure it can work on mobile devices.
Any suggestions or do you know any sites where I can go to work out how to send a user to a specific page based on a form answer?
Thanks so much!
-Rach.
Here is one example with javascript: http://jsfiddle.net/YeEuy/
There is no submit button, the event is checked after each keystroke.
In PHP, you can use header()
function to make server-side redirect by sending Location
http-response header with desired URL to redirect to as its value:
header('Location: http://example.com/');
On the page proceeding your form, check the $_POST
variables then redirect based on that.
if ($_POST['answer'] == "blue") {
header('Location: http://blue.com/');
} else if ($_POST['answer'] == "yellow") {
header('Location: http://yellow.com/');
}
without using server side languages like php you can use jquery
<input id="input1" type="text" />
<button id="p" type="button">Click Me!</button>
<script type="text/javascript">
$(document).ready(function(){
$("#p").click(function(){
if($("input1").val()=="blue")
{
window.location = "pagea.html";
}
if($("input1").val()=="green")
{
window.location = "pageb.html";
}
});
});
</script>