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

webappnewbieAsked:
Who is Participating?
 
ropennerConnect With a Mentor Commented:
This is a fully working sample.

<?PHP
$fname_input = $_POST['fname'];
$school_input = $_POST['school'];
$current_selection = (isset($_REQUEST{'school'})?$_REQUEST{'school'}:"");


print <<< endofstraighttext
first name[$fname_input]<BR>
school [$school_input]<BR>
<FORM action=add.php method=post>
<SELECT name=school onchange="javascript:this.form.submit();">
<OPTION value=""></OPTION>
endofstraighttext;

for ($i=1; $i < 4; $i++) {
      $selected = (strcmp($current_selection,"$i")==0?"selected":"");
      print "<OPTION value=$i $selected>school name $i</OPTION>";
}
     
print <<< endofstraighttext
</SELECT><BR>
<INPUT type=text name=fname value="$fname_input">
</FORM>
endofstraighttext;
?>



if this is all you have for the file add.php then it should post whatever is typed in the  blank and put it back in the blank.  I printed the value input in the text blank above as well for confirmation that it did POST the data.

Picture shows the output after the first posting picture of output
0
 
ropennerCommented:
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

0
 
ropennerCommented:
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>";                        
?>
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
webappnewbieAuthor Commented:
Thank you; however, when the page reloads when I select a school, the values previously entered (fname, lname, title, etc...) disappears.
0
 
ropennerCommented:
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

0
 
webappnewbieAuthor Commented:
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.  
0
 
webappnewbieAuthor Commented:
$fname = $_POST['fname']; is the variable for first name

0
 
webappnewbieAuthor Commented:
PERFECT!!!   If I only had a brain. I'm learning though...thank you soooooooo much ropenner!!!!!!  
0
 
webappnewbieAuthor Commented:
ropenner was very patient!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.