DaveC426913
Programmer
Grr. I can't seem to cleanly submit this form.
The page has a bunch of questions, each with radio button answers. There are three ways off the page: Continue, Save/Exit and Abandon.
Continue + Save&Exit: you must answer all questions first then it goes to a page where it write to the db before deciding to exit or continue.
Abandon: confirmation dialogue before returning to home page, or staying here
(In cases where the user remains on the page, it would also be nice if it didn't wipe out their answers.)
The problem I encounter is either:
- when I get to index.html, I get a 405 error: "The page you are looking for cannot be displayed because an invalid method (HTTP verb) was used to attempt access."
- I goes to the page, but then immediately comes back (I presume because I've got a tidbit of code to run after the page redirect.)
Here's the code. The relevant bits are the form attributes, the submitForm() function and the 3 image buttons that call it.
Help?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Your Aura - Questions</title>
<script>
function unPoint(qu){
// unhighlight answered row
}
function submitForm(){
if(document.pressed == 'Abandon'){
var agree=confirm("This will exit without the saving changes on this page. OK?");
return agree;
}
else{//Save or Continue
//check all answers before moving on
numAnswered = 0;
for (qu=1; qu<=14; qu++){
anyRdoinRowChecked = 0;
//see if any radio button is chekced for given qu#
for (rdo=0;rdo<=4;rdo++){
anyRdoinRowChecked += eval("document.frmAnswers.Ans"+qu+"["+rdo+"].checked")
}
if (anyRdoinRowChecked){//it is checked, so this qu is OK
numAnswered++;
}
else{//flag with pointer
document.getElementById("ch"+qu).style.visibility="visible";
}
}
if (numAnswered == 14){//compare to total number of qus
//all answered, so move on
if (document.pressed == 'Save'){
document.frmAnswers.SaveExit.value=1;
}
document.frmAnswers.action = "aura_bk_wrtanswers.php";
return true;
}
else{
alert("You must answer all questions.")
return false;
}
}
}
</script>
<link href="includes/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div align="center">
<div class="maindiv" align="left">
<p align="center"><img src="images/title.jpg" width="508" height="67" alt="" border="0"></p>
<form action="index.html" method="post" name="frmAnswers" id="frmAnswers" onSubmit="return submitForm();">
<table border="0" cellspacing="1" cellpadding="0">
<tr>
<td> </td>
<td colspan="6" align="right"><img src="images/qu_header.gif" width="312" height="160" alt="" border="0"></td>
<td></td><td></td>
</tr>
<tr valign='top'> <td width="30">1.<input type="hidden" name="Qu1" value="1"><br> </td>
<td>You seek the unusual or the avant-garde.</td>
<td width="29" align="center" bgcolor="#FFE8E8"><input type="radio" id="Ans1" name="Ans1" value="1" onClick="unPoint(1)"></td>
<td width="29" align="center" bgcolor="#FEF6F6"><input type="radio" id="Ans1" name="Ans1" value="2" onClick="unPoint(1)"></td>
<td width="29" align="center" bgcolor="#F9F9F9"><input type="radio" id="Ans1" name="Ans1" value="3" onClick="unPoint(1)"></td>
<td width="29" align="center" bgcolor="#F5FDF5"><input type="radio" id="Ans1" name="Ans1" value="4" onClick="unPoint(1)"></td>
<td width="29" align="center" bgcolor="#E8F9E8"><input type="radio" id="Ans1" name="Ans1" value="5" onClick="unPoint(1)"></td>
<td width="10" bgcolor="white"> </td><td width="5" bgcolor="white"><div id="ch1" style="width: 5px; background-color: pink; visibility: hidden;" name="ch1"></div></td>
</tr>
<!-- ... a bunch more questions -->
<tr valign='top' bgcolor='#F8F8F8'> <td width="30">14.<input type="hidden" name="Qu14" value="14"><br> </td>
<td>You are a loner.</td>
<td width="29" align="center" bgcolor="#FFE8E8"><input type="radio" id="Ans14" name="Ans14" value="1" onClick="unPoint(14)"></td>
<td width="29" align="center" bgcolor="#FEF6F6"><input type="radio" id="Ans14" name="Ans14" value="2" onClick="unPoint(14)"></td>
<td width="29" align="center" bgcolor="#F9F9F9"><input type="radio" id="Ans14" name="Ans14" value="3" onClick="unPoint(14)"></td>
<td width="29" align="center" bgcolor="#F5FDF5"><input type="radio" id="Ans14" name="Ans14" value="4" onClick="unPoint(14)"></td>
<td width="29" align="center" bgcolor="#E8F9E8"><input type="radio" id="Ans14" name="Ans14" value="5" onClick="unPoint(14)"></td>
<td width="10" bgcolor="white"> </td><td width="5" bgcolor="white"><div id="ch14" style="width: 5px; background-color: pink; visibility: hidden;" name="ch14"></div></td>
</tr>
<tr><td> </td></tr>
<tr>
<td colspan="2">
<input type="image" name="btnAbandon" src="images/ico_exit.gif" alt="Abandon" onClick="document.pressed='Abandon'; document.frmAnswers.submit();">
<input type="image" name="btnSave" src="images/ico_save.gif" alt="Save & Exit" onClick="document.pressed='Save'; document.frmAnswers.submit();">
</td>
<td colspan="5" align="center">
<input type="image" name="btnContinue" src="images/btn_cont.gif" alt="Continue" onClick="document.pressed='Continue'; document.frmAnswers.submit();">
</td>
</tr>
</table>
<input type="hidden" name="UID" value="67">
<input type="hidden" name="section" value="1">
<input type="hidden" name="SaveExit" value="0">
</form>
</div>
</div>
</body>
</html>
The page has a bunch of questions, each with radio button answers. There are three ways off the page: Continue, Save/Exit and Abandon.
Continue + Save&Exit: you must answer all questions first then it goes to a page where it write to the db before deciding to exit or continue.
Abandon: confirmation dialogue before returning to home page, or staying here
(In cases where the user remains on the page, it would also be nice if it didn't wipe out their answers.)
The problem I encounter is either:
- when I get to index.html, I get a 405 error: "The page you are looking for cannot be displayed because an invalid method (HTTP verb) was used to attempt access."
- I goes to the page, but then immediately comes back (I presume because I've got a tidbit of code to run after the page redirect.)
Here's the code. The relevant bits are the form attributes, the submitForm() function and the 3 image buttons that call it.
Help?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Your Aura - Questions</title>
<script>
function unPoint(qu){
// unhighlight answered row
}
function submitForm(){
if(document.pressed == 'Abandon'){
var agree=confirm("This will exit without the saving changes on this page. OK?");
return agree;
}
else{//Save or Continue
//check all answers before moving on
numAnswered = 0;
for (qu=1; qu<=14; qu++){
anyRdoinRowChecked = 0;
//see if any radio button is chekced for given qu#
for (rdo=0;rdo<=4;rdo++){
anyRdoinRowChecked += eval("document.frmAnswers.Ans"+qu+"["+rdo+"].checked")
}
if (anyRdoinRowChecked){//it is checked, so this qu is OK
numAnswered++;
}
else{//flag with pointer
document.getElementById("ch"+qu).style.visibility="visible";
}
}
if (numAnswered == 14){//compare to total number of qus
//all answered, so move on
if (document.pressed == 'Save'){
document.frmAnswers.SaveExit.value=1;
}
document.frmAnswers.action = "aura_bk_wrtanswers.php";
return true;
}
else{
alert("You must answer all questions.")
return false;
}
}
}
</script>
<link href="includes/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div align="center">
<div class="maindiv" align="left">
<p align="center"><img src="images/title.jpg" width="508" height="67" alt="" border="0"></p>
<form action="index.html" method="post" name="frmAnswers" id="frmAnswers" onSubmit="return submitForm();">
<table border="0" cellspacing="1" cellpadding="0">
<tr>
<td> </td>
<td colspan="6" align="right"><img src="images/qu_header.gif" width="312" height="160" alt="" border="0"></td>
<td></td><td></td>
</tr>
<tr valign='top'> <td width="30">1.<input type="hidden" name="Qu1" value="1"><br> </td>
<td>You seek the unusual or the avant-garde.</td>
<td width="29" align="center" bgcolor="#FFE8E8"><input type="radio" id="Ans1" name="Ans1" value="1" onClick="unPoint(1)"></td>
<td width="29" align="center" bgcolor="#FEF6F6"><input type="radio" id="Ans1" name="Ans1" value="2" onClick="unPoint(1)"></td>
<td width="29" align="center" bgcolor="#F9F9F9"><input type="radio" id="Ans1" name="Ans1" value="3" onClick="unPoint(1)"></td>
<td width="29" align="center" bgcolor="#F5FDF5"><input type="radio" id="Ans1" name="Ans1" value="4" onClick="unPoint(1)"></td>
<td width="29" align="center" bgcolor="#E8F9E8"><input type="radio" id="Ans1" name="Ans1" value="5" onClick="unPoint(1)"></td>
<td width="10" bgcolor="white"> </td><td width="5" bgcolor="white"><div id="ch1" style="width: 5px; background-color: pink; visibility: hidden;" name="ch1"></div></td>
</tr>
<!-- ... a bunch more questions -->
<tr valign='top' bgcolor='#F8F8F8'> <td width="30">14.<input type="hidden" name="Qu14" value="14"><br> </td>
<td>You are a loner.</td>
<td width="29" align="center" bgcolor="#FFE8E8"><input type="radio" id="Ans14" name="Ans14" value="1" onClick="unPoint(14)"></td>
<td width="29" align="center" bgcolor="#FEF6F6"><input type="radio" id="Ans14" name="Ans14" value="2" onClick="unPoint(14)"></td>
<td width="29" align="center" bgcolor="#F9F9F9"><input type="radio" id="Ans14" name="Ans14" value="3" onClick="unPoint(14)"></td>
<td width="29" align="center" bgcolor="#F5FDF5"><input type="radio" id="Ans14" name="Ans14" value="4" onClick="unPoint(14)"></td>
<td width="29" align="center" bgcolor="#E8F9E8"><input type="radio" id="Ans14" name="Ans14" value="5" onClick="unPoint(14)"></td>
<td width="10" bgcolor="white"> </td><td width="5" bgcolor="white"><div id="ch14" style="width: 5px; background-color: pink; visibility: hidden;" name="ch14"></div></td>
</tr>
<tr><td> </td></tr>
<tr>
<td colspan="2">
<input type="image" name="btnAbandon" src="images/ico_exit.gif" alt="Abandon" onClick="document.pressed='Abandon'; document.frmAnswers.submit();">
<input type="image" name="btnSave" src="images/ico_save.gif" alt="Save & Exit" onClick="document.pressed='Save'; document.frmAnswers.submit();">
</td>
<td colspan="5" align="center">
<input type="image" name="btnContinue" src="images/btn_cont.gif" alt="Continue" onClick="document.pressed='Continue'; document.frmAnswers.submit();">
</td>
</tr>
</table>
<input type="hidden" name="UID" value="67">
<input type="hidden" name="section" value="1">
<input type="hidden" name="SaveExit" value="0">
</form>
</div>
</div>
</body>
</html>
