Forms: Saving State Revisited

A number of readers have inquired about how to save the state of radio buttons and checkboxes. The technique for accomplishing this is no different then saving the state of a drop-down or select box. Let us assume that you have coded a form that has two sets of radio buttons, a few checkboxes and a drop-down box, like so:

Now, assume that the user has just submitted the form but they made a mistake on some field (not shown) and you want to give them the form again, but do not want to have them fill everything back out, you know the concept by now. Well, here is how:

<%
'pretend we've got the code to check if 
'the form's been submitted here
'now let's assign the form data to some variables

radio_group1 = request.form("r1")
radio_group2 = request.form("r2")
checkbox1 = request.form("cb1")
checkbox2 = request.form("cb2")
checkbox3 = request.form("cb3")
select_opt = request.form("select_example")
%>


<!--html code down to form-->


<form>
<input type="radio" name="r1" value="r1"
<% if radio_group1 = "r1" then %> <%= selected %>
<% end if %>>
Radio Group 1, Option 1<br>
<input type="radio" name="r1" value="r2"
<% if radio_group1 = "r2" then %> <%= selected %>
<% end if %>>
Radio Group 1, Option 2<br>
<input type="radio" name="r1" value="r3"
<% if radio_group1 = "r3" then %> <%= selected %>
<% end if %>>
Radio Group 1, Option 3<br>
<br>
<input type="radio" name="r2" value="r1"
<% if radio_group2 = "r1"then %> <%= selected %>
<% end if %>>
>Radio Group 2, Option 1<br>
<input type="radio" name="r2" value="r2"
<% if radio_group2 = "r2" then %> <%= selected %>
<% end if %>>
Radio Group 2, Option 2<br>
<input type="radio" name="r2" value="r3"
<% if radio_group2 = "r3" then %> <%= selected %>
<% end if %>>
Radio Group 2, Option 3<br>
<br>
<input type="checkbox" name="cb1" value="cb1"
<% if checkbox1 = "cb1" then %> <%= selected %>
<% end if %>>
Checkbox 1<br>
<input type="checkbox" name="cb2" value="cb2"
<% if chekcbox2 = "cb2" then %> <%= selected %>
<% end if %>>
Checkbox 2<br>
<input type="checkbox" name="cb3" value="cb3"
<% if checkbox1 = "cb3" then %> <%= selected %>
<% end if %>>
Checkbox 3<br>
<br>
<select name="select_example">
<option name="o1" value="o1"
<% if select_opt = "o1" then %> <%= selected %>
<% end if %>>
Select Option 1</option>
<option name="o2" value="o2"
<% if select_opt = "o2" then %> <%= selected %>
<% end if %>>
Select Option 2</option>
<option name="o3" value="o3"
<% if select_opt = "o3" then %> <%= selected %>
<% end if %>>
Select Option 3</option>
</select>
</form>

Now that sure is a mess, but fear not, it really is very simple. We need only to dissect one part of that code and you will understand all of it, if you do not already.

Let's take a look at the first radio group and the first option in that group.

<input type="radio" name="r1" value="r1" 
	(note I dropped the >)
<% if radio_group1 = "r1" then %> 
<%= selected %>
<% end if %>> (and put it here)
Radio Group 1, Option 1<br>

The first thing to note is that we had to put the code on multiple lines, everything from the <% if ... to the <% end if %> can be placed on one long line. In fact, I recommend it because it is more legible and easier to work with. Please also note that I dropped the closing > after the value attribute, and put it after the end if. But how does it work? Well, that is the easy part. The if statement checks the value stored in the variable "radio_group1" and compares it to the value of the current option. If the two are equal, then that particular option within the group is marked as "Selected." If the two values do not match, then the ASP code does not do anything. Unless the user did not pick anything the first time the form was submitted, one of the options in the group will be selected because one if statement will be found true! Checkboxes work the same way, they just are not grouped like radio buttons - think of them each as unique items or if it makes more sense, radio buttons with a maximum of one option. Lastly, selects work exactly like radio buttons as well - compare the variable to the option values. On the next page, we will take a more advanced look at CDONTS.

Using ASP for Form Handling: Part 4 - Filling the Gaps
Using ASP for Form Handling: Part 4 - Filling the Gaps
Advanced CDONTS Techniques