...
PDA

onSubmit event handler refuses to send to CGI script and call function

mjherbert
06-10-2004, 12:15 AM
onSubmit event handler refuses to send to CGI script and call function

--------------------------------------------------------------------------------

I have been having a few problems coding a Javascript quiz. I'm writing a Javascript quiz that, with the help of a CGI script, will save to a local text file. (Calling the CGI script by setting up a server on the local machine with Microweb). The quiz is entirely based on sequentially numbered images (i.e. 1,2,3,4). I've included the full code as a text file below; but essentially the sections that have been giving me grief are as follows:

function printQuestion(){
document.writeln('<H4 ALIGN = "LEFT"> Question ' +currentQuestion+ '</H4>')
document.writeln('<IMG ALIGN = "LEFT" src=' +currentQuestion+ '.jpg')
document.writeln('<FORM NAME ="answerForm" METHOD="POST" ACTION="../cgi-bin/csvwrite.pl" onSubmit="nextQuestion(); return false>" ')
document.writeln('<H4><BR><BR><BR><BR><BR><BR>')
document.writeln('<INPUT TYPE="RADIO" NAME="Field' +currentQuestion+ '" VALUE="1"> Grade 1<BR>')
document.writeln('<INPUT TYPE="RADIO" NAME="Field' +currentQuestion+ '" VALUE="2"> Grade 2<BR>')
document.writeln('<INPUT TYPE="RADIO" NAME="Field' +currentQuestion+ '" VALUE="3"> Grade 3<BR>')
document.writeln('<INPUT TYPE="Submit" NAME="Field' +currentQuestion+ '" VALUE="[ CSVwrite ]">')
document.writeln('</H4>')
document.writeln('</FORM>')
}

function nextQuestion(){
++currentQuestion
updateCookie()
location.reload(true)
}

To complicate matters I'm using a free CGI script: csvwrite.pl and microweb to test it out. For a reason that I am unable to understand, the onSubmit event handler refuses to post to the cgi script and call the nextQuestion() function. If I use onClick, I can call the nextQuestion() function, but I haven't found a way of submitting the form data to the CGI script. I am confident that the problem lies with my clumsily programmed Javascript; and I'm guessing it has to do with my usage of document.write. (I have successfully saved to the data file with a vanilla HTML form...) If anybody could help shed light on the problem, or recommend a work-around, it would be greatly, greatly appreciated...

-Mike
glenngv
06-10-2004, 04:26 AM
You have a typo

onSubmit="nextQuestion(); return false>" ')

The double quote should be before the >

But even then, you are not really submitting the form to the cgi.
That is because you have return false there (which cancels form submission) and the nextQuestion function just reloads the page.
mjherbert
06-10-2004, 10:23 AM
Glenngv,
Many thanks for the reply,
I changed the return false to return true and corrected the typo, but when pressing the submit button the CGI script still doesn't seem to be called, and the question image doesn't refresh.

function printQuestion(){
document.writeln('<H4 ALIGN = "LEFT"> Question ' +currentQuestion+ '</H4>')
document.writeln('<IMG ALIGN = "LEFT" src=' +currentQuestion+ '.jpg')
document.writeln('<FORM NAME ="answerForm" METHOD="POST" ACTION="../cgi-bin/csvwrite.pl" onSubmit="return true; nextQuestion()"> ')
document.writeln('<H4><BR><BR><BR><BR><BR><BR>')
document.writeln('<INPUT TYPE="RADIO" NAME="Field' +currentQuestion+ '" VALUE="1"> Grade 1<BR>')
document.writeln('<INPUT TYPE="RADIO" NAME="Field' +currentQuestion+ '" VALUE="2"> Grade 2<BR>')
document.writeln('<INPUT TYPE="RADIO" NAME="Field' +currentQuestion+ '" VALUE="3"> Grade 3<BR>')
document.writeln('<INPUT TYPE="Submit" NAME="Field' +currentQuestion+ '" VALUE="[ CSVwrite ]">')
document.writeln('</H4>')
document.writeln('</FORM>')
}
Any ideas?
glenngv
06-10-2004, 10:49 AM
If you do this

onSubmit="return true; nextQuestion()"

nextQuestion will never be executed because of the return statement. But even if it would be called, the value of the currentQuestion variable will be lost and reset to initial state.

Can you post the whole code? There might be better ways to do the whole thing.
mjherbert
06-10-2004, 11:21 AM
Glenn
I really appreciate you taking the time to look over this. It's had me tied up in knots for the past 14 or so hours...

The whole code is as follows:
<HTML>
<HEAD>
<TITLE>Quiz</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--

function readCookie(){
currentQuestion=1
currentImage="Image" +currentQuestion+ ".jpg"
cookie=document.cookie
currentQuestion=getNumberValue(cookie,"currentQuestion")
}

function getNumberValue(s,n){
s=removeBlanks(s)
var pairs=s.split(";")
for (var i=0;i<pairs.length;++i){
var pairSplit=pairs[i].split("=")
if(pairSplit[0]==n){
if(pairSplit.length>1) return parseInt(pairSplit[1])
else return 1
}
}
return 1
}

function removeBlanks(s){
var temp=""
for(var i=0;i<s.length;++i){
var c=s.charAt(i)
if(c!=" ") temp += c
}
return temp
}

function printQuestion(){
document.writeln('<H4 ALIGN = "LEFT"> Question ' +currentQuestion+ '</H4>')
document.writeln('<IMG ALIGN = "LEFT" src=' +currentQuestion+ '.jpg')
document.writeln('<FORM NAME ="answerForm" METHOD="POST" ACTION="../cgi-bin/csvwrite.pl" onSubmit="return true; nextQuestion()"> ')
document.writeln('<H4><BR><BR><BR><BR><BR><BR>')
document.writeln('<INPUT TYPE="RADIO" NAME="Field' +currentQuestion+ '" VALUE="1"> Grade 1<BR>')
document.writeln('<INPUT TYPE="RADIO" NAME="Field' +currentQuestion+ '" VALUE="2"> Grade 2<BR>')
document.writeln('<INPUT TYPE="RADIO" NAME="Field' +currentQuestion+ '" VALUE="3"> Grade 3<BR>')
document.writeln('<INPUT TYPE="Submit" NAME="Field' +currentQuestion+ '" VALUE="[ CSVwrite ]">')
document.writeln('</H4>')
document.writeln('</FORM>')
}

function nextQuestion(){
++currentQuestion
updateCookie()
location.reload(true)
}

function updateCookie(){
document.cookie='currentQuestion='+currentQuestion+ "; expires=Fri, 3 Aug 2007 20:47:11 UTC";
}

function endQuiz(){
document.cookie="currentQuestion=1; expires=Fri, 3 Aug 2007 20:47:11 UTC";
document.write("<H4 ALIGN='CENTER'>")
document.write("You've finished the quiz.")
document.writeln('<BR><BR><INPUT TYPE="BUTTON" ')
document.writeln('NAME="restart" VALUE="Restart" ')
document.writeln('onClick="restartQuiz()">')
document.writeln("</H4>")
document.writeln('</FORM>')
}

function restartQuiz(){
location.reload(true)
}

//--></SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript"><!--
readCookie()
if(currentQuestion>3) endQuiz()
else printQuestion()
//--></SCRIPT>
</BODY>
</HTML>
mjherbert
06-11-2004, 07:48 AM
What I'm trying to do is set up a quiz to grade a series of sequentially numbered images. I've set a cookie so that the browser will automatically take the user to the image they stopped off at upon reload; and I've set the currentQuestion variable to control what image is being displayed and the value in the 'Field' element of the forms. The reason behind this is that the cgi script saves the field and the value (or ought to) of the selected radio button to a text file; thereby identifying the image number and answer in the text file for future evaluation.
glenngv
06-11-2004, 09:12 AM
I downloaded the csvwrite.pl script and I saw that it has a thank you page.
Setup your thankyou.htm as this:

<html>
<head>
<script type="text/javascript">
window.onload = function(){
if (parent!=window && parent.nextQuestion){
parent.nextQuestion();
}
}
</script>
</head>
<body>
Thank you!
</body>
</html>

Then set up your main page like this:

<html>
<head>
<script type="text/javascript">

var currentQuestion=1;
var quizLen = 3;

function nextQuestion(){
currentQuestion++;
updateCookie();
changeDisplay();
}

function changeDisplay(){
if (currentQuestion<=quizLen){
var f=document.answerForm;
document.getElementById("ctr").innerHTML=currentQuestion;
document.images['myimg'].src = currentQuestion + ".jpg";
for (var i=0;i<f.elements.length;i++){
if (f.elements[i].type=="radio") {
f.elements[i].name="Field"+currentQuestion;
f.elements[i].checked = false;
}
}
}
else { //quiz finished
document.getElementById("content").innerHTML='<h4>You've finished the quiz!</h4><p><input type="button" value="Restart" onclick="location.reload()" /></p>';
}
}
window.onload=function(){
readCookie();
changeDisplay();
}
</script>
</head>
<body>
<form name="answerForm" method="post" action="../cgi-bin/csvwrite.pl" target="tempWin">
<div id="content">
<h4> Question <span id="ctr">1</span></h4>
<img name="myimg" src="1.jpg" />
<input type="radio" name="Field1" value="1" /> Grade 1<br />
<input type="radio" name="Field1" value="2" /> Grade 2<br />
<input type="radio" name="Field1" value="3" /> Grade 3<br />
<input type="submit" name="btnSubmit" value="[ CSVwrite ]" />
<iframe name="tempWin" src="about:blank" style="display:none"></iframe>
</content>
</form>
</body>
</html>

Don't forget to add your cookie-related functions.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum