validate before hitting submit button

[kt03]

Hi,

i have the simple form with couple radio buttons.  The answers are A,B,C,D,E, I want to check for the correct answer before user hit the submit button.  For example, if correct anser is D, then when i click on others, i want the message pop with "Incorect ...." then i have to click on cancel/ok button to take me back to the form where i can select other answer.

<form action="" name="next" id="next" method="post">
  <input type="radio" name="report"  value="A"> A. Daily<br>
  <input type="radio" name="report"  value="B"> B. Monthly <br>
  <input type="radio" name="report"  value="C"> C. Quarterly <br>
  <input type="radio" name="report"  value="D"> D. Semi-Annually <br>
  <input type="radio" name="report"  value="E"> E. Annually <br>
  </form>

Can any help please!!!!

Thanks

[Adam Cameron.]

What have you done to try to find out how to do this?

Have you googled "form validation"?  There is a stack of stuff out there that will show you how to do this, without expecting people here to type it all in again 😉

Find some tutorials and give it a go, and if you get stuck, then show us what you've tried and what it's doing wrong, and we can give you a hand.

Have you looked at what CF offers by way of form validation?

--
Adam

[kt03]

i did but i was not able to find anything that i need.  they only have validate the form when you actually click on the submitton button but my case is want to validate before you click on the submit button.

[Adam Cameron.]

Hmmmm.

I don't think you're connecting the dots properly here.  The examples you will have seen would have been triggered by putting an onsubmit event handler on the form tag (or onclick on the submit button, whatever). There's nothing to stop you putting onblur or onclick event handlers on any of the other form controls to suit your needs.  You probably need to read up on the JS event model if you don't understand what I mean.  There's not too much to it.  Or perhaps read up on JQuery's validator plug-in.

And you almost certainly didn't look at the stuff CF offers to do for you, because the docs even for CFINPUT point you in the right direction too.

http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSc3ff6d0ea77859461172e0811cbec22c24-7f51.html

--

Adam

[kt03]

i am just the beginer to learn all this. Here is my code but it didn't work when i select any of them, it always said "incorrect answer" message even i when i selected D is the correct answer.

function checkQuestion() {
if (document.next.benchmark[0].value =="A" ||
document.next.benchmark[1].value =="B" ||
document.next.benchmark[2].value=="C" ||
document.next.benchmark[4].value=="E")

{
  alert("incorrect answer.")
}
else
{
  alert("correct answer.")
}
}

<form action="" name="next" id="next" method="post">
  <input type="radio" name="report"  value="A" onClick="checkQuestion()"> A. Daily<br>
  <input type="radio" name="report"  value="B" onClick="checkQuestion()"> B. Monthly <br>
  <input type="radio" name="report"  value="C" onClick="checkQuestion()"> C. Quarterly <br>
  <input type="radio" name="report"  value="D" onClick="checkQuestion()"> D. Semi-Annually <br> (this is the correct answer)
  <input type="radio" name="report"  value="E" onClick="checkQuestion()"> E. Annually <br>
  </form>

[LyndonPatton]

How is the script going to know the correct value? You've not shared this

with us.

Look at this code and you may see a direction...

Next you can compare the value of the clicked button and go from there.

[kt03]

that's all i have on the page.the value A

or B, or C or E is from the form and script check for index eq one of these then displayed incorect message, else then display correct message.

i am just the start to learn it so i don't know much about this , does anyone else please help?

[LyndonPatton]

Sure, I'll help. But, It makes little sense that "D" is correct and it's

printed on the screen as such. Unless you just trying to learn...

If "D" is correct then you need a decision made in the script as such:

function checkQuestion(clickedValue) {

if (clickedValue=='D'){

alert('You are correct!');

}

else {

alert('You are not correct!);

}

}

Since 'D' is hard-coded it doesn't seem of much value but this should show

you the process.

<form action="" name="next" id="next" method="post">

<input type="radio" name="report" value="A" onClick="checkQuestion(this.value)"> A. Daily<br>

<input type="radio" name="report" value="B" onClick="checkQuestion(this.value)"> B. Monthly <br>

<input type="radio" name="report" value="C" onClick="checkQuestion(this.value)"> C. Quarterly <br>

<input type="radio" name="report" value="D" onClick="checkQuestion(this.value)"> D. Semi-Annually <br> (this is the correct answer)

<input type="radio" name="report" value="E" onClick="checkQuestion(this.value)"> E. Annually <br>

</form>

[kt03]

thanks alot

[Adam Cameron.]

I don't think you're posting the code that you're actually running, because what that code does is give a JS error that document.next.benchmark is undefined (which it is).

Don't post an approximation of your code, post your actual code.

--

Adam