Solved

retain form values upon page reload

Posted on 2010-11-19
9
707 Views
Last Modified: 2012-05-10
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

0
Comment
Question by:webappnewbie
  • 5
  • 4
9 Comments
 
LVL 8

Expert Comment

by:ropenner
ID: 34177294
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
 
LVL 8

Expert Comment

by:ropenner
ID: 34177314
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
 

Author Comment

by:webappnewbie
ID: 34181422
Thank you; however, when the page reloads when I select a school, the values previously entered (fname, lname, title, etc...) disappears.
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 8

Expert Comment

by:ropenner
ID: 34181533
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
 

Author Comment

by:webappnewbie
ID: 34191830
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
 

Author Comment

by:webappnewbie
ID: 34191838
$fname = $_POST['fname']; is the variable for first name

0
 
LVL 8

Accepted Solution

by:
ropenner earned 125 total points
ID: 34192142
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
 

Author Comment

by:webappnewbie
ID: 34192379
PERFECT!!!   If I only had a brain. I'm learning though...thank you soooooooo much ropenner!!!!!!  
0
 

Author Closing Comment

by:webappnewbie
ID: 34192403
ropenner was very patient!
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
A publishing tool, a Version Control System, or a Collaboration Platform! These can be some of the defining words for the two very famous web-hosting Git repositories: Bitbucket and Github. Git is widely used amongst the programmers and developers f…
Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question