php form with java script submit

I have a php page located at http://www.ems-complete.com/peasi/dispatcher/dispatcher.php

I have set a php form that you can see at in at the bottom page under upcoming incidents section.

This code here is dispatcher.php which is the main page.

[php]

<head>
	<link href="dispatch.css" rel="stylesheet" type="text/css">
	<script src="dispatch.js"></script>
	<script src="//code.jquery.com/jquery.js"></script>
	<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
	<meta charset="utf-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="dispatch.js"></script>
	<script>
		$(function() {
			$(".button").click(function() {
				// validate and process form here
			});
		});

		var dataString = 'id=' + name + '&unit_status=' + email + '&phone=' + phone;
		//alert (dataString);return false;
		$.ajax({
			type : "POST",
			url : "dispatch.php",
			data : dataString,
			success : function() {
				$('#dispatch').html("<div id='upcoming'></div>");
				$('#message').html("<h2>Dispatch Complete</h2>").append("<p>We will be in touch soon.</p>").hide().fadeIn(1500, function() {
					$('#message').append("<img id='checkmark' src='images/check.png' />");
				});
			}
		});
		return false;
	</script>
	<?php
	include 'dispatch_mysql.php';
	?>
</head>

<body>
	<div class="container">
		<div id="header" class="header">
			<div class="Active">
				<div style="color: #FFF; background:#00C; height:20px">
					Active Incidents
				</div>
				<div id="active" class="active">

				</div>
			</div>
			<script>
				var $results = $('#active'), loadInterval = 60000;
				(function loader() {
					$.get('active_incidents.php', function(html) {
						$results.hide(200, function() {
							$results.empty();
							$results.html(html);
							$results.show(200, function() {
								setTimeout(loader, loadInterval);
							});
						});
					});
				})();
			</script>

			<div class="Available Units">
				<div style="color: #FFF; background:#00C; height:20px">
					Available Units
				</div>
				<div id="available" class="available">

				</div>
			</div>
			<script>
				var $available = $('#available'), loadInterval = 60000;
				(function loader() {
					$.get('available_units.php', function(html) {
						$available.hide(200, function() {
							$available.empty();
							$available.html(html);
							$available.show(200, function() {
								setTimeout(loader, loadInterval);
							});
						});
					});
				})();
			</script>

			<div class="Upcoming">
				<div style="color: #FFF; background:#00C; height:20px">
					Upcoming Incidents
				</div>
				<div id="upcoming" class="upcoming">

				</div>
			</div>
			<script>
				var $upcoming = $('#upcoming'), loadInterval = 60000;
				(function loader() {
					$.get('upcoming_incidents.php', function(html) {
						$upcoming.hide(200, function() {
							$upcoming.empty();
							$upcoming.html(html);
							$upcoming.show(200, function() {
								setTimeout(loader, loadInterval);
							});
						});
					});
				})();
			</script>
		</div>
	</div>

</body>
[/php]

This here is the upcoming_incidents.php

[php]

<?php

include ("dispatch_mysql.php");

	$option = '';
	while ($row = mysql_fetch_assoc($resultavailable)) {
		$option .= '<option value = "' . $row['id'] . '">' . $row['unit'] . '</option>';
	}
	
?>


							<table id="upcoming" width="100%" border="1">
							<tr>
							<th width="20%" >Available Units</th>
							<th width="10%" >Recommended Station</th>
							<th width="20%" >Incident Type</th>
							<th width="40%" >Address/Location</th>
							<th width="5%" >P/U Time</th>
							<th width="5%" >Apt Time</th>

							</tr>
							<?php while ($fetchselupcoming = mysql_fetch_assoc($resultupcoming)) { ?>
							<tr>
							<?php
							//**start pickup time conversion**//
							$pickup = $fetchselupcoming['pu'];
							$pickuptime = new DateTime($pickup, new DateTimeZone('EST'));
							$pickuptime -> setTimezone(new DateTimeZone('America/Detroit'));
							//**end pickup time conversion**//

							//**start appointment time conversion**//
							$apttime = date('H:i', strtotime($fetchselupcoming['at']));
							$appointtime = new DateTime($apttime, new DateTimeZone('EST'));
							$appointtime -> setTimezone(new DateTimeZone('America/Detroit'));
							//** end appointment time conversion**//
							if ($fetchselupcoming['type'] == 1) {
								echo "<td>".
							"<form id=\"dispatch\" >" . 
							"<select name=\"unit\">" . $option . "</select>" . 
							"<input type=\"hidden\" name=\"id\" value=".$fetchselupcoming['id']." >".
							"<input type=\"hidden\" name=\"unit_status\" value=\"3\">" .
							"<input type=\"hidden\" name=\"status\" value=\"3\">".
							"<input class=\"button\" type=\"submit\" value=\"Dispatch\">". 
							"</form>" . 
							"</td>" . 
							"<td>" .$fetchselupcoming['station']. "</td>" . 
							"<td style=\"background-color:#CC0000 \">" . $fetchselupcoming['name'] . "</td>" . 
							"<td>" . $fetchselupcoming['full_address_2'] . "</td>" . 
							"<td>" . $pickuptime -> format('H:i') . "</td>" . 
							"<td>" . $appointtime -> format('H:i') . "</td>";
							
							} 
							
							else if ($fetchselupcoming['type'] == 2) {
								echo "<td>".
							"<form id=\"dispatch\">" . 
							"<select name=\"unit\">" . $option . "</select>" . 
							"<input type=\"hidden\" name=\"id\" value=".$fetchselupcoming['id']." >".
							"<input type=\"hidden\" name=\"unit_status\" value=\"3\">" .
							"<input type=\"hidden\" name=\"status\" value=\"3\">".
							"<input class=\"button\" type=\"submit\" value=\"Dispatch\">". 
							"</form>" . 
							"</td>" . 
							"<td>" .$fetchselupcoming['station']. "</td>" . 
							"<td style=\"background-color:#CC0000 \">" . $fetchselupcoming['name'] . "</td>" . 
							"<td>" . $fetchselupcoming['full_address_2'] . "</td>" . 
							"<td>" . $pickuptime -> format('H:i') . "</td>" . 
							"<td>" . $appointtime -> format('H:i') . "</td>";
							
							}
							 else if ($fetchselupcoming['type'] == 3) {
								echo "<td>".
							"<form id=\"dispatch\">" . 
							"<select name=\"unit\">" . $option . "</select>" . 
							"<input type=\"hidden\" name=\"id\" value=".$fetchselupcoming['id']." >".
							"<input type=\"hidden\" name=\"unit_status\" value=\"3\">" .
							"<input type=\"hidden\" name=\"status\" value=\"3\">".
							"<input class=\"button\" type=\"submit\" value=\"Dispatch\">". 
							"</form>" . 
							"</td>" . 
							"<td>" .$fetchselupcoming['station']. "</td>" . 
							"<td style=\"background-color:#CC0000 \">" . $fetchselupcoming['name'] . "</td>" . 
							"<td>" . $fetchselupcoming['full_address_2'] . "</td>" . 
							"<td>" . $pickuptime -> format('H:i') . "</td>" . 
							"<td>" . $appointtime -> format('H:i') . "</td>";
							
							}
							
							?>
						</tr>
						<?php }; ?>
					</table>

[/php]

Problems is when I click the Dispatch submit button nothing happens with the JS if I set this up as a standard form it does work.

When you say nothing happens, what does that mean? Is there an error at all? Thanks.

The page reloads and I have yet to see an error

Sponsor our Newsletter | Privacy Policy | Terms of Service