Keeping Entered Values when Reporting an Error

Question: I have a page with three sets of radio buttons. The user must select one button from each set. The default load is with no buttons selected. If the user only selects one or two buttons on alert statement appears telling them they must select an option from all three sets. However, upon returning to the form it resets all values to null. I would like to have it return to the form with the already selected values still there. Any idea how to do this?
Dave Tarcy

Answer: This is really easy to do once you know how and the same solution doesn't just work for radio buttons, it will maintain all of the user input fields.

What you need to do is to set up the validation tests so that if everything is valid the routine returns true (meaning that the subsequent processing of the form can take place) and if there is an error reported that the validation routine returns false. Returning false from the validation will ensure that subsequent processing will not occur and that the form page will be redisplayed with all of the data that your visitor has already entered still filled out.

To test that one value from each of three radio button groups has been entered you would use the following code in the Javascript (assuming that your groups are called grp1, grp2, and grp3):

 myOpt1 = -1;
for (i=0; i<thisform.mygrp1.length; i++) {
  if (thisform.mygrp1[i].checked) {
    myOpt1 = i;
myOpt2 = -1;
for (i=0; i<thisform.mygrp2.length; i++) {
  if (thisform.mygrp2[i].checked) {
    myOpt2 = i;
myOpt3 = -1;
for (i=0; i<thisform.mygrp3.length; i++) {
  if (thisform.mygrp3[i].checked) {
    myOpt3 = i;
if (myOpt1 == -1 || myOpt2 == -1 || myOpt3 == -1) {
  alert("You must select a radio button in each group");
  return false;
... rest of validations go here
return true;

You should return false after reporting any errors in the input (not just radio buttons) and the entered values will be maintained and the form will not be processed. The form will be processed by the action statement within the form tag when true is returned from validation processing attached to the submit button.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow