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

Javascript does not work when I add a second row on my form

I created a form that uses a javascript calender when you select the text box. You are also able to add a second form and more but on the new forms the javascript does not work. I know its something with the name but not sure how to fox it.


This is the javascript for the calendar, i tried changing the name to inputField[] but that does not work.

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

<!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_once 'lib/swift_required.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","pass");
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'];
$supervisor = $row['supervisor'];

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


$query_sup = mysql_query("SELECT * FROM atsusers WHERE fullname = '$supervisor' ORDER BY fullname ASC") or die (mysql_error());

$row_sup = mysql_fetch_assoc($query_sup);

$supemail = $row_sup['login'] ."@ats-inc.com";
$supfullname = $row_sup['fullname'];

?>
<form name="book_flight.php" method="post">	
			<INPUT type="button" value="Add Row" onclick="addRow('dataTrack')" />
			<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTrack')" /><br>
			<b><img src='images/plane.png' width='35' height='35' align='middle'/> Flight Information</b><br>
			<table id="dataTrack">
			<TR>
			<TD><INPUT type="checkbox" name="chk"/>
			<table width="800" border="0" class="searchform">
			<td>
			<b>Departure</b>
			</td>
			<td>
			</td>
			<td>
			<b>Arrival</b>
			</td>
			<td>
			</td>
				<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="departure_state[]" class="searchfield">';
   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">';
   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>
				<tr>
					<td><b>Passanger List:</b></td>
					<td colspan="2">
					<textarea cols="70" rows="5" class="searchtext"  name="passanger_list[]"></textarea>
					
					</td>
					<td>
					Example: First Person, Second Person, Third Person....
					</td>
				</tr>
				<tr>
					<td><b>Transporation:</b></td>
					<td colspan="2">
					<textarea cols="70" rows="5" class="searchtext"  name="transporation[]"></textarea>
					
					</td>
					<td valign="top">
					Options:<br>
					Type: Rental Car, Taxi, Town Car<br>
					Style: Econo, Compact, Mid, Full, Lux, SUV, Mini-Van
					</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');
				$legl = array('Leg 1','Leg 2','Leg 3','Leg 4','Leg 5','Leg 6','Leg 7');
				?>
				<br>

			<input class='button' type='submit' name='form' value='Submit'>
			<br><br>
			<b>Click button once to prevent multipe requests.</b>
			</form>


<?php

 if($_SERVER['REQUEST_METHOD'] == "POST") {
 
  $body = "<html><body>";

$departure_date = $_POST['departure_date'];
$departure_time = $_POST['departure_time'];
$arrival_time = $_POST['arrival_time'];
$departure_city = $_POST['departure_city'];
$arrival_city = $_POST['arrival_city'];
$departure_state = $_POST['departure_state'];
$arrival_state = $_POST['arrival_state'];
$departure_zipcode = $_POST['departure_zipcode'];
$arrival_zipcode = $_POST['arrival_zipcode'];
$passanger_list = $_POST['passanger_list'];
$transporation = $_POST['transporation'];

$leg = 1;
$body .= "<br><b>Flight Information</b><br>";
foreach($departure_date as $a => $b)
{

$body .= <<<eof
<br>
<b>Leg $leg</b>
<br><br>
<table border="1">
<tr>
<td>
<b>Date:</b>	
</td>
<td>
$departure_date[$a]
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
<b>Departure Time:</b>
</td>
<td>
$departure_time[$a]
</td>
<td>
<b>Arrival Time:</b>
</td>
<td>
$arrival_time[$a]
</td>
</tr>

<tr>
<td>
<b>Departure City:</b>
</td>
<td>
$departure_city[$a]
</td>
<td>
<b>Arrival City:</b>
</td>
<td>
$arrival_city[$a]
</td>
</tr>

<tr>
<td>
<b>Departure State:</b>
</td>
<td>
$departure_state[$a]
</td>
<td>
<b>Arrival State:</b>
</td>
<td>
$arrival_state[$a]
</td>
</tr>

<tr>
<td>
<b>Departure Zip:</b>
</td>
<td>
$departure_zipcode[$a]
</td>
<td>
<b>Arrival Zip:</b>
</td>
<td>
$arrival_zipcode[$a]
</td>
</tr>

<tr>
<td>
<b>Passanger List:</b>
</td>
<td colspan="3">
$passanger_list[$a]
</td>
</tr>

<tr>
<td>
<b>Transporation:</b>
</td>
<td colspan="3">
$transporation[$a]
</td>
</tr>

</table>
eof;
$leg++;
 }

$body .= "</table></body></html>";
  
  
  	$con = mysql_connect("localhost","root","pass");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db('flight_track');
  
  
    $sql="INSERT INTO flight_track (
requester, 
supervisor, 
information) 
VALUES (
'$fullname',
'$supervisor',
'$body'
)";		

if (!mysql_query($sql,$con))
  {
  die('Error: ' . mysql_error());
  }
  
  
  
  
  $transport = Swift_SmtpTransport::newInstance('172.16.1.190', 25);

$mailer = Swift_Mailer::newInstance($transport);

$message = Swift_Message::newInstance('Flight Request by - ' .$fullname)
  ->setFrom(array($email => ''))
  ->setTo(array($email))
  ->setBody($body, 'text/html')
  ;

// Send the message
$result = $mailer->send($message);
  echo"<br><br>";
  Echo "<b>Request has been sent</b>";
  
  
 }
 
 
 
 
 
 
 
 ?>




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

Open in new window

0
maximus81
Asked:
maximus81
  • 3
  • 3
1 Solution
 
zappafan2k2Commented:
The "target" option is pointing to the id attribute of the element, not the form name.

To do this, you would have to assign a unique id to each element that you want to be a datepicker, and execute the new JsDatePick() code for each one, targeting the id.
0
 
maximus81Author Commented:
I am very new to Javascript. How would I go about doing this? Thanks
0
 
zappafan2k2Commented:
Assuming this is the relevant HTML (I added a second date field):
<tr>
		<td><b>Date:</b></td>
		<td><input class="searchfield" type="text" name="departure_date[]" id="inputField"></td>
		<td>Arrival Date:</td>
		<td><input class="searchfield" type="text" name="arrival_date[]" id="inputField2"></td>
	</tr>
	

Open in new window

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

Open in new window

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!

 
maximus81Author Commented:
Not sure this will help me. When I add a new form it creates an array so the second form wont be inputField and I only have one Date.
0
 
zappafan2k2Commented:
Then you won't be able to use JsDatePick unless you know wha the id attribute will be.
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
Absolutely you shouldn't  use a non standart datepicker. The one you use is simple but missing so many details. range , language , skinning etc.

I advise you to use JqeryUI's datepicker. Use the simplest one at first . Easy to intall .

http://jqueryui.com/demos/datepicker/

standalone version
http://jqueryui.com/demos/datepicker/default.html

You can simply get all js files to your folder and html code to your page to easily implement.

there you can use classnames (surely) for selectors.

give all datepickers a class="datepicker" property , you dont need to set any css for that.


just use $(".datepicker").datepicker()
0
 
maximus81Author Commented:
I got everything working except using it as a class instead of an id. I add

            <script>
      $(function() {
            $( "datepicker" ).datepicker();
      });
      </script>

and add datepicker as the class but it does not show up. What am I doing wrong?
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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