[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Need to validate dynamic form using Javascript

Posted on 2013-01-09
14
Medium Priority
?
386 Views
Last Modified: 2013-01-17
I am creating a dynamic form using Javascript and need to be able to validate the form data before the user can create a new form when clicking the button. I am new at Javascript and having some issues with the array's of values for each form. Below is what i am looking for:

When Add leg is pressed it needs to check that there is a departure and and destination. Either the frequently used or if they type in a new address manually.

The time needs to be filled in.

Date needs to be filled in

Depature/Arrival Schedule priority drop down needs to be selected instead of Select One

Below is the 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>


<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 language="javascript">

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();

    }

	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.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"></td>
					<td></td>
					<td></td>
				</tr>
<?php
				$time_list = array(
				'Select One',
				"Departure Time:",
                "Arrival Time:");
				?>
				<tr>
					<td colspan="3"><b>Departure/Arrival Schedule Priority: </b><?php
					  echo'<select name="time_state[]" class="searchfield">';
   foreach($time_list as $time_state){

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

}

echo'</select>';
					?></td>
					<td><b>Time: </b><input class="searchfield_time" type="text" name="time[]"><?php
					
									$time_list = array(
				'AM',
				"PM");
				
										  echo'<select name="time_ampm[]" class="searchfield_time_ampm">';
   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 name="location_departure[]" class="searchfield_sup">
<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[]"></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>
</td>
</tr>
</table>

</body>
</html>

Open in new window

form.PNG
for-after-clicking-Leg.PNG
0
Comment
Question by:ats2012
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 3
  • +2
14 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38761852
I suggest you use

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Takes out all the issues of validation
0
 
LVL 43

Expert Comment

by:Rob
ID: 38761859
I second that.  Then as you dynamically add form components their class (that you would allocate them) will determine the type of validation required
0
 
LVL 19

Expert Comment

by:Manoj Patil
ID: 38762220
0
Technology Partners: 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!

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38762751
I was going to bash your suggestion because it is from 2005, however the second solution is not too bad
0
 

Author Comment

by:ats2012
ID: 38762841
This is what i have so far. How do I make it work with the button instead of putting the ID in form.

<!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>


<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/jquery.validate.js" type="text/javascript"></script>
    


<SCRIPT language="javascript">

$.validator.setDefaults({
	submitHandler: function() { alert("submitted!"); }
});



function addRow(tableID) {


$().ready(function() {

	// validate signup form on keyup and submit
	$("#request").validate({
		rules: {
		
			datepicker: "required",

		},
		messages: {
			datepicker: "Please enter your firstname",
			
		}
	});

});

        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();

    }

	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.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" required></td>
					<td></td>
					<td></td>
				</tr>
<?php
				$time_list = array(
				'Select One',
				"Departure Time:",
                "Arrival Time:");
				?>
				<tr>
					<td colspan="3"><b>Departure/Arrival Schedule Priority: </b><?php
					  echo'<select name="time_state[]" class="searchfield">';
   foreach($time_list as $time_state){

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

}

echo'</select>';
					?></td>
					<td><b>Time: </b><input id="time" class="searchfield_time" type="text" name="time[]"><?php
					
									$time_list = array(
				'AM',
				"PM");
				
										  echo'<select name="time_ampm[]" class="searchfield_time_ampm">';
   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 name="location_departure[]" class="searchfield_sup">
<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[]"></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>
</td>
</tr>
</table>

</body>
</html>

Open in new window

0
 
LVL 26

Accepted Solution

by:
EddieShipman earned 2000 total points
ID: 38762925
Second using jQuery, however, I've had tremendous success with jQuery ValidationEngine:
https://github.com/posabsolute/jQuery-Validation-Engine

I found the one suggested by mplungjan to be more difficult to use.
0
 

Author Comment

by:ats2012
ID: 38763019
I got this working using https://github.com/posabsolute/jQuery-Validation-Engine but its not working in Internet Explorer. Any ideas?

<!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();

			$("#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();

    }

	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(
				'Select One',
				"Departure Time:",
                "Arrival Time:");
				?>
				<tr>
					<td colspan="3"><b>Departure/Arrival Schedule Priority: </b><?php
					  echo'<select name="time_state[]" class="searchfield">';
   foreach($time_list as $time_state){

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

}

echo'</select>';
					?></td>
					<td><b>Time: </b><input id="time" class="searchfield_time" type="text" name="time[]"><?php
					
									$time_list = array(
				'AM',
				"PM");
				
										  echo'<select name="time_ampm[]" class="searchfield_time_ampm">';
   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 name="location_departure[]" class="searchfield_sup">
<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[]"></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

0
 
LVL 26

Expert Comment

by:EddieShipman
ID: 38764176
You need to attach your form to the engine:
jQuery("#request").validationEngine('attach');

Open in new window


P.S. Next time, show the rendered HTML vs. your PHP code so we can test or move it to jsFiddle.net
0
 

Author Comment

by:ats2012
ID: 38764203
I already have that on line 31 and this is an internal site. Won't be able to open it up to the outside.
0
 
LVL 26

Expert Comment

by:EddieShipman
ID: 38764595
We have a bunch of internal stuff too and I sterilize the data and post to jsFiddle when I have issues I need to tackle.

You didn't pass the 'attach' parameter on line 31:

jQuery("#request").validationEngine();

Open in new window

0
 

Author Comment

by:ats2012
ID: 38764642
I made that change and its still not working in Internet Explorer. It works perfect in Chrome and Firefox.
0
 
LVL 26

Expert Comment

by:EddieShipman
ID: 38765227
I've never had any problems, exactly what is it doing? You sure you can't post a renderd page on jsFiddle?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38766065
Or at least hit F12 and paste any error messages here
0
 

Author Comment

by:ats2012
ID: 38775464
0

Featured Post

Independent Software Vendors: 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!

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

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

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

Join & Ask a Question