Using a form to determine a url to send the user to

@chris2403Mar 17.2009

Hi,

I Wanted to have a form on my website that when filled in would send the user to a specific url depending on what they submit.

for example, 5 questions with answers numbered 1 to 10 in a sort of 1 is the lowest 10 is the highest way. if a user selects 5,4,6,7,3 it takes them to mydomain.co.uk/54673 or something along those lines. ive tried to be as descriptive as i can but im also unsure weather a javascript or php soloution would be best. thanks in advance for all your help.

regards

chris

to post a comment

JavaScript

9 Comments(s) _↴

@TheBearMayMar 17.2009 — #Assuming 5 text boxes with the numbers you want, and ID's equal T1-T5:

<i>
 </i>var T1val = document.getElementById("T1").value;
 var T2val = document.getElementById("T2").value;
 var T3val = document.getElementById("T3").value;
 var T4val = document.getElementById("T4").value;
 var T5val = document.getElementById("T5").value;
 document.location.url = "http://mydomain.co.uk/"+T1val+T2val+T3val+T4val+T5val;

@chris2403authorMar 17.2009 — #thanks a lot, will check that out now

@chris2403authorMar 17.2009 — #sorry to be so thick but im pretty new to javascript, how would i embed this onto a form, where does each element go? could you possibly give an example of a form with this in use. thankyou very much and sorry to be a pain.

regards

chris

@TheBearMayMar 17.2009 — #

[code=html]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title>Test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <script type="text/javascript">
 function offToWonderLand() {
 var T1val = document.getElementById("T1").value;
 var T2val = document.getElementById("T2").value;
 var T3val = document.getElementById("T3").value;
 var T4val = document.getElementById("T4").value;
 var T5val = document.getElementById("T5").value;
 document.location = "http://mydomain.co.uk/"+T1val+T2val+T3val+T4val+T5val;
 }
 </script>
 </head>
 
 <body>
 <form action="javascript:offToWonderLand()">
 Enter a number: <input type="text" id="T1" /><br />
 Enter a number: <input type="text" id="T2" /><br />
 Enter a number: <input type="text" id="T3" /><br />
 Enter a number: <input type="text" id="T4" /><br />
 Enter a number: <input type="text" id="T5" /><br />
 <input type="submit" value="Go" />
 </form>
 </body>
 </html>[/code]

@chris2403authorMar 17.2009 — #thankyou very much, youve saved my life ?

@chris2403authorMar 17.2009 — #ok, ive tried to change the fields to radioboxes but cant seem to figure it out, could you have a look for me, also is there any way to submit this to a php file which can then return a url. for example post it to results.php which would then send you to the corresponding url.

thankyou

chris

here is what i have so far, no matter what i select it returns http://www.mydomain.co.uk/11111

[code=php]<html>
 <head>
 <title>Test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <script type="text/javascript">
 function advisorSubmit() {
 var T1val = document.getElementById("T1").value;
 var T2val = document.getElementById("T2").value;
 var T3val = document.getElementById("T3").value;
 var T4val = document.getElementById("T4").value;
 var T5val = document.getElementById("T5").value;
 document.location = "http://www.mydomain.co.uk/"+T1val+T2val+T3val+T4val+T5val;
 }
 </script>
 </head>
 
 <body>
 <form action="javascript:advisorSubmit()">
 <b>Office Work:</b> (such as powerpoint presentations and excel spreadsheets)<br><br>
 <input type="radio" name="g1" id="T1" value="1"/>Never<br>
 <input type="radio" name="g1" id="T1" value="2"/>Occasionally<br>
 <input type="radio" name="g1" id="T1" value="3"/>Often
 <br><br>
 
 <b>Internet Browsing:</b><br><br>
 <input type="radio" name="g2" id="T2" value="1"/>Never<br>
 <input type="radio" name="g2" id="T2" value="2"/>Occasionally<br>
 <input type="radio" name="g2" id="T2" value="3"/>Often
 <br><br>
 
 <b>Multimedia Viewing:</b><br><br>
 <input type="radio" name="g3" id="T3" value="1"/>Never<br>
 <input type="radio" name="g3" id="T3" value="2"/>Occasionally<br>
 <input type="radio" name="g3" id="T3" value="3"/>Often
 <br><br>
 
 <b>Multimedia Editing:</b><br><br>
 <input type="radio" name="g4" id="T4" value="1"/>Never<br>
 <input type="radio" name="g4" id="T4" value="2"/>Occasionally<br>
 <input type="radio" name="g4" id="T4" value="3"/>Often
 <br><br>
 
 <b>Gaming:</b><br><br>
 <input type="radio" name="g5" id="T5" value="1"/>Never<br>
 <input type="radio" name="g5" id="T5" value="2"/>Occasionally<br>
 <input type="radio" name="g5" id="T5" value="3"/>Often
 <br><br>
 
 <input type="submit" value="Go" />
 </form>
 </body>
 
 </html>
 
 
 
 [/code]

@TheBearMayMar 17.2009 — #Here's the radio button fix:

[code=html]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title>Test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <script type="text/javascript">
 function advisorSubmit() {
 var T1val = valueChecked("T1");
 var T2val = valueChecked("T2");
 var T3val = valueChecked("T3");
 var T4val = valueChecked("T4");
 var T5val = valueChecked("T5");
 document.location = "http://www.mydomain.co.uk/"+T1val+T2val+T3val+T4val+T5val;
 
 }
 function valueChecked(radioName) {
 var radArr = document.getElementsByName(radioName);
 for (i=0;i<radArr.length;i++){
 if(radArr[i].checked) return radArr[i].value;
 }
 }
 </script>
 </head>
 
 <body>
 <form action="javascript:advisorSubmit()">
 <b>Office Work:</b><br><br>
 <input type="radio" name="T1" value="1"/>Never<br>
 <input type="radio" name="T1" value="2"/>Occasionally<br>
 <input type="radio" name="T1" value="3"/>Often
 <br><br>
 
 <b>Internet Browsing:</b><br><br>
 <input type="radio" name="T2" value="1"/>Never<br>
 <input type="radio" name="T2" value="2"/>Occasionally<br>
 <input type="radio" name="T2" value="3"/>Often
 <br><br>
 
 <b>Multimedia Viewing:</b><br><br>
 <input type="radio" name="T3" value="1"/>Never<br>
 <input type="radio" name="T3" value="2"/>Occasionally<br>
 <input type="radio" name="T3" value="3"/>Often
 <br><br>
 
 <b>Multimedia Editing:</b><br><br>
 <input type="radio" name="T4" value="1"/>Never<br>
 <input type="radio" name="T4" value="2"/>Occasionally<br>
 <input type="radio" name="T4" value="3"/>Often
 <br><br>
 
 <b>Gaming:</b><br><br>
 <input type="radio" name="T5" value="1"/>Never<br>
 <input type="radio" name="T5" value="2"/>Occasionally<br>
 <input type="radio" name="T5" value="3"/>Often
 <br><br>
 
 <input type="submit" value="Go" />
 </form>
 </body>
 
 </html> [/code]

@TheBearMayMar 17.2009 — #If you wanted it to go to results.php, you could strip out all of the javascript, and change the form action to "results.php". It will then send the PHP script a name-value pair for everything in the form that has a name.

@chris2403authorMar 17.2009 — #thankyou very much, your very quick.

Also in #JavaScript _↴

java script error message: object required test.js line: x Code: 0 Char: 1 Slow advertising, I need a solution Creating Words and Letters With Shadow Effect

Success!

Help @chris2403 spread the word by sharing this article on Twitter...

Tweet This

Using a form to determine a url to send the user to

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Using a form to determine a url to send the user to

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴