Forum Moderators: open
Im trying to create a form like the one below, where user are directed to certain pages depending on their answers.
<snip>
But need the site users to be redirected to different pages depending on the combination of their yes and no answers.
Does anyone know how to do this just using html and a bit of simple javascript, as im not a expert, YET.
Hope you guys can help
Cheers
Robert
[edited by: engine at 4:14 pm (utc) on Nov. 2, 2009]
[edit reason] Please see WebmasterWorld TOS [/edit]
First, only add Javascript to enhance, not as the only way to do what you want to do. If it is Javascript dependent, it will fail if JS is disabled and search engines cannot follow your forms/links - they don't execute JS.
So what you need here is a server-side language, most people seem to like PHP these days but it can be anything.
The second idea is it may not be "different pages." it may be a single script, outputting different HTML based on the input of the user. Example:
header("content-type:text/html");
if (isset($_POST['option-one-selected'])) {
print "option one selection page here";
}
else if (isset($_POST['option-two-selected'])) {
print "option two selection page here";
}
else {
print "Default entry page here."
}
This is much more efficient and easier to pass variables around if done in a single script. So this is where you need to start, get this working without Javascript.
Then you can go back and enhance what you've done by applying JS, so it works both with and without.
I'll have a look into those cheers.
i've done this for now but don't really think its correct, it seems to work, but would rather have it correct as you said.
<script type="text/javascript" language="JavaScript">
function ActionDeterminator()
{
if(document.form1.question1[0].checked == true) {
document.form1.action = 'no_claim.html';
}
if(document.form1.question1[0].checked == false) {
document.form1.action = 'no_claim.html';
}
if(document.form1.question2[1].checked == true) {
document.form1.action = 'submit_page.html';
}
if(document.form1.question2[1].checked == false) {
document.form1.action = 'submit_page.html';
}
if(document.form1.question3[2].checked == true) {
document.form1.action = 'submit_page.html';
}
if(document.form1.question3[2].checked == false) {
document.form1.action = 'no_claim.html';
}
if(document.form1.question4[3].checked == true) {
document.form1.action = 'no_claim.html';
}
if(document.form1.question4[3].checked == false) {
document.form1.action = 'no_claim.html';
}
if(document.form1.question5[4].checked == true) {
document.form1.action = 'submit_page.html';
}
if(document.form1.question5[4].checked == false) {
document.form1.action = 'submit_page.html';
}
return true;
}
// -->
</script>
By the way are you in vegas next week for the webmasterworld.com conference?
Rob
[edited by: tedster at 5:22 pm (utc) on Nov. 2, 2009]
[edit reason] url removed [/edit]
<script type="text/javascript">
Language attribute is deprecated and not needed.
Second, you only have to check for "checked" and assume "unchecked" is false.
if (theCheckboxOrRadio.checked) { alert('it is checked'); }
else { alert("it ain't checked"); }
I'm a little confused by the overall structure of the if's. Taking the first two if's
if(document.form1.question1[0].checked == true) {
document.form1.action = 'no_claim.html';
}
if(document.form1.question1[0].checked == false) {
document.form1.action = 'no_claim.html';
}
Both return the same result - no_claim.html.
One "if" after the other, run "inline" like this, causes the action to get changed over and over and come out the other end with the last value set - which I am guessing is the desired effect (if it's working) but you might try to combine the entire block into a simplified if/else. This is probably incorrect, but try this approach:
if (
(document.form1.question2[1].checked) ¦¦
(! document.form1.question2[1].checked) ¦¦
(document.form1.question3[2].checked) ¦¦
(document.form1.question5[4].checked) {
document.form1.action = 'submit_page.html';
}
else {
document.form1.action = 'no_claim.html';
}
As said, a bit confused as to the goal, but just to give you an idea. The ! means "not", so evaluation means "this radio is not checked."
Last, this
return true;
is not **really** what you want. Return true or false does different things, based on the context. You probably have something like
<a href="" onClick="ActionDeterminator()">click</a>
or
<input type="button" onClick="ActionDeterminator()" value="submit">
The way the return value of this function should work is to return false to stop the link from navigating or stop the form from submitting.
<a href="" onClick="return ActionDeterminator()">click</a>
<form action="" onSubmit="return ActionDeterminator()">
By the way are you in vegas next week for the webmasterworld.com conference?
Hah. I wish. I am a working coder, haven't had a "vacation" in 7 years, would love to meet everyone but have to bring the bacon home. Have fun! :-)
I'm going to try your way.
What im after is that:-
Question 1,3 and 4 can only be answered yes for it to direct users to submit_page.html but if any are no it must send them to no_claim.html
question 3 and 5 can be answered either yes or no it doesn't matter.
I'm pretty new to javastript. So you think your above example should work for me?
Cheers
Robert
Here's my form with your javascript
If you could help that would be great as i'm in a bit of rush to get done as my boss is losing patience.
Thanks again
Robert
<script type="text/javascript" language="JavaScript">
function ActionDeterminator()
{
if (
(document.form1.question1[1].checked == true) ¦¦
(! document.form1.question2[1].checked == true) ¦¦
(document.form1.question3[2].checked == true) ¦¦
(document.form1.question5[4].checked == true) {
document.form1.action = 'submit_page.html';
}
else {
document.form1.action = 'no_claim.html';
}
return true;
}
// -->
</script>
<form name="form1" id="form1" action="" method="get" onsubmit="return ActionDeterminator();"/>
<table>
<tr>
<td> <label>1. Have you a credit card or loan agreement taken out before April 2007?</label></td>
<td><label>
<input type="radio" name="question1" value="yes" id="question1" />
Yes</label>
<label>
<input type="radio" name="question1" value="no" id="question1" />
No</label>
</td>
</tr>
<tr>
<td> <label>2. Is payment protection insurance (PPI) attached to any of your agreement/s?</label></td>
<td>
<label>
<input type="radio" name="question2" value="yes" id="question2" />
Yes</label>
<label>
<input type="radio" name="question2" value="no" id="question2" />
No</label>
</td>
</tr>
<tr>
<td> <label>3. Is your balance/s in excess of £1000?</label>
<td>
<label>
<input type="radio" name="question3" value="yes" id="question3" />
Yes</label>
<label>
<input type="radio" name="question3" value="no" id="question3" />
No</label>
</td>
</tr>
<tr>
<td> <label>4. Was the original agreement/s taken out for less than £25,000?</label></td>
<td>
<label>
<input type="radio" name="question4" value="yes" id="question3" />
Yes</label>
<label>
<input type="radio" name="question4" value="no" id="question3" />
No</label>
</td>
</tr>
<tr>
<td> <label>5. Have you got 12 months or more payments left on your agreement/s?</label></td>
<td>
<label>
<input type="radio" name="question5" value="yes" id="question3" />
Yes</label>
<label>
<input type="radio" name="question5" value="no" id="question3" />
No</label>
</td>
</tr>
<tr>
<td align="center" class="button">
<label for="button"></label>
<input type="image" src="images/claim_button.gif" name="button" id="button" value="submit" onClick="return ActionDeterminator();" /></td>
</tr>
</table>
</form>
<script language="javascript" type="text/javascript">
//You should create the validator only after the definition of the HTML form
var frmvalidator = new Validator("form1");
//frmvalidator.EnableMsgsTogether();
frmvalidator.addValidation("question1","selone_radio","You must answer question 1");
frmvalidator.addValidation("question2","selone_radio","You must answer question 2");
frmvalidator.addValidation("question3","selone_radio","You must answer question 3");
frmvalidator.addValidation("question4","selone_radio","You must answer question 4");
frmvalidator.addValidation("question5","selone_radio","You must answer question 5");
</script>
[edited by: tedster at 6:18 pm (utc) on Nov. 3, 2009]
[edit reason] use example.com [/edit]
my boss is losing patience.
Sometimes "I don't know" is a perfectly valid answer, and sets the stage for a good relationship with an employer.
Your simplifed javascript is just resetting the form.
Which is why I italicized approach - it was not working code, just an approach to complex conditions. :-)
First stop for a JS newbie: 1) work in Firefox and 2) download and install the Error Console plug in. It's an invaluable tool. Load the page, and open the console to debug.
Found the beef!
Question 1,3 and 4 can only be answered yes for it to direct users to submit_page.html but if any are no it must send them to no_claim.htmlquestion 3 and 5 can be answered either yes or no it doesn't matter.
The second sentence is conflicting with the first, so going on the assumption you meant 2 or 5.
Second stop: before testing, validate the document [validator.w3.org] as HTML errors can kick Javascript errors.
I'll introduce some new stuff here, I don't have time to explain - but study it and sort out what the working code is doing. Note the proper applications of labels, changes in ID's, and wrapping **only** around the label itself. (unrelated to your problem, but important) These are accessibility tools, not presentation markup.
I hate to bring it up, but should anyway: what do you do if Javascript is disabled by the user?
Tested and working code.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- note you DON'T NEED XHTML IF YOU ARE WORKING WITH VANILLA HTML -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>App Sample</title>
<script type="text/javascript">
// Question 1,3 and 4 can only be answered yes for it to direct users to
// submit_page.html, but if any are no it must send them to no_claim.html
// question 2 and 5 can be answered either yes or no it doesn't matter.
function ActionDeterminator() {
var msg,radio,isSubmitPage,destination;
isSubmitPage=0;
msg='';
for (i=1;i<=5;i++) {
radio = eval('document.form1.question'+i);
if ((! radio[0].checked) &&
(! radio[1].checked)) {
msg += 'Please provide an answer to question ' + i +'.\n';
}
// IMPORTANT - use the actual pipe character,
// not ¦, this message board breaks them!
if (
((i==1) ¦¦ (i==3) ¦¦ (i==4)) &&
(radio[0].checked)
) { isSubmitPage=1; }
}
destination=(isSubmitPage==1)?'submit_page.html':'no_claim.html';
if (msg == '') { window.document.location=destination; }
else { alert(msg); }
return false;
}
</script>
</head>
<body><form name="form1" id="form1" action="" method="get" onsubmit="return ActionDeterminator();">
<table>
<tr>
<td> <strong>1. Have you a credit card or loan agreement taken
out before April 2007?</strong></td>
<td>
<input type="radio" name="question1" value="yes" id="question1_yes">
<label for="question1_yes">Yes</label>
<input type="radio" name="question1" value="no" id="question1_no">
<label for="question1_no">No</label>
</td>
</tr>
<tr>
<td> <strong>2. Is payment protection insurance (PPI) attached to any
of your agreement/s?</strong></td>
<td> <input type="radio" name="question2" value="yes" id="question2_yes">
<label for="qestion2_yes">Yes</label>
<input type="radio" name="question2" value="no" id="question2_no">
<label for="question2_no">No</label>
</td>
</tr>
<tr>
<td> <strong>3. Is your balance/s in excess of £1000?</strong></td>
<td><input type="radio" name="question3" value="yes" id="question3_yes">
<label for="qestion3_yes">Yes</label>
<input type="radio" name="question3" value="no" id="question3_no">
<label for="question3_no">No</label>
</td>
</tr>
<tr>
<td> <strong>4. Was the original agreement/s taken out for less
than £25,000?</strong></td><td>
<input type="radio" name="question4" value="yes" id="question4_yes">
<label for="qestion4_yes">Yes</label>
<input type="radio" name="question4" value="no" id="question4_no">
<label for="question4_no">No</label>
</td>
</tr>
<tr>
<td> <strong>5. Have you got 12 months or more payments left on your
agreement/s?</strong></td><td>
<input type="radio" name="question5" value="yes" id="question5_yes">
<label for="qestion5_yes">Yes</label>
<input type="radio" name="question5" value="no" id="question5_no">
<label for="question5_no">No</label>
</td>
</tr>
<tr>
<td style="text-align:center;" class="button">
<!--
change back to your image button
do not use possible reserved words for names or ids: button, submit, reset, function, search, etc
<input type="image" src="images/claim_button.gif" name="submitButton"
id="submitButton" value="submit">
-->
<input type="submit" name="submitButton" id="submitButton" value="Submit">
</td>
</tr>
</table>
</form>
</body>
</html>
I've pasted your new code into a new page but it still just resets the form? Am i missing something
I'll also bet you haven't downloaded and installed the Error Console plug in. If you had, and opened it, you should see
Error: illegal character
Source [your-file].html?submitButton=Submit
Line: 25, Column: 12
Source Code:
((i==1) ¦¦ (i==3) ¦¦ (i==4)) &&
See those double-pipe characters? This message board takes the normal pipe character - the vertical line accessed from your keyboard by holding down shift and pressing the \ character - and turns it into this --> ¦;
I also referred to this in post #4 by the bolded word "Note:". If you're unfamiliar with JS, this stuff is easy to miss.
Two pipe characters (vertical lines) are the logical or operator. Condition a or condition b or condition c.
It has to be that, just re-tested it as I am frequently accused of being insane, which is mostly true. But it works fine. :-)
The only other thing it could be - if you are testing offline, make sure submit_page.html and no_claim.html exist in the same directory as this file.
The only thing now is the answer and the redirection
1, 3 & 4 have to be anwsered yes for it go to submit_page.html. So if in any combination of anwser include no in 1, 3 & 4 it must go to no_claim.html
Questions 2 & 5 can be anwsered either yes or no and still go through to submit_page.html?
Does that make sense
Sorry to be a pain i'll have a look at the code now and see if i can work it out, but if you know the answer that would be great.
Sorry for being such a pain, really do appreciate the help.
Thank
Robert
Sorry for my miss spelling and missing some of your IMPORTANT NOTES! I was reading your second post late the other night and missed a few bits, (i take it your in the United states? I'm in Manchester in the UK).
I think im nearly there, i've had i good look at the javascript but can't figure out what i need to change to get it working the way we need it.
Yes just a follow up on my last post, what seems to be happening now is that you have to answer questions 1,3 and 4 no for it to direct to the no_claim.html but it needs to direct to no_claim.html if any of those 3 questions are answered no.
You have explained it correctly in your comments at the head of the javascript, but i doesn't work that way.
Also as you said in your javastript comments questions 2 and 5 can be answered yes or no and still be directed to the submit_page.html (those two questions works great).
You must be really sick of me by now ;) but i can't say how grateful I am, if you were coming Vegas i'd be buying you a very big drink :)
Thanks again
Robert
