Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jun 2004
    Location
    London
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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
    Attached Files Attached Files

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,032
    Thanks
    0
    Thanked 248 Times in 245 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Jun 2004
    Location
    London
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    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?

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,032
    Thanks
    0
    Thanked 248 Times in 245 Posts
    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.

  • #5
    New to the CF scene
    Join Date
    Jun 2004
    Location
    London
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    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>

  • #6
    New to the CF scene
    Join Date
    Jun 2004
    Location
    London
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,032
    Thanks
    0
    Thanked 248 Times in 245 Posts
    I downloaded the csvwrite.pl script and I saw that it has a thank you page.
    Setup your thankyou.htm as this:
    Code:
    <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:
    Code:
    <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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •