Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 579
  • Last Modified:

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

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
ats2012
Asked:
ats2012
  • 40
  • 34
2 Solutions
 
Meir RivkinFull stack Software EngineerCommented:
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
 
ats2012Author Commented:
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
 
ats2012Author Commented:
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Meir RivkinFull stack Software EngineerCommented:
New form is a new page?
0
 
Meir RivkinFull stack Software EngineerCommented:
@ats2012

have u managed to fix the form id issue?
0
 
ats2012Author Commented:
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
 
ats2012Author Commented:
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
 
Meir RivkinFull stack Software EngineerCommented:
change:
var tokens =  group.trim().split(',');

Open in new window


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

Open in new window

0
 
ats2012Author Commented:
That fixed the issue with IE. Do you have an easy solution to the ID issue?
0
 
Meir RivkinFull stack Software EngineerCommented:
where's the code which creates the new form?
0
 
ats2012Author Commented:
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
 
Meir RivkinFull stack Software EngineerCommented:
why not having a global variable which increments every new form and set its id?
0
 
ats2012Author Commented:
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
 
Meir RivkinFull stack Software EngineerCommented:
The code u posted creates new row not new form
0
 
ats2012Author Commented:
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
 
Meir RivkinFull stack Software EngineerCommented:
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
 
ats2012Author Commented:
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
 
Meir RivkinFull stack Software EngineerCommented:
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
 
ats2012Author Commented:
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
 
Meir RivkinFull stack Software EngineerCommented:
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
 
Meir RivkinFull stack Software EngineerCommented:
which debugger you run? firebug or explorer Developer Tools?
0
 
ats2012Author Commented:
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
 
ats2012Author Commented:
I use Chrome to debug the code.
0
 
ats2012Author Commented:
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
 
Meir RivkinFull stack Software EngineerCommented:
check if you increment the counter variable at the end of your addRow function
0
 
Meir RivkinFull stack Software EngineerCommented:
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
 
ats2012Author Commented:
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
 
ats2012Author Commented:
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
 
Meir RivkinFull stack Software EngineerCommented:
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
 
ats2012Author Commented:
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
 
Meir RivkinFull stack Software EngineerCommented:
can u post your code please?
0
 
ats2012Author Commented:
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
 
ats2012Author Commented:
<!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
 
Meir RivkinFull stack Software EngineerCommented:
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
 
ats2012Author Commented:
Here are the ID's after the change.
Ids-After-change.png
0
 
Meir RivkinFull stack Software EngineerCommented:
set page_counter variable to 2,
1 is taken when you call fillText the first time (see line 206)
0
 
ats2012Author Commented:
None of the ID's are getting changed.
0
 
ats2012Author Commented:
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
 
Meir RivkinFull stack Software EngineerCommented:
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
 
ats2012Author Commented:
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
 
Meir RivkinFull stack Software EngineerCommented:
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
 
ats2012Author Commented:
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
 
Meir RivkinFull stack Software EngineerCommented:
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
 
ats2012Author Commented:
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
 
Meir RivkinFull stack Software EngineerCommented:
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
 
ats2012Author Commented:
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
 
ats2012Author Commented:
I converted it into jsFiddle. Not sure if I did it right though.

http://jsfiddle.net/rqrXf/
0
 
Meir RivkinFull stack Software EngineerCommented:
put breakpoint in filltext, what is the value of index?
do u get any JS errors?
0
 
ats2012Author Commented:
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
 
Meir RivkinFull stack Software EngineerCommented:
which means that line 32 returns undefined.
can u check what is the value of index line 31?
0
 
ats2012Author Commented:
[Exception: ReferenceError: index is not defined]
0
 
Meir RivkinFull stack Software EngineerCommented:
line 30 - does table is undefined?
0
 
ats2012Author Commented:
This what you are looking for?

table : [Exception: ReferenceError: table is not defined]
0
 
ats2012Author Commented:
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
 
ats2012Author Commented:
Here is all the code I am working with if its easier.
flight-track.zip
0
 
Meir RivkinFull stack Software EngineerCommented:
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
 
Meir RivkinFull stack Software EngineerCommented:
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
 
Meir RivkinFull stack Software EngineerCommented:
and i'm running php on my IIS 7.5...woohooo
0
 
ats2012Author Commented:
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
 
ats2012Author Commented:
Also, is it working in Internet Explorer for you? Thanks
0
 
Meir RivkinFull stack Software EngineerCommented:
let me check
0
 
Meir RivkinFull stack Software EngineerCommented:
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
 
ats2012Author Commented:
Its working perfect. Thank you so much for the help. You saved me days of work trying to figure this out.
0
 
ats2012Author Commented:
The guy does not give up. Thank you so much
0
 
Meir RivkinFull stack Software EngineerCommented:
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
 
Meir RivkinFull stack Software EngineerCommented:
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
 
ats2012Author Commented:
Is it working for you in Internet Explorer? When I try only the add leg works. I am running WAMP.

Thanks
0
 
Meir RivkinFull stack Software EngineerCommented:
yes its working on all browsers.
i'm not familiar with wamp but try clean the cache first.
0
 
ats2012Author Commented:
It seems to be working fine in Internet Explorer 8 and above. anyway to get this to work in version 7?
0
 
Meir RivkinFull stack Software EngineerCommented:
Whats the error?
0
 
ats2012Author Commented:
Its not spitting an error out but I never used the debugging tools in IE so I could be doing it wrong.
0
 
ats2012Author Commented:
Got this error.

Line: 82
Error: Unable to get value of the property 'split': object is null or undefined
0
 
ats2012Author Commented:
var state_zip = tokens[1].split(' ');

This is the line it does not like.
0
 
Meir RivkinFull stack Software EngineerCommented:
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 40
  • 34
Tackle projects and never again get stuck behind a technical roadblock.
Join Now