This file is the return file using ajax to sorting a table when checkbox is checked,
But the submit button doesn't work in following coding,
When seems there is nothing wrong in this code as per my knowledge
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
alert("Submitted");
});
});
</script>
</head>
<body>
<table>
<tr>
<th class="heading">
Sl No.
</th>
<th class="heading">
Order Id
</th>
<th class="heading">
Date
</th>
<th class="heading">
Process
</th>
<th class="heading">
Curr Status
</th>
<th class="heading_blank">
Change Status
</th>
<th class="heading_blank">
</th>
</tr>
<?php
include "config.php";
$checkbox = isset($_POST['checked_box']);
if($checkbox == 1){
$Query="SELECT * FROM `order` ORDER BY sl_no DESC";
}else{
$Query="SELECT * FROM `order` ORDER BY sl_no ASC";
}
$result=mysql_query($Query);
while($row = mysql_fetch_object($result)) {
?>
<tr>
<td class="content">
<?php echo $row->sl_no; ?>
</td>
<td class="content">
<?php echo $row->order_id; ?>
</td>
<td class="content">
<?php echo $row->pick_date; ?>
</td>
<td class="content">
<?php echo $row->process; ?>
</td>
<td class="content">
<?php echo $row->status; ?>
</td>
<form action="update_status.php?order_id=<?php echo $row->order_id; ?>" method="POST">
<td>
<div class="select-style">
<select name="status">
<option value="<?php echo $row->status; ?>"><?php echo $row->status; ?></option>
<option value="Step_1">Step_1</option>
<option value="Step_2">Step_2</option>
<option value="Step_3">Step_3</option>
<option value="Step_4">Step_4</option>
</select>
</div>
</td>
<td>
<input type="submit" class="order_details_btn" value="Change">
</td>
</form>
</tr>
<?php } ?>
</table>
</body>
</html>
this page is came form this file
<!doctype html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
function getOrderStatus(value) {
$.post("getOrderStatus.php", {partialOrderStatus:value},function(data){
$("#results").html(data);
}
);
}
</script>
<script type="text/javascript">
function sortOrder() {
$.ajax( {
type: 'POST',
url: 'sortOrder.php',
data: { checked_box : $('input:checkbox:checked').val()},
success: function(data) {
$('#results').html(data);
}
} );
}
</script>
</head>
<body>
<div id="floating-menu">
<div id="order_tab">
<div class="form_bg_alpha_order_status">
<table id="order_hist">
<tr>
<td style="width:120px;">Search by:<input type="checkbox" name="checked_box" value="1" onclick="sortOrder()"></td>
<td style="width:840px;"><input class="search" type="text" onkeyup="getOrderStatus(this.value)" placeholder="Order Id"/></td>
</tr>
</table>
<div id="results">
<table>
<tr>
<th class="heading">
Sl No.
</th>
<th class="heading">
Order Id
</th>
<th class="heading">
Date
</th>
<th class="heading">
Process
</th>
<th class="heading">
Curr Status
</th>
<th class="heading_blank">
Change Status
</th>
<th class="heading_blank">
</th>
</tr>
<?php
include "config.php";
$result=mysql_query ("SELECT * FROM `order` WHERE process='active'");
while(($row= mysql_fetch_object ($result))!=null) {
?>
<tr>
<td class="content">
<?php echo $row->sl_no; ?>
</td>
<td class="content">
<?php echo $row->order_id; ?>
</td>
<td class="content">
<?php echo $row->pick_date; ?>
</td>
<td class="content">
<?php echo $row->process; ?>
</td>
<td class="content">
<?php echo $row->status; ?>
</td>
<form action="update_status.php?order_id=<?php echo $row->order_id; ?>" method="POST">
<td>
<div class="select-style">
<select name="status">
<option value="<?php echo $row->status; ?>"><?php echo $row->status; ?></option>
<option value="Step_1">Step_1</option>
<option value="Step_2">Step_2</option>
<option value="Step_3">Step_3</option>
<option value="Step_4">Step_4</option>
</select>
</div>
</td>
<td>
<input type="submit" class="order_details_btn" value="Change">
</td>
</form>
</tr>
<?php } ?>
</table>
</div>
<body>
</html>
Here the submit form is work properly but is doesn't in the prev page