refill form fileds after self.location page reload

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
jm00730
Forum Newbie
Posts: 13
Joined: Tue Feb 01, 2011 1:32 pm

refill form fileds after self.location page reload

Post by jm00730 »

I have a form which has a combination of php elements and calls javascript function to reload the page so that some dynamically updated pulldowns can change based on user selection. The flow of the form is as follows. user selects a date, chooses a start time... on change the page relaods and the end time dropbox menu populates hours up to 4 hours from start. Same goes for a second date if the user wishes.

I have the time dynamics working but i run into the problem that on the reload all the other fields that were filled out go blank. How can I fix this. I have attempted to get all the fields within the same reload function and assigne them to a variable within the reload script but only my time variable takes. Any Ideas?

here is my javascript code:

Code: Select all

<script type="text/javascript">
	google.load("jquery", "1.4.3");
	 google.load("jqueryui", "1.8.6");
</script>


<script type="text/javascript">
$(function() {
					$("#datepicker").datepicker({ showOtherMonths: false,  showOn: "both" });


$(document).ready(function(){
		$.datepicker.formatDate('yy-mm-dd', $("#sdate, #edate").datepicker({ dateFormat: 'yy-mm-dd' }));
		$.datepicker.formatDate('yy-mm-dd', $("#edate").datepicker({ dateFormat: 'yy-mm-dd' }));	
		
	});

});

$('#date-selector').datepicker('setDate', new Date());

		
</script>


<script type="text/javascript">
<!--
function enableField()
{
	if(information.multi.value == false){
		document.information.edate.disabled=true;
		document.information.shour2.disabled=true;
		document.information.smin2.disabled=true;
		document.information.sid2.disabled=true;
		document.information.ehour2.disabled=true;
		document.information.emin2.disabled=true;
		document.information.eid2.disabled=true;
	}else{
		document.information.edate.disabled=false;
		document.information.shour2.disabled=false;
		document.information.smin2.disabled=false;
		document.information.sid2.disabled=false;
		document.information.ehour2.disabled=false;
		document.information.emin2.disabled=false;
		document.information.eid2.disabled=false;
	}
}

$(function() {
            $("#sdate").datepicker();
            // month is 0 based, hence for Feb we use 1
            $('#sdate').datepicker('setDate', new Date(2010, 1, 15));
           });
function reload(form)
{
var hours=information.shour.options[information.shour.options.selectedIndex].value;
var hours2=information.shour2.options[information.shour2.options.selectedIndex].value;
var people=information.persons.options[information.persons.options.selectedIndex].value;
var ed=information.edate.value;
var multi=information.multi.value;
var sd=information.sdate.value;

self.location=('bookTourInfo.php?hours='+hours+'&hours2='+hours2+'&sdate='+sd);
}

//-->
</script>
PHP code:

Code: Select all

<?php
$hours=$_GET['hours']; 
$hours2=$_GET['hours2'];
$sdate= $_GET['sd']; 
$edate=$_GET['ed']; 
$multi=$_GET['multi']; 
$persons=$_GET['persons']; 



//start 1/////////////////////////////////////////
	if(isset($hours)){
	$baseUnit = array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);
	$start = "<select name='shour' selected='$hours' id='shour' onChange= \"reload(this.form)\"'>";
		foreach($baseUnit as $b)
		if($b == $hours){$start .= "<option value='$b' selected='selected'>$b</option>";}else{
			$start .= "<option value='$b'>$b</option>";}
	
	$start .= "</select>";
	}else
	{
	$baseUnit = array(1, 2, 3, 4, 5, 6, 7,8, 9, 10, 11, 12);
	$start = "<select name='shour' id='shour' onChange= \"reload(this.form)\"'>";
		foreach($baseUnit as $b)
			$start .= "<option value='$b'>$b</option>";
	
	$start .= "</select>";	
	}
 	//----------------------------------------------
	$decimal = array('00', 15, 30, 45);
	$start .= "<select name='smin' id='smin'>";
	foreach($decimal as $interval)
		 $start .= "<option value='$interval'>$interval</option>";
		
		
	$start .= "</select>";
	//----------------------------------------------
	$val = array('am','pm');
	$start .= "<select name='sid' id='sid'>";
	foreach($val as $v)
		 $start .= "<option value='$v'>$v</option>";
		
		
	$start .= "</select>";
	
	//start 2/////////////////////////////////////////
	if(isset($hours2)){
	$baseUnit2 = array(1, 2, 3, 4, 5, 6, 7, 8,9,10, 11, 12);
	$start2 = "<select name='shour2' selected='$hours2' id='shour2' disabled='disabled' onChange= \"reload2(this.form)\"'>";
		foreach($baseUnit2 as $b2)
		if($b2 == $hours2){$start2 .= "<option disabled='disabled' value='$b2' selected='selected'>$b2</option>";}else{
			$start2 .= "<option value='$b2'>$b2</option>";}
	
	$start2 .= "</select>";
	}else
	{
	$baseUnit2 = array(1, 2, 3, 4, 5, 6, 7,8, 9, 10, 11, 12);
	$start2 = "<select name='shour2' id='shour2' disabled='disabled' onChange= \"reload2(this.form)\"'>";
		foreach($baseUnit2 as $b2)
			$start2 .= "<option value='$b2'>$b2</option>";
	
	$start2 .= "</select>";	
	}
 	//----------------------------------------------
	$decimal2 = array('00', 15, 30, 45);
	$start2 .= "<select name='smin2' id='smin2' disabled='disabled'>";
	foreach($decimal2 as $interval2)
		 $start2 .= "<option disabled='disabled' value='$interval2'>$interval2</option>";
		
		
	$start2 .= "</select>";
	//----------------------------------------------
	$val2 = array('am','pm');
	$start2 .= "<select name='sid2' id='sid2' disabled='disabled'>";
	foreach($val2 as $v2)
		 $start2 .= "<option disabled='disabled' value='$v2'>$v2</option>";
		
		
	$start2 .= "</select>";
//end//////////////////////////////////////////////////////////////////////////////////////////
	
	$baseUnit3 = array();
	$range = $hours + 4;
	
	
			for ($i = $hours + 1; $i <= $range; $i++) {
				
				
				if ($i > 12){
						$number = $i - 12; 
						
					array_push($baseUnit3, $number);
					
				}else {
					array_push($baseUnit3, $i);
					
					}
					
			}
	$end = "<select name='ehour' id='ehour'>";
		foreach($baseUnit3 as $b)
			$end .= "<option value='$b'>$b</option>";
	
	$end .= "</select>";
 	//----------------------------------------------
	$decimal = array('00', 15, 30, 45);
	$end .= "<select name='emin' id='emin'>";
	foreach($decimal as $interval)
		 $end .= "<option value='$interval'>$interval</option>";
		
		
	$end .= "</select>";
	//----------------------------------------------
	$val = array('am','pm');
	$end .= "<select name='eid' id='eid'>";
	foreach($val2 as $v2)
		 $end  .= "<option value='$v2'>$v2</option>";
		
		
	$end .= "</select>";
	
	//end2/////////////////////////////////////////
	
	$baseUnit4 = array();
	$range2 = $hours2 + 4;
	
	
			for ($i = $hours2 + 1; $i <= $range2; $i++) {
				
				
				if ($i > 12){
						$number2 = $i - 12; 
						
					array_push($baseUnit4, $number2);
					
				}else {
					array_push($baseUnit4, $i);
					
					}
					
			}
	
	$end2 = "<select name='ehour2' id='ehour2' disabled='disabled'>";
		foreach($baseUnit4 as $b2)
			$end2 .= "<option value='$b2'>$b2</option>";
	
	$end2 .= "</select>";
 	//----------------------------------------------
	$decimal2 = array('00', 15, 30, 45);
	$end2 .= "<select name='emin2' id='emin2' disabled='disabled'>";
	foreach($decimal2 as $interval2)
		 $end2 .= "<option value='$interval2'>$interval2</option>";
		
		
	$end2 .= "</select>";
	//----------------------------------------------
	$val2 = array('am','pm');
	$end2 .= "<select name='eid2' id='eid2' disabled='disabled'>";
	foreach($val2 as $v2)
		 $end2  .= "<option value='$v2'>$v2</option>";
		
		
	$end2 .= "</select>";
?>
Form Code:

Code: Select all

<Title>Book A tour</Title>

<!– Put here your personal contents in HTML or PHP –>
<center><img src="images/form2.gif" width="400" height="100" alt="Form header1"></center>
<hr width="90%"><br />
<div class="form">
<h1>Book A tour</h1>
<center><div align="left" style="width:98%"><strong>Duration:</strong><br /> Tours are usually 3 hours (minimum). Some tours will be 4 hours half-day. 
Spend more time at some, less at others, the choice is yours!<br /> 
<strong>Rate:</strong><br />Walking Tours (with subway if desired) • Up to 6 guests' $65./hr /3 hour minimum
                Arrangement can be made for private car/ mini bus/ coach bus.
</div></center>
<h3>Tour Information</h3>


<form action="tourfunctions.php" method="post" name="information">
<input name="form" type="hidden" value="information"/>

<div class='top'>
    <table width="95%" border="0">
                  <tr>
                    <td height="32"><input type="checkbox" name="multi" id="multi" on onclick="enableField()" />
                    <label for="multi">Multi Date Tour</label></td>
                    <td>                  
                    <td align='left'>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td align='left'>&nbsp;</td>
                  </tr>
                  <tr>
                  
                    <td width="32%" height="32"><label>Tour Date:  </label><input type="text" id="sdate" name= "sdate" onchange="setDate(this)" /></td>
                    <td width="8%"><label>Start Time: </label></td><td width= '26%' align='left'> <? echo $start; ?> </td>
                    <td width="8%"><label>EndTime: </label></td>
                    <td width= '26%' align='left'><? echo $end; ?></td>
                  </tr>
                  <tr>
                    <td><label>End Date:  </label>
                      <input type="text" id="edate" name= "edate" disabled="disabled"  value="<? if (isset($edate)) {echo $edate;} ?>" /> </td>
                    <td><label>Start Time:   </label></td><td width= '26%' align='left'> <? echo " ".$start2; ?> </td>
                    <td><label>End Time: </label></td>
                    <td width= '26%' align='left'><? echo $end2; ?></td>
                  </tr>
                  <tr>
                    <td><label>Number of Persons:  </label>
                    <select name="persons" size="1">
                          <option selected="selected" value="1-2">1 - 2</option>
                          <option value="3-5">3-5</option>
                          <option value="6-9">6-9</option>
                          <option value="10+">10+</option>
                        </select></td>
                    <td>                  
                    <td colspan="3" align='left'>&nbsp;</td>
                  </tr>
		</table>
        

</div>

<div class='left'>
<?php
$interestsQuery = mysql_query("SELECT  Tour_ID,Tour_Name FROM tours WHERE Tour_Type = 'Special Interests'  ");
?>
 <strong>Special Interests:</strong><br /><br />
	<? while($fetchInterests = mysql_fetch_array($interestsQuery)){
		$interests = $fetchInterests[Tour_Name]; 
		$interestID = $fetchInterests[Tour_ID];
		?>
			 <table width='200'>
			  <tr>
			  <td><label><input type='checkbox' name='interests[]' value='<? echo $interestID; ?>' id='<? echo $interests; ?>'><? echo $interests; ?></label></td>
			  </tr>
	<? }//end while loop ?>
	 </table>
</div>

<? //============================================================================================================================ ?>

<div class='right'>
<?
$landMarkQuery = mysql_query("SELECT Tour_ID,Tour_Name FROM tours WHERE Tour_Type = 'Landmarks'  ");
?>
<strong>LandMarks:</strong><br /><br />	
	<? while($fetchLandmarks = mysql_fetch_array($landMarkQuery)){
		$landmarks = $fetchLandmarks[Tour_Name]; 
		$landmarkID = $fetchLandmarks[Tour_ID];
		?>
			<table width='200'>
			 <tr>
			 <td><label><input type='checkbox' name='landmarks[]' value='<? echo $landmarkID; ?>' id='<? echo $landmarks; ?>'><? echo $landmarks; ?></label></td>
			</tr>
	<? }//end while loop ?>
	</table>
</div>
<div class="bottom"><input name="reset" type="reset" value="Reset Form" /><input name="next" type="submit" value="Continue" /></div>
</form>

</div>

Any help or direction would really be appreciated! I think the issue is in my reload script but i don'r see anything wrong with it. A fresh pair of eyes always seems to do the trick
Post Reply