Form problem Options

[CodeKing]

I made a page for an assignment. It's a tutorial on how to find the area of irregular shapes. I put this snippet of code in there so the reader can answer review question.

<form action="" name="review" id="review">
<p align="left">What is the area of this shape?</p>
<p align="left">&nbsp;<!-- Image goes here --></p>
<p align="left">
<input name="q1" type="text" id="q1" size="4">
units squared</p>
<p align="left">
<input name="Check Answers" type="submit" id="Check Answers" value="Check Answers" onClick="checkAnswers(this.form);">
</p>
</form>

checkAnswers is a javascript function that reads the value of q1 and compares it to the correct answer. Unfortunately, it also refreshes the page. That erases the values in the form, and because I might add more questions, it would erase their correct answers. How can I have checkAnswers run when the Check Answer button is clicked without refreshing the page?

[Christian J]

If you just use the text field to collect data for a javascript you don't need a form or a submit button (forms are intended to submit data to server-side programs). Instead you might use this (note that I replaced the submit button with an ordinary button):

CODE

<p align="left">What is the area of this shape?</p>
<p align="left">&nbsp;<!-- Image goes here --></p>
<p align="left">
<input name="q1" type="text" id="q1" size="4">
units squared</p>
<p align="left">
<input name="Check Answers" type="button" id="Check Answers" value="Check Answers" onClick="checkAnswers(this.form);">
</p>

Just note that some javascripts (including yours) use a FORM element's NAME value to identify various form elements, if you want it like that you must put the form tags back (but AFAIK you still don't need the submit button).