• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 617
  • Last Modified:

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

0
maximus81
Asked:
maximus81
  • 2
  • 2
1 Solution
 
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
 
informaniacCommented:
Should be an issue with setting the id of the target textbox I guess..
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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