Solved

Need to validate dynamic form using Javascript

Posted on 2013-01-09
14
368 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
  • 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 42

Expert Comment

by:Rob Jurd, EE MVE
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
 
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 500 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
6 Surprising Benefits of Threat Intelligence

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

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

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

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

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now