How to add multiple rows using JavaScript and PHP

I have a form that I am creating for users that need to take flights. What i need is to be able to let the user add more flight forms. The form is below that I need to be able to have multiple of them. I'm not really good with Javascript and have no idea how to do this.

<table width="800" border="0">
			<th>
			<b>Departure</b>
			</th>
			<th>
			</th>
			<th>
			<b>Arrival</b>
			</th>
			<th>
			</th>
				<tr>
					<td><b>Date:</b></td>
					<td><input class="searchfield" type="text" name="departure_date" id="inputField"></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td><b>Departure Time:</b></td>
					<td><input class="searchfield" type="text" name="departure_time"></td>
					<td><b>Arrival Time:</b></td>
					<td><input class="searchfield" type="text" name="arrival_time"></td>
				</tr>
				<tr>
					<td><b>City:</b></td>
					<td><input class="searchfield" type="text" name="departure_city"></td>
					<td><b>City:</b></td>
					<td><input class="searchfield" type="text" name="arrival_city"></td>
				</tr>
				<?php
				$state_list = array(
				'Select One',
				'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="depature_state" class="searchfield">';
   foreach($state_list as $depature_state){

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

}

echo'</select>';
					?></td>
					<td><b>State:</b></td>
					<td><?php
					  echo'<select name="arrival_state" class="searchfield">';
   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" type="text" name="departure_zipcode"></td>
					<td><b>Zip Code:</b></td>
					<td><input class="searchfield" type="text" name="arrival_zipcode"></td>
				</tr>
				<?php
				$typel = array('Select One','Rental Car','Taxi','Town Car');
				$stypel = array('Select One','Econo','Compact','Mid','Full','Lux','SUV','Mini-Van');
				?>
				<tr>
					<td><b>Ground Transportation:</b></td>
					<td colspan="3">
<?php
  echo'<select name="type" class="searchfield">';
   foreach($typel as $type){

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

}

echo'</select>';

  echo'<select name="style" class="searchfield">';
   foreach($stypel as $style){

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

}

echo'</select>';
?>	 
                    </td>
					<tr>
					<td>
					<b>List Passengers:</b>
					</td>
					<td colspan="3">
					<textarea cols="50" rows="4" class="searchtext"  name="explaintext"></textarea>
					</td>
					
					
					
					</tr>
				</tr>
			</table>

Open in new window

maximus81Asked:
Who is Participating?
 
Obadiah ChristopherCommented:
Should be an issue with setting the id of the target textbox I guess..
0
 
Obadiah ChristopherCommented:
0
 
maximus81Author Commented:
This is what I have so far but am having some issues with the Date javascript. The calendar works on the first date field but when you add a row is does not work on the second one. What needs to be changed for this to works on all rows? Thanks

<!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="shortcut icon" href="images/plane.ico">
<link rel="stylesheet" type="text/css" href="css/filtergrid.css" />
<script src="scripts/tablefilter_all_min.js" language="javascript" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />
<script type="text/javascript" src="jquery.1.4.2.js"></script>
<script type="text/javascript" src="jsDatePick.jquery.min.1.3.js"></script>


<script type="text/javascript">
	window.onload = function(){
		new JsDatePick({
			useMode:2,
			target:"inputField",
			dateFormat:"%Y-%m-%d"
		});
	};
</script>

    <SCRIPT language="javascript">
        function addRow(tableID) {
 
            var table = document.getElementById(tableID);
 
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
 
            var colCount = table.rows[0].cells.length;
 
            for(var i=0; i<colCount; i++) {
 
                var newcell = row.insertCell(i);
 
                newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                }
            }
        }
 
        function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
 
            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    if(rowCount <= 1) {
                        alert("Cannot delete all the rows.");
                        break;
                    }
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }
 
 
            }
            }catch(e) {
                alert(e);
            }
        }
 
    </SCRIPT>
	
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>ATS Flight Track</title>
</head>
<body>
   <?php 

require("class.phpmailer.php");
include ("navigation.php");
navigation();
?>
<td width="1700" valign="top">


		<?php

$LDAPusername = $_SERVER['REMOTE_USER'];
/*
if ($atpos = strpos($LDAPusername , "@")) {
$LDAPusername = substr($username, 0, $atpos);
} else 
{
$LDAPusername = substr(strrchr($LDAPusername, '\\'), 1);
}

	$con = mysql_connect("localhost","root","password");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db('ats');

$query = mysql_query("SELECT * FROM atsusers WHERE login = '$LDAPusername'") or die (mysql_error());
$numofrows = mysql_num_rows($query);
$row = mysql_fetch_assoc($query);

$fullname = $row['fullname'];

$email = $LDAPusername ."@ats-inc.com";

$query = mysql_query("SELECT * FROM atsusers WHERE supervisor = '$fullname' ORDER BY fullname ASC") or die (mysql_error());
*/
?>
<form name="send.php" method="post">	
			<INPUT type="button" value="Add Row" onclick="addRow('dataTrack')" /><br>
			<b><img src='images/plane.png' width='35' height='35' align='middle'/> Flight Information</b><br>
			<table id="dataTrack">
			<tr>
			<td>
			
			<table width="800" border="0" class="searchform">
			<th>
			<b>Departure</b>
			</th>
			<th>
			</th>
			<th>
			<b>Arrival</b>
			</th>
			<th>
			</th>
				<tr>
					<td><b>Date:</b></td>
					<td><input class="searchfield" type="text" name="departure_date[]" id="inputField"></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td><b>Departure Time:</b></td>
					<td><input class="searchfield" type="text" name="departure_time[]"></td>
					<td><b>Arrival Time:</b></td>
					<td><input class="searchfield" type="text" name="arrival_time[]"></td>
				</tr>
				<tr>
					<td><b>City:</b></td>
					<td><input class="searchfield" type="text" name="departure_city[]"></td>
					<td><b>City:</b></td>
					<td><input class="searchfield" type="text" name="arrival_city[]"></td>
				</tr>
				<?php
				$state_list = array(
				'Select One',
				'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="depature_state[]" class="searchfield">';
   foreach($state_list as $depature_state){

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

}

echo'</select>';
					?></td>
					<td><b>State:</b></td>
					<td><?php
					  echo'<select name="arrival_state[]" class="searchfield">';
   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" type="text" name="departure_zipcode[]"></td>
					<td><b>Zip Code:</b></td>
					<td><input class="searchfield" type="text" name="arrival_zipcode[]"></td>
				</tr>
			</table>
						</td>
			</tr>
			</table>
							<?php
				$typel = array('Select One','Rental Car','Taxi','Town Car');
				$stypel = array('Select One','Econo','Compact','Mid','Full','Lux','SUV','Mini-Van');
				?>
				<br>
			    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
				<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
				<br>
				<br>
	<b>Groud Transportation</b>
	<br>
			<table id="dataTable" border="0">
        <TR>
            <TD><INPUT type="checkbox" name="chk"/></TD>
            <TD>
			<?php
  echo'<select name="type[]" class="searchfield">';
   foreach($typel as $type){

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

}

echo'</select>';

  echo'<select name="style[]" class="searchfield">';
   foreach($stypel as $style){

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

}

echo'</select>';
?>
            </TD>
        </TR>
			</table>
			<br>
			<input class='button' type='submit' name='form' value='Submit'>
			</form>


















</td>
</tr>
</table>
</body>
</html>

Open in new window

0
 
maximus81Author Commented:
I tried to put [] for inputField but that does not work. See below

<script type="text/javascript">
	window.onload = function(){
		new JsDatePick({
			useMode:2,
			target:"inputField[]",
			dateFormat:"%Y-%m-%d"
		});
	};
</script>



<td><input class="searchfield" type="text" name="departure_date[]" id="inputField[]"></td>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.