Solved

retain form values upon page reload

Posted on 2010-11-19
9
705 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
 
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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

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…
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
This video teaches users how to migrate an existing Wordpress website to a new domain.

746 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now