Link to home
Start Free TrialLog in
Avatar of webappnewbie
webappnewbie

asked on

retain form values upon page reload

I am creating my first web application.  I have two drop down lists in a form that populates from database. One should  populate after the selection of the first.  I am using a javascript that reloads the page and populates the second drop down.   The problem I am having is that when I fill out the form and then select from the 1st drop down, the page reloads and I loose everything.  I need users to be able to fill in the form, select from the 2nd drop down depending on what value is selected from the 1st drop down. The user should then be able to continue filling in the form with all input still in the fields.  I do not have time to learn Ajax.   I would prefer to add to what I have.  I have learned so much from this and would appreciate any help you can give.

I am using the following script:


<script language="javascript">

function reload(form)
{
var schoolsel=form.school.options[form.school.options.selectedIndex].value; 
self.location='add.php?school=' + schoolsel;
}
</script>

//----PART OF FORM

<?php 
	echo "<tr><td><label>School: </label></td><td><select id='school' name='school' onchange='reload(this.form)'><option value=''>Select School</option>";
			while ($s=odbc_fetch_array($query))
				{
					$schoolname = $s['sname'];
					$schoolid = $s['sid'];
					if($schoolid==@$selschool){
					echo "<option selected='selected' value=".$schoolid.">".$schoolname."</option>";}
				         	else
						{
							echo "<option value=".$schoolid.">".$schoolname."</option>";
						}
										
					} echo "</select></td></tr>";
				
//***********************START DEPARTMENT DROPDOWN
				
						echo "<tr><td><label>Department:</label> </td><td>
							<select name='deptselect'><option value=''>Select Department</option>";
							while($d=odbc_fetch_array($deptqry))
								{					
									$depts = $d['dname'];
									$deptid = $d['did'];
									$schoolsid = $d['schools_sid'];
									echo "<option value=".$deptid.">".$depts."</option>";
								}
							echo "</select></td></tr>";
						
?>

Open in new window

Avatar of ropenner
ropenner
Flag of Canada image

added two lines....

line 13 which grabs the previous selection which you've called 'school' from the $_Request variable (always present)

and

line 23 which compares the current value with the schoolid previously choosen to see if it should show as selected now.... and inserts the string "selected" into the option so it looks like:

<OPTION selected VALUE=1>
<script language="javascript">

function reload(form)
{
var schoolsel=form.school.options[form.school.options.selectedIndex].value; 
self.location='add.php?school=' + schoolsel;
}
</script>

//----PART OF FORM

<?php 
	$current_selection = (isset($_REQUEST{'school'})?$_REQUEST{'school'}:"");
	echo "<tr><td><label>School: </label></td><td><select id='school' name='school' onchange='reload(this.form)'><option value=''>Select School</option>";
			while ($s=odbc_fetch_array($query))
				{
					$schoolname = $s['sname'];
					$schoolid = $s['sid'];
					if($schoolid==@$selschool){
					echo "<option selected='selected' value=".$schoolid.">".$schoolname."</option>";}
				         	else
						{
							$selected = ($current_selection == $schoolid?"selected":"");
							echo "<option $selected value=".$schoolid.">".$schoolname."</option>";
						}
										
					} echo "</select></td></tr>";
				
//***********************START DEPARTMENT DROPDOWN
				
						echo "<tr><td><label>Department:</label> </td><td>
							<select name='deptselect'><option value=''>Select Department</option>";
							while($d=odbc_fetch_array($deptqry))
								{					
									$depts = $d['dname'];
									$deptid = $d['did'];
									$schoolsid = $d['schools_sid'];
									echo "<option value=".$deptid.">".$depts."</option>";
								}
							echo "</select></td></tr>";
						
?>

Open in new window

I misread your code ... it is simplified below

<script language="javascript">
function reload(form){
      var schoolsel=form.school.options[form.school.options.selectedIndex].value;
      self.location='add.php?school=' + schoolsel;
}
</script>

//----PART OF FORM

<?php
      $current_selection = (isset($_REQUEST{'school'})?$_REQUEST{'school'}:"");
      echo "<tr><td><label>School: </label></td><td><select id='school' name='school' onchange='reload(this.form)'><option value=''>Select School</option>";
      while ($s=odbc_fetch_array($query))      {
                  $schoolname = $s['sname'];
                  $schoolid = $s['sid'];
                  $selected = (strcmp($current_selection,"$schoolid")==0?"selected":"");
                  echo "<option $selected value=".$schoolid.">".$schoolname."</option>";            
      }
      echo "</select></td></tr>";
                        
//***********************START DEPARTMENT DROPDOWN
      echo "<tr><td><label>Department:</label> </td><td>
      <select name='deptselect'><option value=''>Select Department</option>";
      while($d=odbc_fetch_array($deptqry))            {                              
                  $depts = $d['dname'];
                  $deptid = $d['did'];
                  $schoolsid = $d['schools_sid'];
                  echo "<option value=".$deptid.">".$depts."</option>";
            }
      echo "</select></td></tr>";                        
?>
Avatar of webappnewbie
webappnewbie

ASKER

Thank you; however, when the page reloads when I select a school, the values previously entered (fname, lname, title, etc...) disappears.
what I do and would advise you to do is submit the whole form, instead of appending the 'schoolsel' to the self.location in javascript.

form.submit();

This can be done for the SELECT's onchange as shown below


Then on the submission, show the same form with any previously filled out fields like in this example 'fname'

so the PHP would look like below, except you need all of the above query stuff in there.  Since you haven't shown where you set fname or lname or title this is a sample of how to get previous values from $_REQUEST and use them in the form.  If they haven't entered anything it will be blank and if they have it will have the value they submitted on the form.

$fname_input = (isset($_REQUEST{'fname'})?$_REQUEST{'fname'}:"");

print <<< endofstraighttext
<FORM action=add.php method=post>
<SELECT name=school onchange="javascript:this.form.submit();">
     <OPTION value=1>school name 1</OPTION>
</SELECT>
<INPUT type=text name=fname value=$fname_input>
</FORM>
endofstraighttext

I set all variables to the Post value:

$fname =  $_POST['name'];
$lname = $_POST['lname'];

I did what you suggest and still nothing.  I may be doing something wrong.  I commented out the javascript all together and used the onchange example.  Still no luck.  
$fname = $_POST['fname']; is the variable for first name

ASKER CERTIFIED SOLUTION
Avatar of ropenner
ropenner
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
PERFECT!!!   If I only had a brain. I'm learning though...thank you soooooooo much ropenner!!!!!!  
ropenner was very patient!