Link to home
Start Free TrialLog in
Avatar of maximus81
maximus81Flag for United States of America

asked on

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

Avatar of Obadiah Christopher
Obadiah Christopher
Flag of India image
Avatar of maximus81
maximus81
Flag of United States of America image

ASKER

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

ASKER CERTIFIED SOLUTION
Avatar of Obadiah Christopher
Obadiah Christopher
Flag of India image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of maximus81
maximus81
Flag of United States of America image

ASKER

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