Auto-fill Form Fields from User Input. Best Practice?
Posted: Tue May 18, 2004 7:25 pm
I am curious to see how other people auto-fill form fields from user input. Say you have a form that has multiple drop down boxes, radio fields, text boxes, etc. The following page validates the (user inputted) form data. If there is an error in the form data I redirect back to the form pre-fill all form fields with the previously submitted values and inform the user of the error.
My question:
How do you prefill the form fields with the user submitted data?
I typically store the $_POST var in a session variable with an error flag:
Text boxes are the easiest to autofill:
When it comes to listboxes there are a few options:
For instance, if you have a listbox of states:
I have used three different methods to auto fill a list box so the selected values are displayed.
1. Insert if Statement into each Option.
2. Call function to loop through array of values and labels.
3. Use JavaScript to setIndex onLoad.
1. Insert if statement in each <option>:
OK, it’s easy to say how ugly and cumbersome this is. It works for small list boxes. In my opinion; poor programming practice.
2. Call a function that will loop through an array and echo out the list box:
Probably my most favorable option. My only concern is page load time. If I have a couple dozen list boxes that are over 50 elements each, how much will this drag on the page load?
3. Have JavaScript set the selected Index onLoad:
Probably my least favorite option just because it’s JavaScript and I'm now relying on my user to have the correct JavaScript browser settings.
For Radio Buttons and Check Boxes I have found the first option to be the most useful.
I am curious to find out what you do in the same circumstance is there another method I overlooked?
My question:
How do you prefill the form fields with the user submitted data?
I typically store the $_POST var in a session variable with an error flag:
Code: Select all
<?php
//PROCESS PAGE
//$_POST
Array
(
[fld_18_1] => hawleyjr
[fld_19_1] => FL
[fld_20_1] => 8
[fld_21_1] => 555
[fld_22_1] =>
[fld_25_1] =>
[fld_26_1] => AAA Insurance Co.
[fld_27_1] => 1
[fld_28_1] => 1
[fld_29_1] => No
[fld_30_1] =>
[fld_31_1] => No Military Experience
[fld_32_1] => Chef
[fld_33_1] => McDonalds
[fld_34_1] => 5
[fld_35_1] => MY G
[fld_36_1] => No
[fld_43_1] => 5 YRS COMMENTS
[fld_69] =>
[Submit] => Submit
)
//on error
$_SESSION['USER_DATA'] = $_POST;
//redirect back to form page
?>Code: Select all
<?php
//FORM PAGE
$a_user_data = $_SESSION['USER_DATA'];
?>
<input type="text" name="fld_18_1" value="<?php echo a_user_data['fld_18_1'];?>">For instance, if you have a listbox of states:
Code: Select all
<select name="fld_19_1">
<option value="AL">Alabama</OPTION>
<option value="AK">Alaska</OPTION>
<option value="AZ">Arizona</OPTION>
<option value="AR">Arkansas</OPTION>
<option value="CA">California</OPTION>
<option value="CO">Colorado</OPTION>
<option value="CT">Connecticut</OPTION>
<option value="DE">Delaware</OPTION>
<option value="DC">District Of Columbia</OPTION>
<option value="FL">Florida</OPTION>
<option value="GA">Georgia</OPTION>
<option value="HI">Hawaii</OPTION>
...
</select>1. Insert if Statement into each Option.
2. Call function to loop through array of values and labels.
3. Use JavaScript to setIndex onLoad.
1. Insert if statement in each <option>:
Code: Select all
<?php
$s = ' selected';
?>
<option value="AL"<?php if($a_user_data[fld_19_1]=='AL')echo $s;?>>Alabama</OPTION>
<option value="AK"<?php if($a_user_data[fld_19_1]=='AK')echo $s;?>>Alaska</OPTION>
<option value="AZ"<?php if($a_user_data[fld_19_1]=='AZ')echo $s;?>>Arizona</OPTION>
<option value="AR"<?php if($a_user_data[fld_19_1]=='AR')echo $s;?>>Arkansas</OPTION>
<option value="CA"<?php if($a_user_data[fld_19_1]=='CA')echo $s;?>>California</OPTION>
<option value="CO"<?php if($a_user_data[fld_19_1]=='CO')echo $s;?>>Colorado</OPTION>
<option value="CT"<?php if($a_user_data[fld_19_1]=='CT')echo $s;?>>Connecticut</OPTION>
<option value="DE"<?php if($a_user_data[fld_19_1]=='DE')echo $s;?>>Delaware</OPTION>
<option value="DC"<?php if($a_user_data[fld_19_1]=='DC')echo $s;?>>District Of Columbia</OPTION>
<option value="FL"<?php if($a_user_data[fld_19_1]=='FL')echo $s;?>>Florida</OPTION>
<option value="GA"<?php if($a_user_data[fld_19_1]=='GA')echo $s;?>>Georgia</OPTION>
<option value="HI"<?php if($a_user_data[fld_19_1]=='HI')echo $s;?>>Hawaii</OPTION>2. Call a function that will loop through an array and echo out the list box:
Code: Select all
<?php
$a_st_abrev = array('AL','AK','AZ','AR','CA','CO','CT','DE','DC','FL','GA','HI'....);
$a_st_long_name = array('Alabama','Alaska','Arizona','Arkansas','California','Colorado',
'Connecticut','Delaware','District Of Columbia','Florida','Georgia','Hawaii'....);
$selected_value = $a_user_data['fld_19_1'];
?>
<select name="fld_19_1">
<?php
//FUNCTION IS LOCATED AT BOTTOM OF POST
echo getSelectBoxOptions($a_st_long_name,$a_st_abrev,$selected_value,FALSE);
?>
</select>3. Have JavaScript set the selected Index onLoad:
Code: Select all
<SCRIPT language="javascript">
function setState(){
fld_st = eval("document.form1.fld_19_1");
fld_cur_len = fld_st.length;
for(x=0;x<fld_cur_len;x++){
if(fld_st[x].value == "<?php echo $a_user_data['fld_19_1'];?>"){
fld_st.selectedIndex = x;
break;
}
}
}
</SCRIPT>
<BODY ONLOAD="setState();">For Radio Buttons and Check Boxes I have found the first option to be the most useful.
I am curious to find out what you do in the same circumstance is there another method I overlooked?
Code: Select all
<?php
//FUNCTION USED IN OPTION 2:
/* ECHO OUT THE HTML NEEDED FOR A HTML LIST BOX
$a_displayValues LABEL OF EACH OPTION
$a_optionValues OPTION VALUES
$selected_option_value SELECTED INDEX
IF $a_optionValues IS NULL USE DISPLAYVALUES ARRAY KEY
IF $echoHTML IS TRUE ECHO HTML ELSE RETURN HTML
*/
function printSelectBoxOptions($a_displayValues, $a_optionValues, $selected_option_value,$echoHTML){
$html = '';
$arrayCount = 0;
foreach ($a_displayValues as $x => $v) {
if($a_optionValues==null){
$a_optionValues = array_keys($a_displayValues);
}
if($selected_option_value==$a_optionValues[$arrayCount])
$sel = ' selected';
else
$sel = '';
$html.= '<option value="'.$a_optionValues[$arrayCount].'"'.$sel.'>'.$a_displayValues[$x].'</option>'."\r";
$arrayCount++;
}
if($echoHTML){
echo $html;
return TRUE;
}else{
return $html;
}
}
?>