Solved

Display information from a drop down box into multiple text boxes using Javascript

Posted on 2013-01-10
74
538 Views
Last Modified: 2013-01-16
I have a form that i am creating that has a drop down box that lists an address. What i am trying to do is when you select an address from the drop down menu it will display the city, state and zip code into three different text boxes.

The issues I am running into is how do I parse the javascript string and my form is dynamic so when you add another form how do I change the ID so it pluses by 1 so it will work with the second form also. Code is below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
error_reporting(E_ALL);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="css/template.css" type="text/css"/>

<script src="scripts/gen_validatorv4.js" type="text/javascript"></script>
<script src="scripts/tablefilter_all_min.js" language="javascript" type="text/javascript"></script>

	<link rel="stylesheet" href="scripts/date_picker/jquery.ui.all.css">
	<script src="scripts/date_picker/jquery-1.8.0.js"></script>
	<script src="scripts/date_picker/jquery.ui.core.js"></script>
	<script src="scripts/date_picker/jquery.ui.widget.js"></script>
	<script src="scripts/date_picker/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="scripts/date_picker/date.css">
	
	<script src="scripts/validate/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
	</script>
	<script src="scripts/validate/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
	</script>

<SCRIPT language="javascript">

function filltext()
{
 var e = document.getElementById("location_departure");
 var group = e.options[e.selectedIndex].text;
document.getElementById("departure_city").value= group ;



}

		jQuery(document).ready(function(){
			// binds form submission and fields to the validation engine
			jQuery("#request").validationEngine();

			$("#request").bind("jqv.form.validating", function(event){
				$("#hookError").html("")
			})

			$("#request").bind("jqv.form.result", function(event , errorFound){
				if(errorFound) $("#hookError").append("There is some problems with your form");
			})
		});
		

function addRow(tableID) {

        var table = $("#"+tableID);
        var rowCount = $(">tbody>tr", table).length;
		if(rowCount>=7){
		alert("Can't have more than 7 rows.");
		return;
		}
        var row = $(">tbody>tr:last", table).clone().appendTo(table);
        $(":text", row).val("");
var elTab = document.getElementById(tableID);
var replace='Destination '+(rowCount).toString();
var replace2='Destination '+(rowCount+1).toString();
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);

var elTab = document.getElementById(tableID);
var replace='Leg '+(rowCount).toString();
var replace2='Leg '+(rowCount+1).toString();
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);


$(":text[id^=datepicker]", row).removeClass("datepicker hasDatepicker").attr({id: "datepicker"+rowCount, value:""}).datepicker();

var e = document.getElementById("location_departure");
e.id = "new";

    }

	window.onload = function() {
    $("[id=datepicker]").datepicker();
        }
    </SCRIPT>
	
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>ATS Flight Track</title>
</head>
<body>

<form action="book_flight_form.php" method="post" id="request">
<table border="0" width="1000">

<tr>


<td width="1700" valign="top">

			
			<b><img src='images/plane.png' width='50' height='50' align='middle'/> Flight Information</b>
			
			<table id="dataTrack">
			<TR>
			<TD>
			<table width="700" border="0" class="searchform">

				<tr>
					<td><b>Leg 1</b></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td><b>Date:</b></td>
					<td><input type="text" name="departure_date[]" id="datepicker" class="validate[required] text-input"></td>
					<td></td>
					<td></td>
				</tr>
<?php
				$time_list = array(
				"Departure Time:",
                "Arrival Time:");
				?>
				<tr>
					<td colspan="3"><b>Departure/Arrival Schedule Priority: </b><?php
					  echo'<select name="time_state[]" class="validate[required]">';
					  echo'<option value="">Select One</option>';
   foreach($time_list as $time_state){

    echo'<option value="'.$time_state.'">'.$time_state.'</option>';

}

echo'</select>';


					?></td>
					<td><b>Time: </b><?php
					
$time_list = array(
				"12am",
				"1am",
                "2am",
				"3am",
				"4am",
				"5am",
				"6am",
				"7am",
				"8am",
				"9am",
				"10am",
				"11am",
				"12pm",
				"1pm",
				"2pm",
				"3pm",
				"4pm",
				"5pm",
				"6pm",
				"7pm",
				"8pm",
				"9pm",
				"10pm",
				"11pm"
				);
				
										  echo'<select name="time_ampm[]" class="validate[required]">';
										  echo'<option value="">Select One</option>';
   foreach($time_list as $time_ampm){

    echo'<option value="'.$time_ampm.'">'.$time_ampm.'</option>';

}

echo'</select>';
					
					?></td>
				</tr>
				
								<tr>
					<td><b>Departure</b></td>
					<td></td>
					<td><b>Destination 1</b></td>
					<td></td>
				</tr>
				<tr>
					<td><?php
					
					   	$con = mysql_connect("localhost","root","pass");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db('flight_track');

 
 $query_loc = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());
 $query_loc_two = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());

					?>
<b>Frequently Used:</b>
					</td>
					<td>
												<select id="location_departure" name="location_departure[]" class="searchfield_sup" onChange=filltext();>
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc, MYSQL_ASSOC))
{
  $location_departure = htmlentities($data['name']);
  echo '<option value="'.$location_departure.'">'.$location_departure."</option>\n";
}
?>
</select>
					</td>
					<td>
<b>Frequently Used:</b>
					</td>
					<td>
																	<select name="location_destination[]" class="searchfield_sup">
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc_two, MYSQL_ASSOC))
{
  $location_destination = htmlentities($data['name']);
  echo '<option value="'.$location_destination.'">'.$location_destination."</option>\n";
}
?>
</select>
					</td>
				</tr>
				<tr>
					<td><b>City:</b></td>
					<td><input class="searchfield_state" type="text" name="departure_city[]" id="departure_city"></td>
					<td><b>City:</b></td>
					<td><input class="searchfield_state" type="text" name="arrival_city[]"></td>
				</tr>
				<?php
				$state_list = array(
				'Select One',
				'AB'=>"Canada - Alberta",
				'BC'=>"Canada - British Columbia",
				'MB'=>"Canada - Manitoba",
				'NB'=>"Canada - New Brunswick",
				'NL'=>"Canada - Newfoundland and Labrador",
				'NT'=>"Canada - Northwest Territory",
				'NS'=>"Canada - Nova Scotia",
				'NU'=>"Canada - Nunavut",
				'ON'=>"Canada - Ontario",
				'PE'=>"Canada - Prince Edward Island",
				'QC'=>"Canada - Quebec",
				'SK'=>"Canada - Saskatchewan",
				'YT'=>"Canada - Yukon",
				'PR'=>"Puerto Rico",
				'MX'=>"Mexico",
				'AL'=>"Alabama",
                'AK'=>"Alaska",  
                'AZ'=>"Arizona",  
                'AR'=>"Arkansas",  
                'CA'=>"California",  
                'CO'=>"Colorado",  
                'CT'=>"Connecticut",  
                'DE'=>"Delaware",  
                'DC'=>"District Of Columbia",  
                'FL'=>"Florida",  
                'GA'=>"Georgia",  
                'HI'=>"Hawaii",  
                'ID'=>"Idaho",  
                'IL'=>"Illinois",  
                'IN'=>"Indiana",  
                'IA'=>"Iowa",  
                'KS'=>"Kansas",  
                'KY'=>"Kentucky",  
                'LA'=>"Louisiana",  
                'ME'=>"Maine",  
                'MD'=>"Maryland",  
                'MA'=>"Massachusetts",  
                'MI'=>"Michigan",  
                'MN'=>"Minnesota",  
                'MS'=>"Mississippi",  
                'MO'=>"Missouri",  
                'MT'=>"Montana",
                'NE'=>"Nebraska",
                'NV'=>"Nevada",
                'NH'=>"New Hampshire",
                'NJ'=>"New Jersey",
                'NM'=>"New Mexico",
                'NY'=>"New York",
                'NC'=>"North Carolina",
                'ND'=>"North Dakota",
                'OH'=>"Ohio",  
                'OK'=>"Oklahoma",  
                'OR'=>"Oregon",  
                'PA'=>"Pennsylvania",  
                'RI'=>"Rhode Island",  
                'SC'=>"South Carolina",  
                'SD'=>"South Dakota",
                'TN'=>"Tennessee",  
                'TX'=>"Texas",  
                'UT'=>"Utah",  
                'VT'=>"Vermont",  
                'VA'=>"Virginia",  
                'WA'=>"Washington",  
                'WV'=>"West Virginia",  
                'WI'=>"Wisconsin",  
                'WY'=>"Wyoming"
				);
				?>
				<tr>
					<td><b>State:</b></td>
					<td><?php
					  echo'<select name="departure_state[]" class="searchfield_state">';
   foreach($state_list as $departure_state){

    echo'<option value="'.$departure_state.'">'.$departure_state.'</option>';

}

echo'</select>';
					?></td>
					<td><b>State:</b></td>
					<td><?php
					  echo'<select name="arrival_state[]" class="searchfield_state">';
   foreach($state_list as $arrival_state){

    echo'<option value="'.$arrival_state.'">'.$arrival_state.'</option>';

}

echo'</select>';
					?></td>
				</tr>
				<tr>
					<td><b>Zip Code:</b></td>
					<td><input class="searchfield_state" type="text" name="departure_zipcode[]"></td>
					<td><b>Zip Code:</b></td>
					<td><input class="searchfield_state" type="text" name="arrival_zipcode[]"></td>
				</tr>

			</table>
			
						</TD>
			</TR>
			</table>
			<INPUT type="button" value="Add Leg" onclick="addRow('dataTrack')"/><br>
		

			</form>
			<input class="submit" type="submit" value="Submit"/>
</td>

</tr>
</table>

</body>
</html>

Open in new window

form-one.png
form-two.png
0
Comment
Question by:ats2012
  • 40
  • 34
74 Comments
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
1. add id to each state select tag:
1.1 change
<select name="arrival_state[]" class="searchfield_state">

Open in new window

to
<select id="destination_state" name="arrival_state[]" class="searchfield_state">

Open in new window


1.2 change
<select name="departure_state[]" class="searchfield_state">

Open in new window

to
<select id="departure_state" name="departure_state[]" class="searchfield_state">

Open in new window



2. add id to each zip code field:
2.1 change
<input class="searchfield_state" type="text" name="departure_zipcode[]">

Open in new window

to
<input id=departure_zip" class="searchfield_state" type="text" name="departure_zipcode[]">

Open in new window


2.2 change
<input class="searchfield_state" type="text" name="arrival_zipcode[]">

Open in new window

to
<input id=destination_zip" class="searchfield_state" type="text" name="arrival_zipcode[]">

Open in new window


3. change filtertext invokation
3.1 change
<select name="location_destination[]" class="searchfield_sup">

Open in new window

to
<select id="location_destination" name="location_destination[]" class="searchfield_sup" onChange=filltext('destination');>

Open in new window


3.2 change
<select id="location_departure" name="location_departure[]" class="searchfield_sup" onChange=filltext();>

Open in new window

to
<select id="location_departure" name="location_departure[]" class="searchfield_sup" onChange=filltext('departure');>

Open in new window


4. add location id to location_destination
change
<select name="location_destination[]" class="searchfield_sup">

Open in new window

to
<select id="location_destination" name="location_destination[]" class="searchfield_sup">

Open in new window


5. filltext implementation:
function filltext(target)
{
 var e = document.getElementById("location_"+target);
 var group = e.options[e.selectedIndex].text;
var tokens =  group.trim().split(',');
document.getElementById(target+"_city").value= tokens[0];
var state_zip = tokens[1].split(' ');
document.getElementById(target+"_state").value= state_zip[0];
document.getElementById(target+"_zip").value= state_zip[1];
}

Open in new window

0
 

Author Comment

by:ats2012
Comment Utility
This is some awesome work but I am having some issues with this. I replaced everything you said but when you select the Frequently Used for Departure its not putting the State in and when you select anything from Destination its not putting anything in any of the three fields.

Another issue is when I add a new form clicking Add Leg nothing is working. Thanks i will attach the new code and some screenshots.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
error_reporting(E_ALL);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="css/template.css" type="text/css"/>

<script src="scripts/gen_validatorv4.js" type="text/javascript"></script>
<script src="scripts/tablefilter_all_min.js" language="javascript" type="text/javascript"></script>

	<link rel="stylesheet" href="scripts/date_picker/jquery.ui.all.css">
	<script src="scripts/date_picker/jquery-1.8.0.js"></script>
	<script src="scripts/date_picker/jquery.ui.core.js"></script>
	<script src="scripts/date_picker/jquery.ui.widget.js"></script>
	<script src="scripts/date_picker/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="scripts/date_picker/date.css">
	
	<script src="scripts/validate/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
	</script>
	<script src="scripts/validate/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
	</script>

<SCRIPT language="javascript">

function filltext(target)
{
 var e = document.getElementById("location_"+target);
 var group = e.options[e.selectedIndex].text;
var tokens =  group.trim().split(',');
document.getElementById(target+"_city").value= tokens[0];
var state_zip = tokens[1].split(' ');
document.getElementById(target+"_state").value= state_zip[0];
document.getElementById(target+"_zip").value= state_zip[1];
}

		jQuery(document).ready(function(){
			// binds form submission and fields to the validation engine
			jQuery("#request").validationEngine();

			$("#request").bind("jqv.form.validating", function(event){
				$("#hookError").html("")
			})

			$("#request").bind("jqv.form.result", function(event , errorFound){
				if(errorFound) $("#hookError").append("There is some problems with your form");
			})
		});
		

function addRow(tableID) {

        var table = $("#"+tableID);
        var rowCount = $(">tbody>tr", table).length;
		if(rowCount>=7){
		alert("Can't have more than 7 rows.");
		return;
		}
        var row = $(">tbody>tr:last", table).clone().appendTo(table);
        $(":text", row).val("");
var elTab = document.getElementById(tableID);
var replace='Destination '+(rowCount).toString();
var replace2='Destination '+(rowCount+1).toString();
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);

var elTab = document.getElementById(tableID);
var replace='Leg '+(rowCount).toString();
var replace2='Leg '+(rowCount+1).toString();
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);


$(":text[id^=datepicker]", row).removeClass("datepicker hasDatepicker").attr({id: "datepicker"+rowCount, value:""}).datepicker();

var e = document.getElementById("location_departure");
e.id = "new";

    }

	window.onload = function() {
    $("[id=datepicker]").datepicker();
        }
    </SCRIPT>
	
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>ATS Flight Track</title>
</head>
<body>

<form action="book_flight_form.php" method="post" id="request">
<table border="0" width="1000">

<tr>


<td width="1700" valign="top">

			
			<b><img src='images/plane.png' width='50' height='50' align='middle'/> Flight Information</b>
			
			<table id="dataTrack">
			<TR>
			<TD>
			<table width="700" border="0" class="searchform">

				<tr>
					<td><b>Leg 1</b></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td><b>Date:</b></td>
					<td><input type="text" name="departure_date[]" id="datepicker" class="validate[required] text-input"></td>
					<td></td>
					<td></td>
				</tr>
<?php
				$time_list = array(
				"Departure Time:",
                "Arrival Time:");
				?>
				<tr>
					<td colspan="3"><b>Departure/Arrival Schedule Priority: </b><?php
					  echo'<select name="time_state[]" class="validate[required]">';
					  echo'<option value="">Select One</option>';
   foreach($time_list as $time_state){

    echo'<option value="'.$time_state.'">'.$time_state.'</option>';

}

echo'</select>';


					?></td>
					<td><b>Time: </b><?php
					
$time_list = array(
				"12am",
				"1am",
                "2am",
				"3am",
				"4am",
				"5am",
				"6am",
				"7am",
				"8am",
				"9am",
				"10am",
				"11am",
				"12pm",
				"1pm",
				"2pm",
				"3pm",
				"4pm",
				"5pm",
				"6pm",
				"7pm",
				"8pm",
				"9pm",
				"10pm",
				"11pm"
				);
				
										  echo'<select name="time_ampm[]" class="validate[required]">';
										  echo'<option value="">Select One</option>';
   foreach($time_list as $time_ampm){

    echo'<option value="'.$time_ampm.'">'.$time_ampm.'</option>';

}

echo'</select>';
					
					?></td>
				</tr>
				
								<tr>
					<td><b>Departure</b></td>
					<td></td>
					<td><b>Destination 1</b></td>
					<td></td>
				</tr>
				<tr>
					<td><?php
					
					   	$con = mysql_connect("localhost","root","pass");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db('flight_track');

 
 $query_loc = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());
 $query_loc_two = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());

					?>
<b>Frequently Used:</b>
					</td>
					<td>
												<select id="location_departure" name="location_departure[]" class="searchfield_sup" onChange=filltext('departure');>
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc, MYSQL_ASSOC))
{
  $location_departure = htmlentities($data['name']);
  echo '<option value="'.$location_departure.'">'.$location_departure."</option>\n";
}
?>
</select>
					</td>
					<td>
<b>Frequently Used:</b>
					</td>
					<td>
																	<select id="location_destination" name="location_destination[]" class="searchfield_sup" onChange=filltext('destination');>
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc_two, MYSQL_ASSOC))
{
  $location_destination = htmlentities($data['name']);
  echo '<option value="'.$location_destination.'">'.$location_destination."</option>\n";
}
?>
</select>
					</td>
				</tr>
				<tr>
					<td><b>City:</b></td>
					<td><input class="validate[required] text-input" type="text" name="departure_city[]" id="departure_city"></td>
					<td><b>City:</b></td>
					<td><input class="validate[required] text-input" type="text" name="arrival_city[]"></td>
				</tr>
				<?php
				$state_list = array(
				'AB'=>"Canada - Alberta",
				'BC'=>"Canada - British Columbia",
				'MB'=>"Canada - Manitoba",
				'NB'=>"Canada - New Brunswick",
				'NL'=>"Canada - Newfoundland and Labrador",
				'NT'=>"Canada - Northwest Territory",
				'NS'=>"Canada - Nova Scotia",
				'NU'=>"Canada - Nunavut",
				'ON'=>"Canada - Ontario",
				'PE'=>"Canada - Prince Edward Island",
				'QC'=>"Canada - Quebec",
				'SK'=>"Canada - Saskatchewan",
				'YT'=>"Canada - Yukon",
				'PR'=>"Puerto Rico",
				'MX'=>"Mexico",
				'AL'=>"Alabama",
                'AK'=>"Alaska",  
                'AZ'=>"Arizona",  
                'AR'=>"Arkansas",  
                'CA'=>"California",  
                'CO'=>"Colorado",  
                'CT'=>"Connecticut",  
                'DE'=>"Delaware",  
                'DC'=>"District Of Columbia",  
                'FL'=>"Florida",  
                'GA'=>"Georgia",  
                'HI'=>"Hawaii",  
                'ID'=>"Idaho",  
                'IL'=>"Illinois",  
                'IN'=>"Indiana",  
                'IA'=>"Iowa",  
                'KS'=>"Kansas",  
                'KY'=>"Kentucky",  
                'LA'=>"Louisiana",  
                'ME'=>"Maine",  
                'MD'=>"Maryland",  
                'MA'=>"Massachusetts",  
                'MI'=>"Michigan",  
                'MN'=>"Minnesota",  
                'MS'=>"Mississippi",  
                'MO'=>"Missouri",  
                'MT'=>"Montana",
                'NE'=>"Nebraska",
                'NV'=>"Nevada",
                'NH'=>"New Hampshire",
                'NJ'=>"New Jersey",
                'NM'=>"New Mexico",
                'NY'=>"New York",
                'NC'=>"North Carolina",
                'ND'=>"North Dakota",
                'OH'=>"Ohio",  
                'OK'=>"Oklahoma",  
                'OR'=>"Oregon",  
                'PA'=>"Pennsylvania",  
                'RI'=>"Rhode Island",  
                'SC'=>"South Carolina",  
                'SD'=>"South Dakota",
                'TN'=>"Tennessee",  
                'TX'=>"Texas",  
                'UT'=>"Utah",  
                'VT'=>"Vermont",  
                'VA'=>"Virginia",  
                'WA'=>"Washington",  
                'WV'=>"West Virginia",  
                'WI'=>"Wisconsin",  
                'WY'=>"Wyoming"
				);
				?>
				<tr>
					<td><b>State:</b></td>
					<td><?php
					  echo'<select id="departure_state" name="departure_state[]" class="validate[required]">';
					  echo'<option value="">Select One</option>';
   foreach($state_list as $departure_state){

    echo'<option value="'.$departure_state.'">'.$departure_state.'</option>';

}

echo'</select>';
					?></td>
					<td><b>State:</b></td>
					<td><?php
					  echo'<select id="destination_state" name="arrival_state[]" class="validate[required]">';
					  echo'<option value="">Select One</option>';
   foreach($state_list as $arrival_state){

    echo'<option value="'.$arrival_state.'">'.$arrival_state.'</option>';

}

echo'</select>';
					?></td>
				</tr>
				<tr>
					<td><b>Zip Code:</b></td>
					<td><input id="departure_zip" class="validate[required]" type="text" name="departure_zipcode[]"></td>
					<td><b>Zip Code:</b></td>
					<td><input id="destination_zip" class="validate[required]" type="text" name="arrival_zipcode[]"></td>
				</tr>

			</table>
			
						</TD>
			</TR>
			</table>
			<INPUT type="button" value="Add Leg" onclick="addRow('dataTrack')"/><br>
		

			</form>
			<input class="submit" type="submit" value="Submit"/>
</td>

</tr>
</table>

</body>
</html>

Open in new window

form-new.png
form-new-two.png
0
 

Author Comment

by:ats2012
Comment Utility
I fixed everything other than when clicking on add leg and it creates a new form it will not work because the ID is not unique. Do you know how I would increment the ID's with a number on each form and it would use that new ID? New code is below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
error_reporting(E_ALL);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="css/template.css" type="text/css"/>

<script src="scripts/gen_validatorv4.js" type="text/javascript"></script>
<script src="scripts/tablefilter_all_min.js" language="javascript" type="text/javascript"></script>

	<link rel="stylesheet" href="scripts/date_picker/jquery.ui.all.css">
	<script src="scripts/date_picker/jquery-1.8.0.js"></script>
	<script src="scripts/date_picker/jquery.ui.core.js"></script>
	<script src="scripts/date_picker/jquery.ui.widget.js"></script>
	<script src="scripts/date_picker/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="scripts/date_picker/date.css">
	
	<script src="scripts/validate/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
	</script>
	<script src="scripts/validate/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
	</script>

<SCRIPT language="javascript">

function filltext(target)
{
 var e = document.getElementById("location_"+target);
 var group = e.options[e.selectedIndex].text;
var tokens =  group.trim().split(', ');
document.getElementById(target+"_city").value= tokens[0];
var state_zip = tokens[1].split(' ');
document.getElementById(target+"_state").value= state_zip[0];
document.getElementById(target+"_zip").value= state_zip[1];
}

		jQuery(document).ready(function(){
			// binds form submission and fields to the validation engine
			jQuery("#request").validationEngine();

			$("#request").bind("jqv.form.validating", function(event){
				$("#hookError").html("")
			})

			$("#request").bind("jqv.form.result", function(event , errorFound){
				if(errorFound) $("#hookError").append("There is some problems with your form");
			})
		});
		

function addRow(tableID) {

        var table = $("#"+tableID);
        var rowCount = $(">tbody>tr", table).length;
		if(rowCount>=7){
		alert("Can't have more than 7 rows.");
		return;
		}
        var row = $(">tbody>tr:last", table).clone().appendTo(table);
        $(":text", row).val("");
var elTab = document.getElementById(tableID);
var replace='Destination '+(rowCount).toString();
var replace2='Destination '+(rowCount+1).toString();
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);

var elTab = document.getElementById(tableID);
var replace='Leg '+(rowCount).toString();
var replace2='Leg '+(rowCount+1).toString();
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);

document.getElementById("departure_city").id = "departure_city1";

$(":text[id^=datepicker]", row).removeClass("datepicker hasDatepicker").attr({id: "datepicker"+rowCount, value:""}).datepicker();

var e = document.getElementById("location_departure");
e.id = "new";

    }

	window.onload = function() {
    $("[id=datepicker]").datepicker();
        }
    </SCRIPT>
	
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>ATS Flight Track</title>
</head>
<body>

<form action="book_flight_form.php" method="post" id="request">
<table border="0" width="1000">

<tr>


<td width="1700" valign="top">

			
			<b><img src='images/plane.png' width='50' height='50' align='middle'/> Flight Information</b>
			
			<table id="dataTrack">
			<TR>
			<TD>
			<table width="700" border="0" class="searchform">

				<tr>
					<td><b>Leg 1</b></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td><b>Date:</b></td>
					<td><input type="text" name="departure_date[]" id="datepicker" class="validate[required] text-input"></td>
					<td></td>
					<td></td>
				</tr>
<?php
				$time_list = array(
				"Departure Time:",
                "Arrival Time:");
				?>
				<tr>
					<td colspan="3"><b>Departure/Arrival Schedule Priority: </b><?php
					  echo'<select name="time_state[]" class="validate[required]">';
					  echo'<option value="">Select One</option>';
   foreach($time_list as $time_state){

    echo'<option value="'.$time_state.'">'.$time_state.'</option>';

}

echo'</select>';


					?></td>
					<td><b>Time: </b><?php
					
$time_list = array(
				"12am",
				"1am",
                "2am",
				"3am",
				"4am",
				"5am",
				"6am",
				"7am",
				"8am",
				"9am",
				"10am",
				"11am",
				"12pm",
				"1pm",
				"2pm",
				"3pm",
				"4pm",
				"5pm",
				"6pm",
				"7pm",
				"8pm",
				"9pm",
				"10pm",
				"11pm"
				);
				
										  echo'<select name="time_ampm[]" class="validate[required]">';
										  echo'<option value="">Select One</option>';
   foreach($time_list as $time_ampm){

    echo'<option value="'.$time_ampm.'">'.$time_ampm.'</option>';

}

echo'</select>';
					
					?></td>
				</tr>
				
								<tr>
					<td><b>Departure</b></td>
					<td></td>
					<td><b>Destination 1</b></td>
					<td></td>
				</tr>
				<tr>
					<td><?php
					
					   	$con = mysql_connect("localhost","root","pass");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db('flight_track');

 
 $query_loc = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());
 $query_loc_two = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());

					?>
<b>Frequently Used:</b>
					</td>
					<td>
												<select id="location_departure" name="location_departure[]" class="searchfield_sup" onChange=filltext('departure');>
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc, MYSQL_ASSOC))
{
  $location_departure = htmlentities($data['name']);
  echo '<option value="'.$location_departure.'">'.$location_departure."</option>\n";
}
?>
</select>
					</td>
					<td>
<b>Frequently Used:</b>
					</td>
					<td>
																	<select id="location_destination" name="location_destination[]" class="searchfield_sup" onChange=filltext('destination');>
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc_two, MYSQL_ASSOC))
{
  $location_destination = htmlentities($data['name']);
  echo '<option value="'.$location_destination.'">'.$location_destination."</option>\n";
}
?>
</select>
					</td>
				</tr>
				<tr>
					<td><b>City:</b></td>
					<td><input class="validate[required] text-input" type="text" name="departure_city[]" id="departure_city"></td>
					<td><b>City:</b></td>
					<td><input class="validate[required] text-input" type="text" name="arrival_city[]" id="destination_city"></td>
				</tr>
				<?php
				$state_list = array(
				'AB'=>"Canada - Alberta",
				'BC'=>"Canada - British Columbia",
				'MB'=>"Canada - Manitoba",
				'NB'=>"Canada - New Brunswick",
				'NL'=>"Canada - Newfoundland and Labrador",
				'NT'=>"Canada - Northwest Territory",
				'NS'=>"Canada - Nova Scotia",
				'NU'=>"Canada - Nunavut",
				'ON'=>"Canada - Ontario",
				'PE'=>"Canada - Prince Edward Island",
				'QC'=>"Canada - Quebec",
				'SK'=>"Canada - Saskatchewan",
				'YT'=>"Canada - Yukon",
				'PR'=>"Puerto Rico",
				'MX'=>"Mexico",
				'AL'=>"Alabama",
                'AK'=>"Alaska",  
                'AZ'=>"Arizona",  
                'AR'=>"Arkansas",  
                'CA'=>"California",  
                'CO'=>"Colorado",  
                'CT'=>"Connecticut",  
                'DE'=>"Delaware",  
                'DC'=>"District Of Columbia",  
                'FL'=>"Florida",  
                'GA'=>"Georgia",  
                'HI'=>"Hawaii",  
                'ID'=>"Idaho",  
                'IL'=>"Illinois",  
                'IN'=>"Indiana",  
                'IA'=>"Iowa",  
                'KS'=>"Kansas",  
                'KY'=>"Kentucky",  
                'LA'=>"Louisiana",  
                'ME'=>"Maine",  
                'MD'=>"Maryland",  
                'MA'=>"Massachusetts",  
                'MI'=>"Michigan",  
                'MN'=>"Minnesota",  
                'MS'=>"Mississippi",  
                'MO'=>"Missouri",  
                'MT'=>"Montana",
                'NE'=>"Nebraska",
                'NV'=>"Nevada",
                'NH'=>"New Hampshire",
                'NJ'=>"New Jersey",
                'NM'=>"New Mexico",
                'NY'=>"New York",
                'NC'=>"North Carolina",
                'ND'=>"North Dakota",
                'OH'=>"Ohio",  
                'OK'=>"Oklahoma",  
                'OR'=>"Oregon",  
                'PA'=>"Pennsylvania",  
                'RI'=>"Rhode Island",  
                'SC'=>"South Carolina",  
                'SD'=>"South Dakota",
                'TN'=>"Tennessee",  
                'TX'=>"Texas",  
                'UT'=>"Utah",  
                'VT'=>"Vermont",  
                'VA'=>"Virginia",  
                'WA'=>"Washington",  
                'WV'=>"West Virginia",  
                'WI'=>"Wisconsin",  
                'WY'=>"Wyoming"
				);
				?>
				<tr>
					<td><b>State:</b></td>
					<td>
					<input id="departure_state" class="validate[required]" type="text" name="departure_state[]">
					</td>
					<td><b>State:</b></td>
					<td>
					
				<input id="destination_state" class="validate[required]" type="text" name="arrival_state[]">
					</td>
				</tr>
				<tr>
					<td><b>Zip Code:</b></td>
					<td><input id="departure_zip" class="validate[required]" type="text" name="departure_zipcode[]"></td>
					<td><b>Zip Code:</b></td>
					<td><input id="destination_zip" class="validate[required]" type="text" name="arrival_zipcode[]"></td>
				</tr>

			</table>
			
						</TD>
			</TR>
			</table>
			<INPUT type="button" value="Add Leg" onclick="addRow('dataTrack')"/><br>
		

			</form>
			<input class="submit" type="submit" value="Submit"/>
</td>

</tr>
</table>

</body>
</html>

Open in new window

0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
New form is a new page?
0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
@ats2012

have u managed to fix the form id issue?
0
 

Author Comment

by:ats2012
Comment Utility
The new form is on the same page and I have not been able to figure this out yet. I don't know how to change the ID's to add a number and than use that new ID for each new form
0
 

Author Comment

by:ats2012
Comment Utility
I am also having issues with this in Internet Explorer. The error i am getting is.

SCRIPT438: Object doesn't support property or method 'trim'
book_flight_form.php, line 29 character 1
0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
change:
var tokens =  group.trim().split(',');

Open in new window


to:
var tokens =  $.trim(group).split(',');

Open in new window

0
 

Author Comment

by:ats2012
Comment Utility
That fixed the issue with IE. Do you have an easy solution to the ID issue?
0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
where's the code which creates the new form?
0
 

Author Comment

by:ats2012
Comment Utility
This is what creates it.

function addRow(tableID) {

        var table = $("#"+tableID);
        var rowCount = $(">tbody>tr", table).length;
		if(rowCount>=7){
		alert("Can't have more than 7 rows.");
		return;
		}
        var row = $(">tbody>tr:last", table).clone().appendTo(table);
        $(":text", row).val("");
var elTab = document.getElementById(tableID);
var replace='Destination '+(rowCount).toString();
var replace2='Destination '+(rowCount+1).toString();
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);

var elTab = document.getElementById(tableID);
var replace='Leg '+(rowCount).toString();
var replace2='Leg '+(rowCount+1).toString();
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);

document.getElementById("departure_city").id = "departure_city1";

$(":text[id^=datepicker]", row).removeClass("datepicker hasDatepicker").attr({id: "datepicker"+rowCount, value:""}).datepicker();

var e = document.getElementById("location_departure");
e.id = "new";

    }

Open in new window

0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
why not having a global variable which increments every new form and set its id?
0
 

Author Comment

by:ats2012
Comment Utility
I don't know how to set it up. I have been searching for a solution but I am totally new at JavaScript and its taking forever.
0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
The code u posted creates new row not new form
0
 

Author Comment

by:ats2012
Comment Utility
It adds to the form. Sorry for the confusion. What I need it to do is when it adds the new row, I need a 1 added to the ID's departure_city, destination_city, departure_state, destination_state, departure_zip and destination_zip so when you drop down the second row that will also work.
0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
ok, in your javascript section of the html, add global variable called row_id_counter and set it to 1.

in your addRow function, add the counter to the id name of each control you use (like location_departure etc).
at the end of the addRow function increment this value by 1 (row_id_counter++)

so for instance, instead of this line:
document.getElementById("departure_city").id = "departure_city1";

Open in new window


use this line:
document.getElementById("departure_city").id = "departure_city" + row_id_counter.toString();

Open in new window

0
 

Author Comment

by:ats2012
Comment Utility
I got this to work in Chrome and Firefox but of course it does not work in Internet Explorer. Any ideas? i am not seeing any errors pop in the developer tools.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
error_reporting(E_ALL);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="css/template.css" type="text/css"/>

<script src="scripts/gen_validatorv4.js" type="text/javascript"></script>
<script src="scripts/tablefilter_all_min.js" language="javascript" type="text/javascript"></script>

	<link rel="stylesheet" href="scripts/date_picker/jquery.ui.all.css">
	<script src="scripts/date_picker/jquery-1.8.0.js"></script>
	<script src="scripts/date_picker/jquery.ui.core.js"></script>
	<script src="scripts/date_picker/jquery.ui.widget.js"></script>
	<script src="scripts/date_picker/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="scripts/date_picker/date.css">
	
	<script src="scripts/validate/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
	</script>
	<script src="scripts/validate/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
	</script>

<SCRIPT language="javascript">

function filltext(target, index)
{
 var e = document.getElementById("location_"+target+index);
 var group = e.options[e.selectedIndex].text;
var tokens =  $.trim(group).split(', ');
document.getElementById(target+"_city"+index).value= tokens[0];
var state_zip = tokens[1].split(' ');
document.getElementById(target+"_state"+index).value= state_zip[0];
document.getElementById(target+"_zip"+index).value= state_zip[1];
}

		jQuery(document).ready(function(){
			// binds form submission and fields to the validation engine
			jQuery("#request").validationEngine('attach');

			$("#request").bind("jqv.form.validating", function(event){
				$("#hookError").html("")
			})

			$("#request").bind("jqv.form.result", function(event , errorFound){
				if(errorFound) $("#hookError").append("There is some problems with your form");
			})
		});
		

function addRow(tableID) {

        var table = $("#"+tableID);
        var rowCount = $(">tbody>tr", table).length;
		if(rowCount>=7){
		alert("Can't have more than 7 rows.");
		return;
		}
        var row = $(">tbody>tr:last", table).clone().appendTo(table);
        $(":text", row).val("");
var elTab = document.getElementById(tableID);
var replace='Destination '+(rowCount).toString();
var replace2='Destination '+(rowCount+1).toString();
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);

var elTab = document.getElementById(tableID);
var replace='Leg '+(rowCount).toString();
var replace2='Leg '+(rowCount+1).toString();
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);

var elTab = document.getElementById(tableID);
var replace= '\'departure\',\''+rowCount+    '\'';
var replace2='\'departure\',\''+(rowCount+1)+'\'';
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);

var elTab = document.getElementById(tableID);
var replace= '\'destination\',\''+rowCount+    '\'';
var replace2='\'destination\',\''+(rowCount+1)+'\'';
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);

var elTab = document.getElementById(tableID);
var replace='id="departure_city'+rowCount+'"';
var replace2='id="departure_city'+(rowCount+1)+'"';
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);

var elTab = document.getElementById(tableID);
var replace='id="location_departure'+rowCount+'"';
var replace2='id="location_departure'+(rowCount+1)+'"';
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);

var elTab = document.getElementById(tableID);
var replace='id="location_destination'+rowCount+'"';
var replace2='id="location_destination'+(rowCount+1)+'"';
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);

var elTab = document.getElementById(tableID);
var replace='id="departure_state'+rowCount+'"';
var replace2='id="departure_state'+(rowCount+1)+'"';
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);

var elTab = document.getElementById(tableID);
var replace='id="departure_zip'+rowCount+'"';
var replace2='id="departure_zip'+(rowCount+1)+'"';
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);

var elTab = document.getElementById(tableID);
var replace='id="destination_city'+rowCount+'"';
var replace2='id="destination_city'+(rowCount+1)+'"';
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);

var elTab = document.getElementById(tableID);
var replace='id="destination_state'+rowCount+'"';
var replace2='id="destination_state'+(rowCount+1)+'"';
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);

var elTab = document.getElementById(tableID);
var replace='id="destination_zip'+rowCount+'"';
var replace2='id="destination_zip'+(rowCount+1)+'"';
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);

$(":text[id^=datepicker]", row).removeClass("datepicker hasDatepicker").attr({id: "datepicker"+rowCount, value:""}).datepicker();



    }

	window.onload = function() {
    $("[id=datepicker]").datepicker();
        }
    </SCRIPT>
	
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>ATS Flight Track</title>
</head>
<body>

<form action="book_flight_form.php" method="post" id="request">
<table border="0" width="1000">

<tr>


<td width="1700" valign="top">

			
			<b><img src='images/plane.png' width='50' height='50' align='middle'/> Flight Information</b>
			
			<table id="dataTrack">
			<TR>
			<TD>
			<table width="700" border="0" class="searchform">

				<tr>
					<td><b>Leg 1</b></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td><b>Date:</b></td>
					<td><input type="text" name="departure_date[]" id="datepicker" class="validate[required] text-input"></td>
					<td></td>
					<td></td>
				</tr>
<?php
				$time_list = array(
				"Departure Time:",
                "Arrival Time:");
				?>
				<tr>
					<td colspan="3"><b>Departure/Arrival Schedule Priority: </b><?php
					  echo'<select name="time_state[]" class="validate[required]">';
					  echo'<option value="">Select One</option>';
   foreach($time_list as $time_state){

    echo'<option value="'.$time_state.'">'.$time_state.'</option>';

}

echo'</select>';


					?></td>
					<td><b>Time: </b><?php
					
$time_list = array(
				"12am",
				"1am",
                "2am",
				"3am",
				"4am",
				"5am",
				"6am",
				"7am",
				"8am",
				"9am",
				"10am",
				"11am",
				"12pm",
				"1pm",
				"2pm",
				"3pm",
				"4pm",
				"5pm",
				"6pm",
				"7pm",
				"8pm",
				"9pm",
				"10pm",
				"11pm"
				);
				
										  echo'<select name="time_ampm[]" class="validate[required]">';
										  echo'<option value="">Select One</option>';
   foreach($time_list as $time_ampm){

    echo'<option value="'.$time_ampm.'">'.$time_ampm.'</option>';

}

echo'</select>';
					
					?></td>
				</tr>
				
								<tr>
					<td><b>Departure</b></td>
					<td></td>
					<td><b>Destination 1</b></td>
					<td></td>
				</tr>
				<tr>
					<td><?php
					
					   	$con = mysql_connect("localhost","root","pass");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db('flight_track');

 
 $query_loc = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());
 $query_loc_two = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());

					?>
<b>Frequently Used:</b>
					</td>
					<td>
												<select id="location_departure1" name="location_departure[]" class="searchfield_sup" onChange=filltext('departure','1');>
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc, MYSQL_ASSOC))
{
  $location_departure = htmlentities($data['name']);
  echo '<option value="'.$location_departure.'">'.$location_departure."</option>\n";
}
?>
</select>
					</td>
					<td>
<b>Frequently Used:</b>
					</td>
					<td>
																	<select id="location_destination1" name="location_destination[]" class="searchfield_sup" onChange=filltext('destination','1');>
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc_two, MYSQL_ASSOC))
{
  $location_destination = htmlentities($data['name']);
  echo '<option value="'.$location_destination.'">'.$location_destination."</option>\n";
}
?>
</select>
					</td>
				</tr>
				<tr>
					<td><b>City:</b></td>
					<td><input class="validate[required] text-input" type="text" name="departure_city[]" id="departure_city1"></td>
					<td><b>City:</b></td>
					<td><input class="validate[required] text-input" type="text" name="arrival_city[]" id="destination_city1"></td>
				</tr>
				<?php
				$state_list = array(
				'AB'=>"Canada - Alberta",
				'BC'=>"Canada - British Columbia",
				'MB'=>"Canada - Manitoba",
				'NB'=>"Canada - New Brunswick",
				'NL'=>"Canada - Newfoundland and Labrador",
				'NT'=>"Canada - Northwest Territory",
				'NS'=>"Canada - Nova Scotia",
				'NU'=>"Canada - Nunavut",
				'ON'=>"Canada - Ontario",
				'PE'=>"Canada - Prince Edward Island",
				'QC'=>"Canada - Quebec",
				'SK'=>"Canada - Saskatchewan",
				'YT'=>"Canada - Yukon",
				'PR'=>"Puerto Rico",
				'MX'=>"Mexico",
				'AL'=>"Alabama",
                'AK'=>"Alaska",  
                'AZ'=>"Arizona",  
                'AR'=>"Arkansas",  
                'CA'=>"California",  
                'CO'=>"Colorado",  
                'CT'=>"Connecticut",  
                'DE'=>"Delaware",  
                'DC'=>"District Of Columbia",  
                'FL'=>"Florida",  
                'GA'=>"Georgia",  
                'HI'=>"Hawaii",  
                'ID'=>"Idaho",  
                'IL'=>"Illinois",  
                'IN'=>"Indiana",  
                'IA'=>"Iowa",  
                'KS'=>"Kansas",  
                'KY'=>"Kentucky",  
                'LA'=>"Louisiana",  
                'ME'=>"Maine",  
                'MD'=>"Maryland",  
                'MA'=>"Massachusetts",  
                'MI'=>"Michigan",  
                'MN'=>"Minnesota",  
                'MS'=>"Mississippi",  
                'MO'=>"Missouri",  
                'MT'=>"Montana",
                'NE'=>"Nebraska",
                'NV'=>"Nevada",
                'NH'=>"New Hampshire",
                'NJ'=>"New Jersey",
                'NM'=>"New Mexico",
                'NY'=>"New York",
                'NC'=>"North Carolina",
                'ND'=>"North Dakota",
                'OH'=>"Ohio",  
                'OK'=>"Oklahoma",  
                'OR'=>"Oregon",  
                'PA'=>"Pennsylvania",  
                'RI'=>"Rhode Island",  
                'SC'=>"South Carolina",  
                'SD'=>"South Dakota",
                'TN'=>"Tennessee",  
                'TX'=>"Texas",  
                'UT'=>"Utah",  
                'VT'=>"Vermont",  
                'VA'=>"Virginia",  
                'WA'=>"Washington",  
                'WV'=>"West Virginia",  
                'WI'=>"Wisconsin",  
                'WY'=>"Wyoming"
				);
				?>
				<tr>
					<td><b>State:</b></td>
					<td>
					<input id="departure_state1" class="validate[required]" type="text" name="departure_state[]">
					</td>
					<td><b>State:</b></td>
					<td>
					<input id="destination_state1" class="validate[required]" type="text" name="arrival_state[]">
					
</td>
				</tr>
				<tr>
					<td><b>Zip Code:</b></td>
					<td><input id="departure_zip1" class="validate[required]" type="text" name="departure_zipcode[]"></td>
					<td><b>Zip Code:</b></td>
					<td><input id="destination_zip1" class="validate[required]" type="text" name="arrival_zipcode[]"></td>
				</tr>

			</table>
			
						</TD>
			</TR>
			</table>
			<INPUT type="button" value="Add Leg" onclick="addRow('dataTrack')"/><br>
		

			</form>
			<input class="submit" type="submit" value="Submit"/>
</td>

</tr>
</table>

</body>
</html>

Open in new window

0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
before we continue let me suggest some code improvement for you.
first of all u shouldn't use replace string to update the id for the elements, use jquery instead.


so instead of:
var elTab = document.getElementById(tableID);
var replace='Destination '+(rowCount).toString();
var replace2='Destination '+(rowCount+1).toString();
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);

Open in new window


use:
var element = $("#"+tableID).find('#Destination'+rowCount);
element.attr("id","Destination"+(rowCount+1).toString());

Open in new window


to get element by id, the format is $("#<element-id>");
$("#"+tableID) -> returns table element.

to find any inner element, you can use find:
$("#"+tableID).find('#Destination'+rowCount) -> return inner element of table which have the id of Destination+rowCount.

using jquery became standard in javascript developmetn and replaces the old-fashioned getElementById.

all jquery api can be found here Jquery API.

the second improvement is using a helper function to update the ids of all your elements,
instead of hard code each one of them separately:

so your addRow function and the helper function will look like this:
function updateElementId(tableID, rowCount, elementName){
	var element = $("#"+tableID).find('#Destination'+rowCount);
	element.attr("id","Destination"+(rowCount+1).toString());
}

function addRow(tableID) {

	var table = $("#"+tableID);
	var rowCount = $(">tbody>tr", table).length;
	if(rowCount>=7){
		alert("Can't have more than 7 rows.");
		return;
	}

	var row = $(">tbody>tr:last", table).clone().appendTo(table);
	$(":text", row).val("");
		
var arrElements =['Destination','Leg','departure','departure_city','departure_zip','location_departure','location_destination','departure_state','destination_zip];

$.each(arrElements, function(index, element) {
  updateElementId(tableID, rowCount, element)
});
	$(":text[id^=datepicker]", row).removeClass("datepicker hasDatepicker").attr({id: "datepicker"+rowCount, value:""}).datepicker();
}

Open in new window

0
 

Author Comment

by:ats2012
Comment Utility
This is what I have now and nothing is working again. What needs to be changed for onchange to work. I also listed the errors

Uncaught SyntaxError: Unexpected token ILLEGAL book_flight_form.php:67
Uncaught ReferenceError: addRow is not defined book_flight_form.php:508
onclick book_flight_form.php:508
Uncaught ReferenceError: filltext is not defined book_flight_form.php:132
onchange book_flight_form.php:132
Uncaught ReferenceError: filltext is not defined book_flight_form.php:307
onchange


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
error_reporting(E_ALL);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="css/template.css" type="text/css"/>

<script src="scripts/gen_validatorv4.js" type="text/javascript"></script>
<script src="scripts/tablefilter_all_min.js" language="javascript" type="text/javascript"></script>

	<link rel="stylesheet" href="scripts/date_picker/jquery.ui.all.css">
	<script src="scripts/date_picker/jquery-1.8.0.js"></script>
	<script src="scripts/date_picker/jquery.ui.core.js"></script>
	<script src="scripts/date_picker/jquery.ui.widget.js"></script>
	<script src="scripts/date_picker/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="scripts/date_picker/date.css">
	
	<script src="scripts/validate/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
	</script>
	<script src="scripts/validate/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
	</script>

<SCRIPT language="javascript">

function filltext(target, index)
{
 var e = document.getElementById("location_"+target+index);
 var group = e.options[e.selectedIndex].text;
var tokens =  $.trim(group).split(', ');
document.getElementById(target+"_city"+index).value= tokens[0];
var state_zip = tokens[1].split(' ');
document.getElementById(target+"_state"+index).value= state_zip[0];
document.getElementById(target+"_zip"+index).value= state_zip[1];
}

		jQuery(document).ready(function(){
			// binds form submission and fields to the validation engine
			jQuery("#request").validationEngine('attach');

			$("#request").bind("jqv.form.validating", function(event){
				$("#hookError").html("")
			})

			$("#request").bind("jqv.form.result", function(event , errorFound){
				if(errorFound) $("#hookError").append("There is some problems with your form");
			})
		});
		

function updateElementId(tableID, rowCount, elementName){
	var element = $("#"+tableID).find('#Destination'+rowCount);
	element.attr("id","Destination"+(rowCount+1).toString());
}

function addRow(tableID) {

	var table = $("#"+tableID);
	var rowCount = $(">tbody>tr", table).length;
	if(rowCount>=7){
		alert("Can't have more than 7 rows.");
		return;
	}

	var row = $(">tbody>tr:last", table).clone().appendTo(table);
	$(":text", row).val("");
		
var arrElements =['Destination','Leg','departure','departure_city','departure_zip','location_departure','location_destination','departure_state','destination_zip];

$.each(arrElements, function(index, element) {
  updateElementId(tableID, rowCount, element)
});
	$(":text[id^=datepicker]", row).removeClass("datepicker hasDatepicker").attr({id: "datepicker"+rowCount, value:""}).datepicker();
}




	window.onload = function() {
    $("[id=datepicker]").datepicker();
        }
    </SCRIPT>
	
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>ATS Flight Track</title>
</head>
<body>

<form action="book_flight_form.php" method="post" id="request">
<table border="0" width="1000">

<tr>


<td width="1700" valign="top">

			
			<b><img src='images/plane.png' width='50' height='50' align='middle'/> Flight Information</b>
			
			<table id="dataTrack">
			<TR>
			<TD>
			<table width="700" border="0" class="searchform">

				<tr>
					<td><b>Leg 1</b></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td><b>Date:</b></td>
					<td><input type="text" name="departure_date[]" id="datepicker" class="validate[required] text-input"></td>
					<td></td>
					<td></td>
				</tr>
<?php
				$time_list = array(
				"Departure Time:",
                "Arrival Time:");
				?>
				<tr>
					<td colspan="3"><b>Departure/Arrival Schedule Priority: </b><?php
					  echo'<select name="time_state[]" class="validate[required]">';
					  echo'<option value="">Select One</option>';
   foreach($time_list as $time_state){

    echo'<option value="'.$time_state.'">'.$time_state.'</option>';

}

echo'</select>';


					?></td>
					<td><b>Time: </b><?php
					
$time_list = array(
				"12am",
				"1am",
                "2am",
				"3am",
				"4am",
				"5am",
				"6am",
				"7am",
				"8am",
				"9am",
				"10am",
				"11am",
				"12pm",
				"1pm",
				"2pm",
				"3pm",
				"4pm",
				"5pm",
				"6pm",
				"7pm",
				"8pm",
				"9pm",
				"10pm",
				"11pm"
				);
				
										  echo'<select name="time_ampm[]" class="validate[required]">';
										  echo'<option value="">Select One</option>';
   foreach($time_list as $time_ampm){

    echo'<option value="'.$time_ampm.'">'.$time_ampm.'</option>';

}

echo'</select>';
					
					?></td>
				</tr>
				
								<tr>
					<td><b>Departure</b></td>
					<td></td>
					<td><b>Destination 1</b></td>
					<td></td>
				</tr>
				<tr>
					<td><?php
					
					   	$con = mysql_connect("localhost","root","pass");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db('flight_track');

 
 $query_loc = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());
 $query_loc_two = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());

					?>
<b>Frequently Used:</b>
					</td>
					<td>
												<select id="location_departure1" name="location_departure[]" class="searchfield_sup" onChange=filltext('departure','1');>
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc, MYSQL_ASSOC))
{
  $location_departure = htmlentities($data['name']);
  echo '<option value="'.$location_departure.'">'.$location_departure."</option>\n";
}
?>
</select>
					</td>
					<td>
<b>Frequently Used:</b>
					</td>
					<td>
																	<select id="location_destination1" name="location_destination[]" class="searchfield_sup" onChange=filltext('destination','1');>
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc_two, MYSQL_ASSOC))
{
  $location_destination = htmlentities($data['name']);
  echo '<option value="'.$location_destination.'">'.$location_destination."</option>\n";
}
?>
</select>
					</td>
				</tr>
				<tr>
					<td><b>City:</b></td>
					<td><input class="validate[required] text-input" type="text" name="departure_city[]" id="departure_city1"></td>
					<td><b>City:</b></td>
					<td><input class="validate[required] text-input" type="text" name="arrival_city[]" id="destination_city1"></td>
				</tr>
				<?php
				$state_list = array(
				'AB'=>"Canada - Alberta",
				'BC'=>"Canada - British Columbia",
				'MB'=>"Canada - Manitoba",
				'NB'=>"Canada - New Brunswick",
				'NL'=>"Canada - Newfoundland and Labrador",
				'NT'=>"Canada - Northwest Territory",
				'NS'=>"Canada - Nova Scotia",
				'NU'=>"Canada - Nunavut",
				'ON'=>"Canada - Ontario",
				'PE'=>"Canada - Prince Edward Island",
				'QC'=>"Canada - Quebec",
				'SK'=>"Canada - Saskatchewan",
				'YT'=>"Canada - Yukon",
				'PR'=>"Puerto Rico",
				'MX'=>"Mexico",
				'AL'=>"Alabama",
                'AK'=>"Alaska",  
                'AZ'=>"Arizona",  
                'AR'=>"Arkansas",  
                'CA'=>"California",  
                'CO'=>"Colorado",  
                'CT'=>"Connecticut",  
                'DE'=>"Delaware",  
                'DC'=>"District Of Columbia",  
                'FL'=>"Florida",  
                'GA'=>"Georgia",  
                'HI'=>"Hawaii",  
                'ID'=>"Idaho",  
                'IL'=>"Illinois",  
                'IN'=>"Indiana",  
                'IA'=>"Iowa",  
                'KS'=>"Kansas",  
                'KY'=>"Kentucky",  
                'LA'=>"Louisiana",  
                'ME'=>"Maine",  
                'MD'=>"Maryland",  
                'MA'=>"Massachusetts",  
                'MI'=>"Michigan",  
                'MN'=>"Minnesota",  
                'MS'=>"Mississippi",  
                'MO'=>"Missouri",  
                'MT'=>"Montana",
                'NE'=>"Nebraska",
                'NV'=>"Nevada",
                'NH'=>"New Hampshire",
                'NJ'=>"New Jersey",
                'NM'=>"New Mexico",
                'NY'=>"New York",
                'NC'=>"North Carolina",
                'ND'=>"North Dakota",
                'OH'=>"Ohio",  
                'OK'=>"Oklahoma",  
                'OR'=>"Oregon",  
                'PA'=>"Pennsylvania",  
                'RI'=>"Rhode Island",  
                'SC'=>"South Carolina",  
                'SD'=>"South Dakota",
                'TN'=>"Tennessee",  
                'TX'=>"Texas",  
                'UT'=>"Utah",  
                'VT'=>"Vermont",  
                'VA'=>"Virginia",  
                'WA'=>"Washington",  
                'WV'=>"West Virginia",  
                'WI'=>"Wisconsin",  
                'WY'=>"Wyoming"
				);
				?>
				<tr>
					<td><b>State:</b></td>
					<td>
					<input id="departure_state1" class="validate[required]" type="text" name="departure_state[]">
					</td>
					<td><b>State:</b></td>
					<td>
					<input id="destination_state1" class="validate[required]" type="text" name="arrival_state[]">
					
</td>
				</tr>
				<tr>
					<td><b>Zip Code:</b></td>
					<td><input id="departure_zip1" class="validate[required]" type="text" name="departure_zipcode[]"></td>
					<td><b>Zip Code:</b></td>
					<td><input id="destination_zip1" class="validate[required]" type="text" name="arrival_zipcode[]"></td>
				</tr>

			</table>
			
						</TD>
			</TR>
			</table>
			<INPUT type="button" value="Add Leg" onclick="addRow('dataTrack')"/><br>
		

			</form>
			<input class="submit" type="submit" value="Submit"/>
</td>

</tr>
</table>

</body>
</html>

Open in new window

0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
can u debug the code and post the first line that throws an error?
the line numbers say nothing to me.
also i've posted the code not as final solution, obviously you need to run it through debugger and fix the ids and the things that i was unaware.
0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
which debugger you run? firebug or explorer Developer Tools?
0
 

Author Comment

by:ats2012
Comment Utility
Uncaught SyntaxError: Unexpected token ILLEGAL

var arrElements =['Destination','Leg','departure','departure_city','departure_zip','location_departure','location_destination','departure_state','destination_zip];

Uncaught ReferenceError: filltext is not defined book_flight_form.php:132
onchange


<select id="location_departure1" name="location_departure[]" class="searchfield_sup" onChange=filltext('departure','1');>

Uncaught ReferenceError: addRow is not defined book_flight_form.php:508
onclick


<INPUT type="button" value="Add Leg" onclick="addRow('dataTrack')"/><br>

Uncaught ReferenceError: filltext is not defined book_flight_form.php:307
onchange


<select id="location_destination1" name="location_destination[]" class="searchfield_sup" onChange=filltext('destination','1');>
0
 

Author Comment

by:ats2012
Comment Utility
I use Chrome to debug the code.
0
 

Author Comment

by:ats2012
Comment Utility
Most of this is fixed. Forgot a ' after destination_zip. Now im running into another issue. When I add a new row its not incrementing any of the ID's by 1
0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
check if you increment the counter variable at the end of your addRow function
0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
under <SCRIPT language="javascript">
code:

var page_counter = 1;

use it in the addRow function when calling updateElementId,
and at the end of addRow function, code:
page_counter++;
0
 

Author Comment

by:ats2012
Comment Utility
This is so confusing. Is this what is suppose to increment the ID's? I'm not understating why only Destination is in here.

function updateElementId(tableID, rowCount, elementName){
      var element = $("#"+tableID).find('#Destination'+rowCount);
      element.attr("id","Destination"+(rowCount+1).toString());
}

I attached a picture of what was working before. How it works is each time you click Add Leg it will increment the value's of Leg and Destination. It also is suppose to increment all the ID's Frequently used, City, State and Zip code of each side. Its not incrementing anything now.
form.PNG
0
 

Author Comment

by:ats2012
Comment Utility
This is what I got and its still not changing anything. Did I add page_counter in the incorrent spot?

<SCRIPT language="javascript">

var page_counter = 1;

function filltext(target, index)
{
 var e = document.getElementById("location_"+target+index);
 var group = e.options[e.selectedIndex].text;
var tokens =  $.trim(group).split(', ');
document.getElementById(target+"_city"+index).value= tokens[0];
var state_zip = tokens[1].split(' ');
document.getElementById(target+"_state"+index).value= state_zip[0];
document.getElementById(target+"_zip"+index).value= state_zip[1];
}

            jQuery(document).ready(function(){
                  // binds form submission and fields to the validation engine
                  jQuery("#request").validationEngine('attach');

                  $("#request").bind("jqv.form.validating", function(event){
                        $("#hookError").html("")
                  })

                  $("#request").bind("jqv.form.result", function(event , errorFound){
                        if(errorFound) $("#hookError").append("There is some problems with your form");
                  })
            });
            
            
function updateElementId(tableID, rowCount, elementName){
      var element = $("#"+tableID).find('#Destination'+rowCount);
      element.attr("id","Destination"+(rowCount+1).toString());
}

function addRow(tableID) {

        var table = $("#"+tableID);
        var rowCount = $(">tbody>tr", table).length;
            if(rowCount>=7){
            alert("Can't have more than 7 rows.");
            return;
            }
        var row = $(">tbody>tr:last", table).clone().appendTo(table);
        $(":text", row).val("");
      
var arrElements =['Destination','Leg','departure','departure_city','departure_zip','location_departure','location_destination','departure_state','destination_zip'];

$.each(arrElements, function(index, element) {
  updateElementId(tableID, rowCount, page_counter)
});
      $(":text[id^=datepicker]", row).removeClass("datepicker hasDatepicker").attr({id: "datepicker"+rowCount, value:""}).datepicker();
      
      page_counter++;
}

      window.onload = function() {
    $("[id=datepicker]").datepicker();
        }
    </SCRIPT>
0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
sorry man my bad.
it should be:
function updateElementId(tableID, rowCount, elementName){
      var element = $("#"+tableID).find('#'+elementName+rowCount);
      element.attr("id",elementName+(rowCount+1).toString());
}

Open in new window


the counter is right on the spot.
0
 

Author Comment

by:ats2012
Comment Utility
Its now incrementing the values but the wrong way. When you add a Row its changing the current row to 2 and using 1 for the added row. When I choose the drop down on the second row its not working correctly.
0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
can u post your code please?
0
 

Author Comment

by:ats2012
Comment Utility
I think its an issue with this.

<select id="location_destination1" name="location_destination[]" class="searchfield_sup" onChange=filltext('destination','1');>

The 1 in filltext needs to be incremented for the drop down values to go to the correct text boxes. I attached a picture with all the ID's of each box.
form2.png
0
 

Author Comment

by:ats2012
Comment Utility
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
error_reporting(E_ALL);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="css/template.css" type="text/css"/>

<script src="scripts/gen_validatorv4.js" type="text/javascript"></script>
<script src="scripts/tablefilter_all_min.js" language="javascript" type="text/javascript"></script>

	<link rel="stylesheet" href="scripts/date_picker/jquery.ui.all.css">
	<script src="scripts/date_picker/jquery-1.8.0.js"></script>
	<script src="scripts/date_picker/jquery.ui.core.js"></script>
	<script src="scripts/date_picker/jquery.ui.widget.js"></script>
	<script src="scripts/date_picker/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="scripts/date_picker/date.css">
	
	<script src="scripts/validate/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
	</script>
	<script src="scripts/validate/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
	</script>

<SCRIPT language="javascript">

var page_counter = 1;

function filltext(target, index)
{
 var e = document.getElementById("location_"+target+index);
 var group = e.options[e.selectedIndex].text;
var tokens =  $.trim(group).split(', ');
document.getElementById(target+"_city"+index).value= tokens[0];
var state_zip = tokens[1].split(' ');
document.getElementById(target+"_state"+index).value= state_zip[0];
document.getElementById(target+"_zip"+index).value= state_zip[1];
}

		jQuery(document).ready(function(){
			// binds form submission and fields to the validation engine
			jQuery("#request").validationEngine('attach');

			$("#request").bind("jqv.form.validating", function(event){
				$("#hookError").html("")
			})

			$("#request").bind("jqv.form.result", function(event , errorFound){
				if(errorFound) $("#hookError").append("There is some problems with your form");
			})
		});
		
		
function updateElementId(tableID, rowCount, elementName){
      var element = $("#"+tableID).find('#'+elementName+rowCount);
      element.attr("id",elementName+(rowCount+1).toString());
}

function addRow(tableID) {

        var table = $("#"+tableID);
        var rowCount = $(">tbody>tr", table).length;
		if(rowCount>=7){
		alert("Can't have more than 7 rows.");
		return;
		}
        var row = $(">tbody>tr:last", table).clone().appendTo(table);
        $(":text", row).val("");
	
var arrElements =['departure','departure_city','departure_zip','location_departure','location_destination','departure_state','destination_zip'];

$.each(arrElements, function(index, element) {
  updateElementId(tableID, rowCount, element)
});
	$(":text[id^=datepicker]", row).removeClass("datepicker hasDatepicker").attr({id: "datepicker"+rowCount, value:""}).datepicker();
	
	page_counter++;
}

	window.onload = function() {
    $("[id=datepicker]").datepicker();
        }
    </SCRIPT>
	
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>ATS Flight Track</title>
</head>
<body>

<form action="book_flight_form.php" method="post" id="request">
<table border="0" width="1000">

<tr>


<td width="1700" valign="top">

			
			<b><img src='images/plane.png' width='50' height='50' align='middle'/> Flight Information</b>
			
			<table id="dataTrack">
			<TR>
			<TD>
			<table width="700" border="0" class="searchform">

				<tr>
					<td><b>Leg 1</b></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td><b>Date:</b></td>
					<td><input type="text" name="departure_date[]" id="datepicker" class="validate[required] text-input"></td>
					<td></td>
					<td></td>
				</tr>
<?php
				$time_list = array(
				"Departure Time:",
                "Arrival Time:");
				?>
				<tr>
					<td colspan="3"><b>Departure/Arrival Schedule Priority: </b><?php
					  echo'<select name="time_state[]" class="validate[required]">';
					  echo'<option value="">Select One</option>';
   foreach($time_list as $time_state){

    echo'<option value="'.$time_state.'">'.$time_state.'</option>';

}

echo'</select>';


					?></td>
					<td><b>Time: </b><?php
					
$time_list = array(
				"12am",
				"1am",
                "2am",
				"3am",
				"4am",
				"5am",
				"6am",
				"7am",
				"8am",
				"9am",
				"10am",
				"11am",
				"12pm",
				"1pm",
				"2pm",
				"3pm",
				"4pm",
				"5pm",
				"6pm",
				"7pm",
				"8pm",
				"9pm",
				"10pm",
				"11pm"
				);
				
										  echo'<select name="time_ampm[]" class="validate[required]">';
										  echo'<option value="">Select One</option>';
   foreach($time_list as $time_ampm){

    echo'<option value="'.$time_ampm.'">'.$time_ampm.'</option>';

}

echo'</select>';
					
					?></td>
				</tr>
				
								<tr>
					<td><b>Departure</b></td>
					<td></td>
					<td><b>Destination 1</b></td>
					<td></td>
				</tr>
				<tr>
					<td><?php
					
					   	$con = mysql_connect("localhost","root","pass");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db('flight_track');

 
 $query_loc = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());
 $query_loc_two = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());

					?>
<b>Frequently Used:</b>
					</td>
					<td>
												<select id="location_departure1" name="location_departure[]" class="searchfield_sup" onChange=filltext('departure','1');>
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc, MYSQL_ASSOC))
{
  $location_departure = htmlentities($data['name']);
  echo '<option value="'.$location_departure.'">'.$location_departure."</option>\n";
}
?>
</select>
					</td>
					<td>
<b>Frequently Used:</b>
					</td>
					<td>
																	<select id="location_destination1" name="location_destination[]" class="searchfield_sup" onChange=filltext('destination','1');>
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc_two, MYSQL_ASSOC))
{
  $location_destination = htmlentities($data['name']);
  echo '<option value="'.$location_destination.'">'.$location_destination."</option>\n";
}
?>
</select>
					</td>
				</tr>
				<tr>
					<td><b>City:</b></td>
					<td><input class="validate[required] text-input" type="text" name="departure_city[]" id="departure_city1"></td>
					<td><b>City:</b></td>
					<td><input class="validate[required] text-input" type="text" name="arrival_city[]" id="destination_city1"></td>
				</tr>
				<?php
				$state_list = array(
				'AB'=>"Canada - Alberta",
				'BC'=>"Canada - British Columbia",
				'MB'=>"Canada - Manitoba",
				'NB'=>"Canada - New Brunswick",
				'NL'=>"Canada - Newfoundland and Labrador",
				'NT'=>"Canada - Northwest Territory",
				'NS'=>"Canada - Nova Scotia",
				'NU'=>"Canada - Nunavut",
				'ON'=>"Canada - Ontario",
				'PE'=>"Canada - Prince Edward Island",
				'QC'=>"Canada - Quebec",
				'SK'=>"Canada - Saskatchewan",
				'YT'=>"Canada - Yukon",
				'PR'=>"Puerto Rico",
				'MX'=>"Mexico",
				'AL'=>"Alabama",
                'AK'=>"Alaska",  
                'AZ'=>"Arizona",  
                'AR'=>"Arkansas",  
                'CA'=>"California",  
                'CO'=>"Colorado",  
                'CT'=>"Connecticut",  
                'DE'=>"Delaware",  
                'DC'=>"District Of Columbia",  
                'FL'=>"Florida",  
                'GA'=>"Georgia",  
                'HI'=>"Hawaii",  
                'ID'=>"Idaho",  
                'IL'=>"Illinois",  
                'IN'=>"Indiana",  
                'IA'=>"Iowa",  
                'KS'=>"Kansas",  
                'KY'=>"Kentucky",  
                'LA'=>"Louisiana",  
                'ME'=>"Maine",  
                'MD'=>"Maryland",  
                'MA'=>"Massachusetts",  
                'MI'=>"Michigan",  
                'MN'=>"Minnesota",  
                'MS'=>"Mississippi",  
                'MO'=>"Missouri",  
                'MT'=>"Montana",
                'NE'=>"Nebraska",
                'NV'=>"Nevada",
                'NH'=>"New Hampshire",
                'NJ'=>"New Jersey",
                'NM'=>"New Mexico",
                'NY'=>"New York",
                'NC'=>"North Carolina",
                'ND'=>"North Dakota",
                'OH'=>"Ohio",  
                'OK'=>"Oklahoma",  
                'OR'=>"Oregon",  
                'PA'=>"Pennsylvania",  
                'RI'=>"Rhode Island",  
                'SC'=>"South Carolina",  
                'SD'=>"South Dakota",
                'TN'=>"Tennessee",  
                'TX'=>"Texas",  
                'UT'=>"Utah",  
                'VT'=>"Vermont",  
                'VA'=>"Virginia",  
                'WA'=>"Washington",  
                'WV'=>"West Virginia",  
                'WI'=>"Wisconsin",  
                'WY'=>"Wyoming"
				);
				?>
				<tr>
					<td><b>State:</b></td>
					<td>
					<input id="departure_state1" class="validate[required]" type="text" name="departure_state[]">
					</td>
					<td><b>State:</b></td>
					<td>
					<input id="destination_state1" class="validate[required]" type="text" name="arrival_state[]">
					
</td>
				</tr>
				<tr>
					<td><b>Zip Code:</b></td>
					<td><input id="departure_zip1" class="validate[required]" type="text" name="departure_zipcode[]"></td>
					<td><b>Zip Code:</b></td>
					<td><input id="destination_zip1" class="validate[required]" type="text" name="arrival_zipcode[]"></td>
				</tr>

			</table>
			
						</TD>
			</TR>
			</table>
			<INPUT type="button" value="Add Leg" onclick="addRow('dataTrack')"/><br>
		

			</form>
			<input class="submit" type="submit" value="Submit"/>
</td>

</tr>
</table>

</body>
</html>

Open in new window

0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
change line 74 to:
updateElementId(tableID, page_counter, element)

Open in new window


change updateElementId function to:
function updateElementId(tableID, pagecounter, elementName){
      var element = $("#"+tableID).find('#'+elementName+pagecounter);
      element.attr("id",elementName+(pagecounter+1).toString());
}

Open in new window

0
 

Author Comment

by:ats2012
Comment Utility
Here are the ID's after the change.
Ids-After-change.png
0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
set page_counter variable to 2,
1 is taken when you call fillText the first time (see line 206)
0
 

Author Comment

by:ats2012
Comment Utility
None of the ID's are getting changed.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:ats2012
Comment Utility
Here is the new code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
error_reporting(E_ALL);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="css/template.css" type="text/css"/>

<script src="scripts/gen_validatorv4.js" type="text/javascript"></script>
<script src="scripts/tablefilter_all_min.js" language="javascript" type="text/javascript"></script>

	<link rel="stylesheet" href="scripts/date_picker/jquery.ui.all.css">
	<script src="scripts/date_picker/jquery-1.8.0.js"></script>
	<script src="scripts/date_picker/jquery.ui.core.js"></script>
	<script src="scripts/date_picker/jquery.ui.widget.js"></script>
	<script src="scripts/date_picker/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="scripts/date_picker/date.css">
	
	<script src="scripts/validate/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
	</script>
	<script src="scripts/validate/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
	</script>

<SCRIPT language="javascript">

var pagecounter = 2;

function filltext(target, index)
{
 var e = document.getElementById("location_"+target+index);
 var group = e.options[e.selectedIndex].text;
var tokens =  $.trim(group).split(', ');
document.getElementById(target+"_city"+index).value= tokens[0];
var state_zip = tokens[1].split(' ');
document.getElementById(target+"_state"+index).value= state_zip[0];
document.getElementById(target+"_zip"+index).value= state_zip[1];
}

		jQuery(document).ready(function(){
			// binds form submission and fields to the validation engine
			jQuery("#request").validationEngine('attach');

			$("#request").bind("jqv.form.validating", function(event){
				$("#hookError").html("")
			})

			$("#request").bind("jqv.form.result", function(event , errorFound){
				if(errorFound) $("#hookError").append("There is some problems with your form");
			})
		});
		
		
function updateElementId(tableID, pagecounter, elementName){
      var element = $("#"+tableID).find('#'+elementName+pagecounter);
      element.attr("id",elementName+(pagecounter+1).toString());
}

function addRow(tableID) {

        var table = $("#"+tableID);
        var rowCount = $(">tbody>tr", table).length;
		if(rowCount>=7){
		alert("Can't have more than 7 rows.");
		return;
		}
        var row = $(">tbody>tr:last", table).clone().appendTo(table);
        $(":text", row).val("");
	
var arrElements =['departure','departure_city','departure_zip','location_departure','location_destination','departure_state','destination_zip'];

$.each(arrElements, function(index, element) {
  updateElementId(tableID, page_counter, element)
});
	$(":text[id^=datepicker]", row).removeClass("datepicker hasDatepicker").attr({id: "datepicker"+rowCount, value:""}).datepicker();
	
	pagecounter++;
}

	window.onload = function() {
    $("[id=datepicker]").datepicker();
        }
    </SCRIPT>
	
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>ATS Flight Track</title>
</head>
<body>

<form action="book_flight_form.php" method="post" id="request">
<table border="0" width="1000">

<tr>


<td width="1700" valign="top">

			
			<b><img src='images/plane.png' width='50' height='50' align='middle'/> Flight Information</b>
			
			<table id="dataTrack">
			<TR>
			<TD>
			<table width="700" border="0" class="searchform">

				<tr>
					<td><b>Leg 1</b></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td><b>Date:</b></td>
					<td><input type="text" name="departure_date[]" id="datepicker" class="validate[required] text-input"></td>
					<td></td>
					<td></td>
				</tr>
<?php
				$time_list = array(
				"Departure Time:",
                "Arrival Time:");
				?>
				<tr>
					<td colspan="3"><b>Departure/Arrival Schedule Priority: </b><?php
					  echo'<select name="time_state[]" class="validate[required]">';
					  echo'<option value="">Select One</option>';
   foreach($time_list as $time_state){

    echo'<option value="'.$time_state.'">'.$time_state.'</option>';

}

echo'</select>';


					?></td>
					<td><b>Time: </b><?php
					
$time_list = array(
				"12am",
				"1am",
                "2am",
				"3am",
				"4am",
				"5am",
				"6am",
				"7am",
				"8am",
				"9am",
				"10am",
				"11am",
				"12pm",
				"1pm",
				"2pm",
				"3pm",
				"4pm",
				"5pm",
				"6pm",
				"7pm",
				"8pm",
				"9pm",
				"10pm",
				"11pm"
				);
				
										  echo'<select name="time_ampm[]" class="validate[required]">';
										  echo'<option value="">Select One</option>';
   foreach($time_list as $time_ampm){

    echo'<option value="'.$time_ampm.'">'.$time_ampm.'</option>';

}

echo'</select>';
					
					?></td>
				</tr>
				
								<tr>
					<td><b>Departure</b></td>
					<td></td>
					<td><b>Destination 1</b></td>
					<td></td>
				</tr>
				<tr>
					<td><?php
					
					   	$con = mysql_connect("localhost","root","w0rmh0l3");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db('flight_track');

 
 $query_loc = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());
 $query_loc_two = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());

					?>
<b>Frequently Used:</b>
					</td>
					<td>
												<select id="location_departure1" name="location_departure[]" class="searchfield_sup" onChange=filltext('departure','1');>
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc, MYSQL_ASSOC))
{
  $location_departure = htmlentities($data['name']);
  echo '<option value="'.$location_departure.'">'.$location_departure."</option>\n";
}
?>
</select>
					</td>
					<td>
<b>Frequently Used:</b>
					</td>
					<td>
																	<select id="location_destination1" name="location_destination[]" class="searchfield_sup" onChange=filltext('destination','1');>
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc_two, MYSQL_ASSOC))
{
  $location_destination = htmlentities($data['name']);
  echo '<option value="'.$location_destination.'">'.$location_destination."</option>\n";
}
?>
</select>
					</td>
				</tr>
				<tr>
					<td><b>City:</b></td>
					<td><input class="validate[required] text-input" type="text" name="departure_city[]" id="departure_city1"></td>
					<td><b>City:</b></td>
					<td><input class="validate[required] text-input" type="text" name="arrival_city[]" id="destination_city1"></td>
				</tr>
				<?php
				$state_list = array(
				'AB'=>"Canada - Alberta",
				'BC'=>"Canada - British Columbia",
				'MB'=>"Canada - Manitoba",
				'NB'=>"Canada - New Brunswick",
				'NL'=>"Canada - Newfoundland and Labrador",
				'NT'=>"Canada - Northwest Territory",
				'NS'=>"Canada - Nova Scotia",
				'NU'=>"Canada - Nunavut",
				'ON'=>"Canada - Ontario",
				'PE'=>"Canada - Prince Edward Island",
				'QC'=>"Canada - Quebec",
				'SK'=>"Canada - Saskatchewan",
				'YT'=>"Canada - Yukon",
				'PR'=>"Puerto Rico",
				'MX'=>"Mexico",
				'AL'=>"Alabama",
                'AK'=>"Alaska",  
                'AZ'=>"Arizona",  
                'AR'=>"Arkansas",  
                'CA'=>"California",  
                'CO'=>"Colorado",  
                'CT'=>"Connecticut",  
                'DE'=>"Delaware",  
                'DC'=>"District Of Columbia",  
                'FL'=>"Florida",  
                'GA'=>"Georgia",  
                'HI'=>"Hawaii",  
                'ID'=>"Idaho",  
                'IL'=>"Illinois",  
                'IN'=>"Indiana",  
                'IA'=>"Iowa",  
                'KS'=>"Kansas",  
                'KY'=>"Kentucky",  
                'LA'=>"Louisiana",  
                'ME'=>"Maine",  
                'MD'=>"Maryland",  
                'MA'=>"Massachusetts",  
                'MI'=>"Michigan",  
                'MN'=>"Minnesota",  
                'MS'=>"Mississippi",  
                'MO'=>"Missouri",  
                'MT'=>"Montana",
                'NE'=>"Nebraska",
                'NV'=>"Nevada",
                'NH'=>"New Hampshire",
                'NJ'=>"New Jersey",
                'NM'=>"New Mexico",
                'NY'=>"New York",
                'NC'=>"North Carolina",
                'ND'=>"North Dakota",
                'OH'=>"Ohio",  
                'OK'=>"Oklahoma",  
                'OR'=>"Oregon",  
                'PA'=>"Pennsylvania",  
                'RI'=>"Rhode Island",  
                'SC'=>"South Carolina",  
                'SD'=>"South Dakota",
                'TN'=>"Tennessee",  
                'TX'=>"Texas",  
                'UT'=>"Utah",  
                'VT'=>"Vermont",  
                'VA'=>"Virginia",  
                'WA'=>"Washington",  
                'WV'=>"West Virginia",  
                'WI'=>"Wisconsin",  
                'WY'=>"Wyoming"
				);
				?>
				<tr>
					<td><b>State:</b></td>
					<td>
					<input id="departure_state1" class="validate[required]" type="text" name="departure_state[]">
					</td>
					<td><b>State:</b></td>
					<td>
					<input id="destination_state1" class="validate[required]" type="text" name="arrival_state[]">
					
</td>
				</tr>
				<tr>
					<td><b>Zip Code:</b></td>
					<td><input id="departure_zip1" class="validate[required]" type="text" name="departure_zipcode[]"></td>
					<td><b>Zip Code:</b></td>
					<td><input id="destination_zip1" class="validate[required]" type="text" name="arrival_zipcode[]"></td>
				</tr>

			</table>
			
						</TD>
			</TR>
			</table>
			<INPUT type="button" value="Add Leg" onclick="addRow('dataTrack')"/><br>
		

			</form>
			<input class="submit" type="submit" value="Submit"/>
</td>

</tr>
</table>

</body>
</html>

Open in new window

0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
you have hard coded elements with id such as location_destination1 and departure_city1.
also your filltext function always get 1 as index, cause the function is called:
onChange=filltext('destination','1');>

does filltext works for all Legs created?

also Legs has the same number (1), that should also be changed according to page_number variable.
0
 

Author Comment

by:ats2012
Comment Utility
How it worked before is Leg and Destination were changed by the ID of the table and onChange=filltext('destination','1');> got incremented also by the tableID
0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
i think i got it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
error_reporting(E_ALL);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="css/template.css" type="text/css"/>

<script src="scripts/gen_validatorv4.js" type="text/javascript"></script>
<script src="scripts/tablefilter_all_min.js" language="javascript" type="text/javascript"></script>

	<link rel="stylesheet" href="scripts/date_picker/jquery.ui.all.css">
	<script src="scripts/date_picker/jquery-1.8.0.js"></script>
	<script src="scripts/date_picker/jquery.ui.core.js"></script>
	<script src="scripts/date_picker/jquery.ui.widget.js"></script>
	<script src="scripts/date_picker/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="scripts/date_picker/date.css">
	
	<script src="scripts/validate/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
	</script>
	<script src="scripts/validate/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
	</script>

<SCRIPT language="javascript">

function filltext(target)
{
	var table = $('#dataTrack');
	var index = $(">tbody>tr", table).length;
	var e = $('#location_'+target+index);
	var group = e.options[e.selectedIndex].text;
	var tokens =  $.trim(group).split(', ');
	$('#'+target+'_city'+index).value = tokens[0];
	var state_zip = tokens[1].split(' ');
	$('#'+target+'_state'+index).value = state_zip[0];
	$('#'+target+'_zip'+index).value = state_zip[1];
}

jQuery(document).ready(function(){
	// binds form submission and fields to the validation engine
	jQuery("#request").validationEngine('attach');

	$("#request").bind("jqv.form.validating", function(event){
		$("#hookError").html("")
	})

	$("#request").bind("jqv.form.result", function(event , errorFound){
		if(errorFound) $("#hookError").append("There is some problems with your form");
	})
});
		
		
function updateElementId(pagecounter, elementName){
    var element = $('#'+elementName+pagecounter);
    element.attr("id",elementName+(pagecounter+1).toString());
}

function addRow() {

	var me = this;
	var table = $('#dataTrack');
	var rowCount = $(">tbody>tr", table).length;
	if(rowCount >= 7){
		alert("Can't have more than 7 rows.");
		return;
	}
	var row = $(">tbody>tr:last", table).clone().appendTo(table);
	$(":text", row).val("");
	
	var arrElements =['departure','departure_city','departure_zip','location_departure','location_destination','departure_state','destination_zip'];
	
	$.each(arrElements, function(index, element) {
		updateElementId(me.rowCount, element)
	});
	
	$(":text[id^=datepicker]", row).removeClass("datepicker hasDatepicker").attr({id: "datepicker"+rowCount, value:""}).datepicker();
	
	pagecounter++;
}

window.onload = function() {
	$("[id=datepicker]").datepicker();
}

</SCRIPT>
	
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>ATS Flight Track</title>
</head>
<body>

<form action="book_flight_form.php" method="post" id="request">
<table border="0" width="1000">

<tr>


<td width="1700" valign="top">

			
			<b><img src='images/plane.png' width='50' height='50' align='middle'/> Flight Information</b>
			
			<table id="dataTrack">
			<TR>
			<TD>
			<table width="700" border="0" class="searchform">

				<tr>
					<td><b>Leg 1</b></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td><b>Date:</b></td>
					<td><input type="text" name="departure_date[]" id="datepicker" class="validate[required] text-input"></td>
					<td></td>
					<td></td>
				</tr>
<?php
				$time_list = array(
				"Departure Time:",
                "Arrival Time:");
				?>
				<tr>
					<td colspan="3"><b>Departure/Arrival Schedule Priority: </b><?php
					  echo'<select name="time_state[]" class="validate[required]">';
					  echo'<option value="">Select One</option>';
   foreach($time_list as $time_state){

    echo'<option value="'.$time_state.'">'.$time_state.'</option>';

}

echo'</select>';


					?></td>
					<td><b>Time: </b><?php
					
$time_list = array(
				"12am",
				"1am",
                "2am",
				"3am",
				"4am",
				"5am",
				"6am",
				"7am",
				"8am",
				"9am",
				"10am",
				"11am",
				"12pm",
				"1pm",
				"2pm",
				"3pm",
				"4pm",
				"5pm",
				"6pm",
				"7pm",
				"8pm",
				"9pm",
				"10pm",
				"11pm"
				);
				
	echo'<select name="time_ampm[]" class="validate[required]">';
	echo'<option value="">Select One</option>';
   
foreach($time_list as $time_ampm){
	echo'<option value="'.$time_ampm.'">'.$time_ampm.'</option>';
}

echo'</select>';
					
					?></td>
				</tr>
				
								<tr>
					<td><b>Departure</b></td>
					<td></td>
					<td><b>Destination 1</b></td>
					<td></td>
				</tr>
				<tr>
					<td><?php
					
					   	$con = mysql_connect("localhost","root","w0rmh0l3");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db('flight_track');

 
 $query_loc = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());
 $query_loc_two = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());

					?>
<b>Frequently Used:</b>
					</td>
					<td>
<select id="location_departure1" name="location_departure[]" class="searchfield_sup" onChange=filltext('departure');>
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc, MYSQL_ASSOC))
{
  $location_departure = htmlentities($data['name']);
  echo '<option value="'.$location_departure.'">'.$location_departure."</option>\n";
}
?>
</select>
					</td>
					<td>
<b>Frequently Used:</b>
					</td>
					<td>
<select id="location_destination1" name="location_destination[]" class="searchfield_sup" onChange=filltext('destination');>
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc_two, MYSQL_ASSOC))
{
  $location_destination = htmlentities($data['name']);
  echo '<option value="'.$location_destination.'">'.$location_destination."</option>\n";
}
?>
</select>
					</td>
				</tr>
				<tr>
					<td><b>City:</b></td>
					<td><input class="validate[required] text-input" type="text" name="departure_city[]" id="departure_city1"></td>
					<td><b>City:</b></td>
					<td><input class="validate[required] text-input" type="text" name="arrival_city[]" id="destination_city1"></td>
				</tr>
				<?php
				$state_list = array(
				'AB'=>"Canada - Alberta",
				'BC'=>"Canada - British Columbia",
				'MB'=>"Canada - Manitoba",
				'NB'=>"Canada - New Brunswick",
				'NL'=>"Canada - Newfoundland and Labrador",
				'NT'=>"Canada - Northwest Territory",
				'NS'=>"Canada - Nova Scotia",
				'NU'=>"Canada - Nunavut",
				'ON'=>"Canada - Ontario",
				'PE'=>"Canada - Prince Edward Island",
				'QC'=>"Canada - Quebec",
				'SK'=>"Canada - Saskatchewan",
				'YT'=>"Canada - Yukon",
				'PR'=>"Puerto Rico",
				'MX'=>"Mexico",
				'AL'=>"Alabama",
                'AK'=>"Alaska",  
                'AZ'=>"Arizona",  
                'AR'=>"Arkansas",  
                'CA'=>"California",  
                'CO'=>"Colorado",  
                'CT'=>"Connecticut",  
                'DE'=>"Delaware",  
                'DC'=>"District Of Columbia",  
                'FL'=>"Florida",  
                'GA'=>"Georgia",  
                'HI'=>"Hawaii",  
                'ID'=>"Idaho",  
                'IL'=>"Illinois",  
                'IN'=>"Indiana",  
                'IA'=>"Iowa",  
                'KS'=>"Kansas",  
                'KY'=>"Kentucky",  
                'LA'=>"Louisiana",  
                'ME'=>"Maine",  
                'MD'=>"Maryland",  
                'MA'=>"Massachusetts",  
                'MI'=>"Michigan",  
                'MN'=>"Minnesota",  
                'MS'=>"Mississippi",  
                'MO'=>"Missouri",  
                'MT'=>"Montana",
                'NE'=>"Nebraska",
                'NV'=>"Nevada",
                'NH'=>"New Hampshire",
                'NJ'=>"New Jersey",
                'NM'=>"New Mexico",
                'NY'=>"New York",
                'NC'=>"North Carolina",
                'ND'=>"North Dakota",
                'OH'=>"Ohio",  
                'OK'=>"Oklahoma",  
                'OR'=>"Oregon",  
                'PA'=>"Pennsylvania",  
                'RI'=>"Rhode Island",  
                'SC'=>"South Carolina",  
                'SD'=>"South Dakota",
                'TN'=>"Tennessee",  
                'TX'=>"Texas",  
                'UT'=>"Utah",  
                'VT'=>"Vermont",  
                'VA'=>"Virginia",  
                'WA'=>"Washington",  
                'WV'=>"West Virginia",  
                'WI'=>"Wisconsin",  
                'WY'=>"Wyoming"
				);
				?>
				<tr>
					<td><b>State:</b></td>
					<td>
					<input id="departure_state1" class="validate[required]" type="text" name="departure_state[]">
					</td>
					<td><b>State:</b></td>
					<td>
					<input id="destination_state1" class="validate[required]" type="text" name="arrival_state[]">
					
</td>
				</tr>
				<tr>
					<td><b>Zip Code:</b></td>
					<td><input id="departure_zip1" class="validate[required]" type="text" name="departure_zipcode[]"></td>
					<td><b>Zip Code:</b></td>
					<td><input id="destination_zip1" class="validate[required]" type="text" name="arrival_zipcode[]"></td>
				</tr>

			</table>
			
						</TD>
			</TR>
			</table>
			<INPUT type="button" value="Add Leg" onclick="addRow()"/><br>
		

			</form>
			<input class="submit" type="submit" value="Submit"/>
</td>

</tr>
</table>

</body>
</html>

Open in new window

0
 

Author Comment

by:ats2012
Comment Utility
When I choose something from the drop down its not putting the information into the fields and when you add a leg its not incremeting the numbers. Thank you for your help on this so far. I am so lost when it comes to JavaScript and jQuery. I attached a screenshot of what i am seeing wit the ID's of each field.
form-new.png
0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
thats fine mate, i was there too, takes some time but you gonna get it.
i see that 1st leg ids are correct (1) but the filltext is not doing itsjob.

i see i made a mistake whenever i try to set the value, so instead of all instances of:
$(#...).Value = some-value

change it to:
$(#...).val(some-value)

for instance in filltext:
instead of
$('#'+target+'_city'+index).value = tokens[0];

Open in new window


use:
$('#'+target+'_city'+index).val(tokens[0]);

Open in new window


do it to all instances as explained above.
0
 

Author Comment

by:ats2012
Comment Utility
Like this?

function filltext(target)
{
	var table = $('#dataTrack');
	var index = $(">tbody>tr", table).length;
	var e = $('#location_'+target+index);
	var group = e.options[e.selectedIndex].text;
	var tokens =  $.trim(group).split(', ');
	$('#'+target+'_city'+index).val(tokens[0]);
	var state_zip = tokens[1].split(' ');
	$('#'+target+'_state'+index).val(state_zip[0]);
	$('#'+target+'_zip'+index).val(state_zip[1]);
}

Open in new window

0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
i think i managed to fix both issues:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
error_reporting(E_ALL);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="css/template.css" type="text/css"/>

<script src="scripts/gen_validatorv4.js" type="text/javascript"></script>
<script src="scripts/tablefilter_all_min.js" language="javascript" type="text/javascript"></script>

	<link rel="stylesheet" href="scripts/date_picker/jquery.ui.all.css">
	<script src="scripts/date_picker/jquery-1.8.0.js"></script>
	<script src="scripts/date_picker/jquery.ui.core.js"></script>
	<script src="scripts/date_picker/jquery.ui.widget.js"></script>
	<script src="scripts/date_picker/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="scripts/date_picker/date.css">
	
	<script src="scripts/validate/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
	</script>
	<script src="scripts/validate/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
	</script>

<SCRIPT language="javascript">

function filltext(target)
{
	var table = $('#dataTrack');
	var index = $(">tbody>tr", table).length;
	var e = $('#location_'+target+index);
	var group = e.options[e.selectedIndex].text;
	var tokens =  $.trim(group).split(', ');
	$('#'+target+'_city'+index).val(tokens[0]);
	var state_zip = tokens[1].split(' ');
	$('#'+target+'_state'+index).val(state_zip[0]);
	$('#'+target+'_zip'+index).val(state_zip[1]);
}

jQuery(document).ready(function(){
	// binds form submission and fields to the validation engine
	jQuery("#request").validationEngine('attach');

	$("#request").bind("jqv.form.validating", function(event){
		$("#hookError").html("")
	})

	$("#request").bind("jqv.form.result", function(event , errorFound){
		if(errorFound) $("#hookError").append("There is some problems with your form");
	})
});
		
		
function updateElementId(row, pagecounter, elementName){
    var element = row.find('#'+elementName+pagecounter);
    element.attr("id",elementName+(pagecounter+1).toString());
}

function addRow() {

	var me = this;
	var table = $('#dataTrack');
	var rowCount = $(">tbody>tr", table).length;
	if(rowCount >= 7){
		alert("Can't have more than 7 rows.");
		return;
	}
	var row = $(">tbody>tr:last", table).clone().appendTo(table);
	$(":text", row).val("");
	
	var arrElements =['departure','departure_city','departure_zip','location_departure','location_destination','departure_state','destination_zip'];
	
	$.each(arrElements, function(index, element) {
		updateElementId(me.row, me.rowCount, element)
	});
	
	$(":text[id^=datepicker]", row).removeClass("datepicker hasDatepicker").attr({id: "datepicker"+rowCount, value:""}).datepicker();
	
	pagecounter++;
}

window.onload = function() {
	$("[id=datepicker]").datepicker();
}

</SCRIPT>
	
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>ATS Flight Track</title>
</head>
<body>

<form action="book_flight_form.php" method="post" id="request">
<table border="0" width="1000">

<tr>


<td width="1700" valign="top">

			
			<b><img src='images/plane.png' width='50' height='50' align='middle'/> Flight Information</b>
			
			<table id="dataTrack">
			<TR>
			<TD>
			<table width="700" border="0" class="searchform">

				<tr>
					<td><b>Leg 1</b></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td><b>Date:</b></td>
					<td><input type="text" name="departure_date[]" id="datepicker" class="validate[required] text-input"></td>
					<td></td>
					<td></td>
				</tr>
<?php
				$time_list = array(
				"Departure Time:",
                "Arrival Time:");
				?>
				<tr>
					<td colspan="3"><b>Departure/Arrival Schedule Priority: </b><?php
					  echo'<select name="time_state[]" class="validate[required]">';
					  echo'<option value="">Select One</option>';
   foreach($time_list as $time_state){

    echo'<option value="'.$time_state.'">'.$time_state.'</option>';

}

echo'</select>';


					?></td>
					<td><b>Time: </b><?php
					
$time_list = array(
				"12am",
				"1am",
                "2am",
				"3am",
				"4am",
				"5am",
				"6am",
				"7am",
				"8am",
				"9am",
				"10am",
				"11am",
				"12pm",
				"1pm",
				"2pm",
				"3pm",
				"4pm",
				"5pm",
				"6pm",
				"7pm",
				"8pm",
				"9pm",
				"10pm",
				"11pm"
				);
				
	echo'<select name="time_ampm[]" class="validate[required]">';
	echo'<option value="">Select One</option>';
   
foreach($time_list as $time_ampm){
	echo'<option value="'.$time_ampm.'">'.$time_ampm.'</option>';
}

echo'</select>';
					
					?></td>
				</tr>
				
								<tr>
					<td><b>Departure</b></td>
					<td></td>
					<td><b>Destination 1</b></td>
					<td></td>
				</tr>
				<tr>
					<td><?php
					
					   	$con = mysql_connect("localhost","root","w0rmh0l3");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db('flight_track');

 
 $query_loc = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());
 $query_loc_two = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());

					?>
<b>Frequently Used:</b>
					</td>
					<td>
<select id="location_departure1" name="location_departure[]" class="searchfield_sup" onChange=filltext('departure');>
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc, MYSQL_ASSOC))
{
  $location_departure = htmlentities($data['name']);
  echo '<option value="'.$location_departure.'">'.$location_departure."</option>\n";
}
?>
</select>
					</td>
					<td>
<b>Frequently Used:</b>
					</td>
					<td>
<select id="location_destination1" name="location_destination[]" class="searchfield_sup" onChange=filltext('destination');>
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc_two, MYSQL_ASSOC))
{
  $location_destination = htmlentities($data['name']);
  echo '<option value="'.$location_destination.'">'.$location_destination."</option>\n";
}
?>
</select>
					</td>
				</tr>
				<tr>
					<td><b>City:</b></td>
					<td><input class="validate[required] text-input" type="text" name="departure_city[]" id="departure_city1"></td>
					<td><b>City:</b></td>
					<td><input class="validate[required] text-input" type="text" name="arrival_city[]" id="destination_city1"></td>
				</tr>
				<?php
				$state_list = array(
				'AB'=>"Canada - Alberta",
				'BC'=>"Canada - British Columbia",
				'MB'=>"Canada - Manitoba",
				'NB'=>"Canada - New Brunswick",
				'NL'=>"Canada - Newfoundland and Labrador",
				'NT'=>"Canada - Northwest Territory",
				'NS'=>"Canada - Nova Scotia",
				'NU'=>"Canada - Nunavut",
				'ON'=>"Canada - Ontario",
				'PE'=>"Canada - Prince Edward Island",
				'QC'=>"Canada - Quebec",
				'SK'=>"Canada - Saskatchewan",
				'YT'=>"Canada - Yukon",
				'PR'=>"Puerto Rico",
				'MX'=>"Mexico",
				'AL'=>"Alabama",
                'AK'=>"Alaska",  
                'AZ'=>"Arizona",  
                'AR'=>"Arkansas",  
                'CA'=>"California",  
                'CO'=>"Colorado",  
                'CT'=>"Connecticut",  
                'DE'=>"Delaware",  
                'DC'=>"District Of Columbia",  
                'FL'=>"Florida",  
                'GA'=>"Georgia",  
                'HI'=>"Hawaii",  
                'ID'=>"Idaho",  
                'IL'=>"Illinois",  
                'IN'=>"Indiana",  
                'IA'=>"Iowa",  
                'KS'=>"Kansas",  
                'KY'=>"Kentucky",  
                'LA'=>"Louisiana",  
                'ME'=>"Maine",  
                'MD'=>"Maryland",  
                'MA'=>"Massachusetts",  
                'MI'=>"Michigan",  
                'MN'=>"Minnesota",  
                'MS'=>"Mississippi",  
                'MO'=>"Missouri",  
                'MT'=>"Montana",
                'NE'=>"Nebraska",
                'NV'=>"Nevada",
                'NH'=>"New Hampshire",
                'NJ'=>"New Jersey",
                'NM'=>"New Mexico",
                'NY'=>"New York",
                'NC'=>"North Carolina",
                'ND'=>"North Dakota",
                'OH'=>"Ohio",  
                'OK'=>"Oklahoma",  
                'OR'=>"Oregon",  
                'PA'=>"Pennsylvania",  
                'RI'=>"Rhode Island",  
                'SC'=>"South Carolina",  
                'SD'=>"South Dakota",
                'TN'=>"Tennessee",  
                'TX'=>"Texas",  
                'UT'=>"Utah",  
                'VT'=>"Vermont",  
                'VA'=>"Virginia",  
                'WA'=>"Washington",  
                'WV'=>"West Virginia",  
                'WI'=>"Wisconsin",  
                'WY'=>"Wyoming"
				);
				?>
				<tr>
					<td><b>State:</b></td>
					<td>
					<input id="departure_state1" class="validate[required]" type="text" name="departure_state[]">
					</td>
					<td><b>State:</b></td>
					<td>
					<input id="destination_state1" class="validate[required]" type="text" name="arrival_state[]">
					
</td>
				</tr>
				<tr>
					<td><b>Zip Code:</b></td>
					<td><input id="departure_zip1" class="validate[required]" type="text" name="departure_zipcode[]"></td>
					<td><b>Zip Code:</b></td>
					<td><input id="destination_zip1" class="validate[required]" type="text" name="arrival_zipcode[]"></td>
				</tr>

			</table>
			
						</TD>
			</TR>
			</table>
			<INPUT type="button" value="Add Leg" onclick="addRow()"/><br>
		

			</form>
			<input class="submit" type="submit" value="Submit"/>
</td>

</tr>
</table>

</body>
</html>

Open in new window

0
 

Author Comment

by:ats2012
Comment Utility
I get the same as above. When I select from the drop down its not putting anything in the fields and for some reason it isn't incrementing the values.
0
 

Author Comment

by:ats2012
Comment Utility
I converted it into jsFiddle. Not sure if I did it right though.

http://jsfiddle.net/rqrXf/
0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
put breakpoint in filltext, what is the value of index?
do u get any JS errors?
0
 

Author Comment

by:ats2012
Comment Utility
Here is the error

Uncaught TypeError: Cannot read property 'undefined' of undefined
filltext
onchange


var group = e.options[e.selectedIndex].text;

<select id="location_destination1" name="location_destination[]" class="searchfield_sup" onChange=filltext('destination');>
0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
which means that line 32 returns undefined.
can u check what is the value of index line 31?
0
 

Author Comment

by:ats2012
Comment Utility
[Exception: ReferenceError: index is not defined]
0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
line 30 - does table is undefined?
0
 

Author Comment

by:ats2012
Comment Utility
This what you are looking for?

table : [Exception: ReferenceError: table is not defined]
0
 

Author Comment

by:ats2012
Comment Utility
Also getting this error when I add a leg

Uncaught TypeError: Cannot call method 'find' of undefined book_flight_form.php:53
updateElementId book_flight_form.php:53
(anonymous function) book_flight_form.php:72
jQuery.extend.each jquery-1.8.0.js:611
addRow book_flight_form.php:71
onclick


53
var element = row.find('#'+elementName+pagecounter);

72
updateElementId(me.row, me.rowCount, element)
0
 

Author Comment

by:ats2012
Comment Utility
Here is all the code I am working with if its easier.
flight-track.zip
0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
ok, i was able to debug the code.

change the filltext function to this:

function filltext(target){
var table = $('#dataTrack');
		var index = $(">tbody>tr", table).length;
		var e = $('#location_'+target+index);
		var tokens =  $.trim(e.val()).split(', ');
		$('#'+target+'_city'+index).val(tokens[0]);
		var state_zip = tokens[1].split(' ');
		$('#'+target+'_state'+index).val(state_zip[0]);
		$('#'+target+'_zip'+index).val(state_zip[1]);
}

Open in new window

Untitled.png
0
 
LVL 42

Assisted Solution

by:sedgwick
sedgwick earned 500 total points
Comment Utility
i got everything working now:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
error_reporting(E_ALL);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="css/template.css" type="text/css"/>

<script src="scripts/gen_validatorv4.js" type="text/javascript"></script>
<script src="scripts/tablefilter_all_min.js" language="javascript" type="text/javascript"></script>

	<link rel="stylesheet" href="scripts/date_picker/jquery.ui.all.css">
	<script src="scripts/date_picker/jquery-1.8.0.js"></script>
	<script src="scripts/date_picker/jquery.ui.core.js"></script>
	<script src="scripts/date_picker/jquery.ui.widget.js"></script>
	<script src="scripts/date_picker/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="scripts/date_picker/date.css">
	
	<script src="scripts/validate/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
	</script>
	<script src="scripts/validate/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
	</script>

<SCRIPT language="javascript">

jQuery(document).ready(function(){
	// binds form submission and fields to the validation engine
	jQuery("#request").validationEngine('attach');

	$("#request").bind("jqv.form.validating", function(event){
		$("#hookError").html("")
	})

	$("#request").bind("jqv.form.result", function(event , errorFound){
		if(errorFound) $("#hookError").append("There is some problems with your form");
	})

});

function filltext(option)
{	
	var target = option.name.split('_')[1];
	var index = option.id[option.id.length-1];
	var table = $('#dataTrack');
	var val = option[option.selectedIndex].value;
	var tokens =  $.trim(val).split(', ');
	$('#'+target+'_city'+index).val(tokens[0]);
	var state_zip = tokens[1].split(' ');
	$('#'+target+'_state'+index).val(state_zip[0]);
	$('#'+target+'_zip'+index).val(state_zip[1]);
}	
	
function updateElementId(settings, elementName){
	var element = settings.row.find('#'+elementName+settings.counter);
	element.attr("id",elementName+(settings.counter+1).toString());
}

function addRow() {

	var me = this;
	var table = $('#dataTrack');
	var rowCount = $(">tbody>tr", table).length;
	if(rowCount >= 7){
		alert("Can't have more than 7 rows.");
		return;
	}
	var row = $(">tbody>tr:last", table).clone().appendTo(table);
	$(":text", row).val("");
	row.find('#leg').text("Leg " + (rowCount+1));
	
	var arrElements =['departure','departure_city','departure_zip','location_departure','location_destination','departure_state','destination_zip'];
	me.settings = {row: row, counter: rowCount};
	$.each(arrElements, function(index, element) {
		updateElementId(me.settings, element)
	});
	
	$(":text[id^=datepicker]", row).removeClass("datepicker hasDatepicker").attr({id: "datepicker"+rowCount, value:""}).datepicker();
}
	
window.onload = function() {
	$("[id=datepicker]").datepicker();
}

</SCRIPT>
	
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>ATS Flight Track</title>
</head>
<body>

<form action="book_flight_form.php" method="post" id="request">
<table border="0" width="1000">

<tr>


<td width="1700" valign="top">

			
			<b><img src='images/plane.png' width='50' height='50' align='middle'/> Flight Information</b>
			
			<table id="dataTrack">
			<TR>
			<TD>
			<table width="700" border="0" class="searchform">

				<tr>
					<td><h2><span id="leg">Leg 1</span></h2></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td><b>Date:</b></td>
					<td><input type="text" name="departure_date[]" id="datepicker" class="validate[required] text-input"></td>
					<td></td>
					<td></td>
				</tr>
<?php
				$time_list = array(
				"Departure Time:",
                "Arrival Time:");
				?>
				<tr>
					<td colspan="3"><b>Departure/Arrival Schedule Priority: </b><?php
					  echo'<select name="time_state[]" class="validate[required]">';
					  echo'<option value="">Select One</option>';
   foreach($time_list as $time_state){

    echo'<option value="'.$time_state.'">'.$time_state.'</option>';

}

echo'</select>';


					?></td>
					<td><b>Time: </b><?php
					
$time_list = array(
				"12am",
				"1am",
                "2am",
				"3am",
				"4am",
				"5am",
				"6am",
				"7am",
				"8am",
				"9am",
				"10am",
				"11am",
				"12pm",
				"1pm",
				"2pm",
				"3pm",
				"4pm",
				"5pm",
				"6pm",
				"7pm",
				"8pm",
				"9pm",
				"10pm",
				"11pm"
				);
				
	echo'<select name="time_ampm[]" class="validate[required]">';
	echo'<option value="">Select One</option>';
   
foreach($time_list as $time_ampm){
	echo'<option value="'.$time_ampm.'">'.$time_ampm.'</option>';
}

echo'</select>';
					
					?></td>
				</tr>
				
								<tr>
					<td><b>Departure</b></td>
					<td></td>
					<td><b>Destination 1</b></td>
					<td></td>
				</tr>
				<tr>
					<td><?php
					
					   	$con = mysql_connect("localhost","root","w0rmh0l3");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db('flight_track');

 
 $query_loc = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());
 $query_loc_two = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());

					?>
<b>Frequently Used:</b>
					</td>
					<td>
<select id="location_departure1" name="location_departure" class="searchfield_sup" onChange=filltext(this);>
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc, MYSQL_ASSOC))
{
  $location_departure = htmlentities($data['name']);
  echo '<option value="'.$location_departure.'">'.$location_departure."</option>\n";
}
?>
</select>
					</td>
					<td>
<b>Frequently Used:</b>
					</td>
					<td>
<select id="location_destination1" name="location_destination" class="searchfield_sup" onChange=filltext(this);>
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc_two, MYSQL_ASSOC))
{
  $location_destination = htmlentities($data['name']);
  echo '<option value="'.$location_destination.'">'.$location_destination."</option>\n";
}
?>
</select>
					</td>
				</tr>
				<tr>
					<td><b>City:</b></td>
					<td><input class="validate[required] text-input" type="text" name="departure_city[]" id="departure_city1"></td>
					<td><b>City:</b></td>
					<td><input class="validate[required] text-input" type="text" name="arrival_city[]" id="destination_city1"></td>
				</tr>
				<?php
				$state_list = array(
				'AB'=>"Canada - Alberta",
				'BC'=>"Canada - British Columbia",
				'MB'=>"Canada - Manitoba",
				'NB'=>"Canada - New Brunswick",
				'NL'=>"Canada - Newfoundland and Labrador",
				'NT'=>"Canada - Northwest Territory",
				'NS'=>"Canada - Nova Scotia",
				'NU'=>"Canada - Nunavut",
				'ON'=>"Canada - Ontario",
				'PE'=>"Canada - Prince Edward Island",
				'QC'=>"Canada - Quebec",
				'SK'=>"Canada - Saskatchewan",
				'YT'=>"Canada - Yukon",
				'PR'=>"Puerto Rico",
				'MX'=>"Mexico",
				'AL'=>"Alabama",
                'AK'=>"Alaska",  
                'AZ'=>"Arizona",  
                'AR'=>"Arkansas",  
                'CA'=>"California",  
                'CO'=>"Colorado",  
                'CT'=>"Connecticut",  
                'DE'=>"Delaware",  
                'DC'=>"District Of Columbia",  
                'FL'=>"Florida",  
                'GA'=>"Georgia",  
                'HI'=>"Hawaii",  
                'ID'=>"Idaho",  
                'IL'=>"Illinois",  
                'IN'=>"Indiana",  
                'IA'=>"Iowa",  
                'KS'=>"Kansas",  
                'KY'=>"Kentucky",  
                'LA'=>"Louisiana",  
                'ME'=>"Maine",  
                'MD'=>"Maryland",  
                'MA'=>"Massachusetts",  
                'MI'=>"Michigan",  
                'MN'=>"Minnesota",  
                'MS'=>"Mississippi",  
                'MO'=>"Missouri",  
                'MT'=>"Montana",
                'NE'=>"Nebraska",
                'NV'=>"Nevada",
                'NH'=>"New Hampshire",
                'NJ'=>"New Jersey",
                'NM'=>"New Mexico",
                'NY'=>"New York",
                'NC'=>"North Carolina",
                'ND'=>"North Dakota",
                'OH'=>"Ohio",  
                'OK'=>"Oklahoma",  
                'OR'=>"Oregon",  
                'PA'=>"Pennsylvania",  
                'RI'=>"Rhode Island",  
                'SC'=>"South Carolina",  
                'SD'=>"South Dakota",
                'TN'=>"Tennessee",  
                'TX'=>"Texas",  
                'UT'=>"Utah",  
                'VT'=>"Vermont",  
                'VA'=>"Virginia",  
                'WA'=>"Washington",  
                'WV'=>"West Virginia",  
                'WI'=>"Wisconsin",  
                'WY'=>"Wyoming"
				);
				?>
				<tr>
					<td><b>State:</b></td>
					<td>
					<input id="departure_state1" class="validate[required]" type="text" name="departure_state[]">
					</td>
					<td><b>State:</b></td>
					<td>
					<input id="destination_state1" class="validate[required]" type="text" name="arrival_state[]">
					
</td>
				</tr>
				<tr>
					<td><b>Zip Code:</b></td>
					<td><input id="departure_zip1" class="validate[required]" type="text" name="departure_zipcode[]"></td>
					<td><b>Zip Code:</b></td>
					<td><input id="destination_zip1" class="validate[required]" type="text" name="arrival_zipcode[]"></td>
				</tr>

			</table>
			
						</TD>
			</TR>
			</table>
			<INPUT type="button" value="Add Leg" onclick="addRow()"/><br>
		

			</form>
			<input class="submit" type="submit" value="Submit"/>
</td>

</tr>
</table>

</body>
</html>

Open in new window

0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
and i'm running php on my IIS 7.5...woohooo
0
 

Author Comment

by:ats2012
Comment Utility
First off I want to say you are awesome. Everything is working except the destination City and State when you add a leg it stays with a 1 for the ID's.
0
 

Author Comment

by:ats2012
Comment Utility
Also, is it working in Internet Explorer for you? Thanks
0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
let me check
0
 
LVL 42

Accepted Solution

by:
sedgwick earned 500 total points
Comment Utility
replace the var arrElements to this:

      
      
var arrElements =['departure_city',
	'departure_state',
	'departure_zip',	
	'destination_city',
	'destination_state',
	'destination_zip', 	
	'location_departure',
	'location_destination'];

Open in new window

0
 

Author Comment

by:ats2012
Comment Utility
Its working perfect. Thank you so much for the help. You saved me days of work trying to figure this out.
0
 

Author Closing Comment

by:ats2012
Comment Utility
The guy does not give up. Thank you so much
0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
here complete file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
error_reporting(E_ALL);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="css/template.css" type="text/css"/>

<script src="scripts/gen_validatorv4.js" type="text/javascript"></script>
<script src="scripts/tablefilter_all_min.js" language="javascript" type="text/javascript"></script>

	<link rel="stylesheet" href="scripts/date_picker/jquery.ui.all.css">
	<script src="scripts/date_picker/jquery-1.8.0.js"></script>
	<script src="scripts/date_picker/jquery.ui.core.js"></script>
	<script src="scripts/date_picker/jquery.ui.widget.js"></script>
	<script src="scripts/date_picker/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="scripts/date_picker/date.css">
	
	<script src="scripts/validate/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
	</script>
	<script src="scripts/validate/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
	</script>

<SCRIPT language="javascript">

jQuery(document).ready(function(){
	// binds form submission and fields to the validation engine
	jQuery("#request").validationEngine('attach');

	$("#request").bind("jqv.form.validating", function(event){
		$("#hookError").html("")
	})

	$("#request").bind("jqv.form.result", function(event , errorFound){
		if(errorFound) $("#hookError").append("There is some problems with your form");
	})

});

function filltext(option)
{	
	var target = option.name.split('_')[1];
	var index = option.id[option.id.length-1];
	var table = $('#dataTrack');
	var val = option[option.selectedIndex].value;
	var tokens =  $.trim(val).split(', ');
	$('#'+target+'_city'+index).val(tokens[0]);
	var state_zip = tokens[1].split(' ');
	$('#'+target+'_state'+index).val(state_zip[0]);
	$('#'+target+'_zip'+index).val(state_zip[1]);
}	
	
function updateElementId(settings, elementName){
	var element = settings.row.find('#'+elementName+settings.counter);
	element.attr("id",elementName+(settings.counter+1).toString());
}

function addRow() {

	var me = this;
	var table = $('#dataTrack');
	var rowCount = $(">tbody>tr", table).length;
	if(rowCount >= 7){
		alert("Can't have more than 7 rows.");
		return;
	}
	var row = $(">tbody>tr:last", table).clone().appendTo(table);
	$(":text", row).val("");
	row.find('#leg').text("Leg " + (rowCount+1));
	row.find('#destination_label').text("Destination " + (rowCount+1));
	row.find('#departure_label').text("Departure " + (rowCount+1));
	
	var arrElements =['departure_city',
	'departure_state',
	'departure_zip',	
	'destination_city',
	'destination_state',
	'destination_zip', 	
	'location_departure',
	'location_destination'];
	
	me.settings = {row: row, counter: rowCount};
	$.each(arrElements, function(index, element) {
		updateElementId(me.settings, element)
	});
	
	$(":text[id^=datepicker]", row).removeClass("datepicker hasDatepicker").attr({id: "datepicker"+rowCount, value:""}).datepicker();
}
	
window.onload = function() {
	$("[id=datepicker]").datepicker();
}

</SCRIPT>
	
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>ATS Flight Track</title>
</head>
<body>

<form action="book_flight_form.php" method="post" id="request">
<table border="0" width="1000">

<tr>


<td width="1700" valign="top">

			
			<b><img src='images/plane.png' width='50' height='50' align='middle'/> Flight Information</b>
			
			<table id="dataTrack">
			<TR>
			<TD>
			<table width="700" border="0" class="searchform">

				<tr>
					<td><h2><span id="leg">Leg 1</span></h2></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td><b>Date:</b></td>
					<td><input type="text" name="departure_date[]" id="datepicker" class="validate[required] text-input"></td>
					<td></td>
					<td></td>
				</tr>
<?php
				$time_list = array(
				"Departure Time:",
                "Arrival Time:");
				?>
				<tr>
					<td colspan="3"><b>Departure/Arrival Schedule Priority: </b><?php
					  echo'<select name="time_state[]" class="validate[required]">';
					  echo'<option value="">Select One</option>';
   foreach($time_list as $time_state){

    echo'<option value="'.$time_state.'">'.$time_state.'</option>';

}

echo'</select>';


					?></td>
					<td><b>Time: </b><?php
					
$time_list = array(
				"12am",
				"1am",
                "2am",
				"3am",
				"4am",
				"5am",
				"6am",
				"7am",
				"8am",
				"9am",
				"10am",
				"11am",
				"12pm",
				"1pm",
				"2pm",
				"3pm",
				"4pm",
				"5pm",
				"6pm",
				"7pm",
				"8pm",
				"9pm",
				"10pm",
				"11pm"
				);
				
	echo'<select name="time_ampm[]" class="validate[required]">';
	echo'<option value="">Select One</option>';
   
foreach($time_list as $time_ampm){
	echo'<option value="'.$time_ampm.'">'.$time_ampm.'</option>';
}

echo'</select>';
					
					?></td>
				</tr>
				
								<tr>
					<td><h3><span id="departure_label">Departure 1</span></h3></td>
					<td></td>
					<td><h3><span id="destination_label">Destination 1</span></h3></td>
					<td></td>
				</tr>
				<tr>
					<td><?php
					
					   	$con = mysql_connect("localhost","root","w0rmh0l3");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db('flight_track');

 
 $query_loc = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());
 $query_loc_two = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());

					?>
<b>Frequently Used:</b>
					</td>
					<td>
<select id="location_departure1" name="location_departure" class="searchfield_sup" onChange=filltext(this);>
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc, MYSQL_ASSOC))
{
  $location_departure = htmlentities($data['name']);
  echo '<option value="'.$location_departure.'">'.$location_departure."</option>\n";
}
?>
</select>
					</td>
					<td>
<b>Frequently Used:</b>
					</td>
					<td>
<select id="location_destination1" name="location_destination" class="searchfield_sup" onChange=filltext(this);>
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc_two, MYSQL_ASSOC))
{
  $location_destination = htmlentities($data['name']);
  echo '<option value="'.$location_destination.'">'.$location_destination."</option>\n";
}
?>
</select>
					</td>
				</tr>
				<tr>
					<td><b>City:</b></td>
					<td><input class="validate[required] text-input" type="text" name="departure_city[]" id="departure_city1"></td>
					<td><b>City:</b></td>
					<td><input class="validate[required] text-input" type="text" name="arrival_city[]" id="destination_city1"></td>
				</tr>
				<?php
				$state_list = array(
				'AB'=>"Canada - Alberta",
				'BC'=>"Canada - British Columbia",
				'MB'=>"Canada - Manitoba",
				'NB'=>"Canada - New Brunswick",
				'NL'=>"Canada - Newfoundland and Labrador",
				'NT'=>"Canada - Northwest Territory",
				'NS'=>"Canada - Nova Scotia",
				'NU'=>"Canada - Nunavut",
				'ON'=>"Canada - Ontario",
				'PE'=>"Canada - Prince Edward Island",
				'QC'=>"Canada - Quebec",
				'SK'=>"Canada - Saskatchewan",
				'YT'=>"Canada - Yukon",
				'PR'=>"Puerto Rico",
				'MX'=>"Mexico",
				'AL'=>"Alabama",
                'AK'=>"Alaska",  
                'AZ'=>"Arizona",  
                'AR'=>"Arkansas",  
                'CA'=>"California",  
                'CO'=>"Colorado",  
                'CT'=>"Connecticut",  
                'DE'=>"Delaware",  
                'DC'=>"District Of Columbia",  
                'FL'=>"Florida",  
                'GA'=>"Georgia",  
                'HI'=>"Hawaii",  
                'ID'=>"Idaho",  
                'IL'=>"Illinois",  
                'IN'=>"Indiana",  
                'IA'=>"Iowa",  
                'KS'=>"Kansas",  
                'KY'=>"Kentucky",  
                'LA'=>"Louisiana",  
                'ME'=>"Maine",  
                'MD'=>"Maryland",  
                'MA'=>"Massachusetts",  
                'MI'=>"Michigan",  
                'MN'=>"Minnesota",  
                'MS'=>"Mississippi",  
                'MO'=>"Missouri",  
                'MT'=>"Montana",
                'NE'=>"Nebraska",
                'NV'=>"Nevada",
                'NH'=>"New Hampshire",
                'NJ'=>"New Jersey",
                'NM'=>"New Mexico",
                'NY'=>"New York",
                'NC'=>"North Carolina",
                'ND'=>"North Dakota",
                'OH'=>"Ohio",  
                'OK'=>"Oklahoma",  
                'OR'=>"Oregon",  
                'PA'=>"Pennsylvania",  
                'RI'=>"Rhode Island",  
                'SC'=>"South Carolina",  
                'SD'=>"South Dakota",
                'TN'=>"Tennessee",  
                'TX'=>"Texas",  
                'UT'=>"Utah",  
                'VT'=>"Vermont",  
                'VA'=>"Virginia",  
                'WA'=>"Washington",  
                'WV'=>"West Virginia",  
                'WI'=>"Wisconsin",  
                'WY'=>"Wyoming"
				);
				?>
				<tr>
					<td><b>State:</b></td>
					<td>
					<input id="departure_state1" class="validate[required]" type="text" name="departure_state[]">
					</td>
					<td><b>State:</b></td>
					<td>
					<input id="destination_state1" class="validate[required]" type="text" name="arrival_state[]">
					
</td>
				</tr>
				<tr>
					<td><b>Zip Code:</b></td>
					<td><input id="departure_zip1" class="validate[required]" type="text" name="departure_zipcode[]"></td>
					<td><b>Zip Code:</b></td>
					<td><input id="destination_zip1" class="validate[required]" type="text" name="arrival_zipcode[]"></td>
				</tr>

			</table>
			
						</TD>
			</TR>
			</table>
			<INPUT type="button" value="Add Leg" onclick="addRow()"/><br>
		

			</form>
			<input class="submit" type="submit" value="Submit"/>
</td>

</tr>
</table>

</body>
</html>

Open in new window

0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
works perfect in FF/Chrome and EE.
i gave some styling to Departure and Destination headers with the leg's number.
i fixed the id's of the other elements.
good luck and ping me if u need further help in the future.

cheers mate
0
 

Author Comment

by:ats2012
Comment Utility
Is it working for you in Internet Explorer? When I try only the add leg works. I am running WAMP.

Thanks
0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
yes its working on all browsers.
i'm not familiar with wamp but try clean the cache first.
0
 

Author Comment

by:ats2012
Comment Utility
It seems to be working fine in Internet Explorer 8 and above. anyway to get this to work in version 7?
0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
Whats the error?
0
 

Author Comment

by:ats2012
Comment Utility
Its not spitting an error out but I never used the debugging tools in IE so I could be doing it wrong.
0
 

Author Comment

by:ats2012
Comment Utility
Got this error.

Line: 82
Error: Unable to get value of the property 'split': object is null or undefined
0
 

Author Comment

by:ats2012
Comment Utility
var state_zip = tokens[1].split(' ');

This is the line it does not like.
0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
you must be able  to debug your js script or else you will be spending hours for nothing.
if you could debug then you would be able to see what is the value in line 47 which causes the split to throw an error.
the split separates the city from the state and zip.
just in case the address is not formatted properly with comma i'd check the tokens length.
var tokens =  $.trim(val).split(', ');

$('#'+target+'_city'+index).val(tokens[0]);

if(tokens.length = 2){
$('#'+target+'_city'+index).val(tokens[0]);
	var state_zip = tokens[1].split(' ');
	$('#'+target+'_state'+index).val(state_zip[0]);
	$('#'+target+'_zip'+index).val(state_zip[1]);
}

Open in new window

0

Featured Post

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.

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

763 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

7 Experts available now in Live!

Get 1:1 Help Now