Unable to get data from my form to Ajax call
Unable to get data from my form to Ajax call
CenterFound
Posts: 30Questions: 10Answers: 0
In my code, I'm attempting to get data from 3 inputs in a form control.
However, when I click Submit, no data is captured and the page reloads.
The submit is triggering table.draw()
What am I doing wrong?
<?php
# $Id$
session_start();
<?php
>
<!DOCTYPE html>
?>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Bootstrap -->
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script src="js/jquery-1.11.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.js"></script>
<script src="js/datatables.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-table.min.css" rel="stylesheet" />
<link href="css/datatables.min.css" rel="stylesheet" />
<link href="css/apirpt.css" rel="stylesheet" />
<title>Status</title>
</head>
<body style="padding-top:20px">
<div class="col-md-12">
<div class="well">
<div class="container">
<h1>Status Report</h1>
<div class="col-md-9">
<form class="form-inline">
<div class="form-group">
<label for="reqid">ReqID:</label>
<input type="text" class="form-control" placeholder="Enter Req ID here" id="reqID">
</div>
<div class="form-group">
<label for="start">Start Date:</label>
<input type="text" class="form-control" placeholder="MM/DD/YYYY" id="dtStart">
</div>
<div class="form-group">
<label for="end">End Date:</label>
<input type="text" class="form-control" placeholder="MM/DD/YYYY" id="dtEnd">
</div>
<button id="btnSubmit" type="submit" class="btn btn-success">Submit</button>
</form>
</div>
<table id="grid" class="table table-striped table-bordered display compact" width="100%" >
<thead>
<tr>
<th>Code</th>
<th>From</th>
<th>To</th>
<th>Req ID</th>
<th>Transaction Date</th>
<th>Old Code Status</th>
<th>New Code Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Code</th>
<th>From</th>
<th>To</th>
<th>Req ID</th>
<th>Transaction Date</th>
<th>Old Code Status</th>
<th>New Code Status</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#grid tfoot th').each(function() {
var title = $('#grid thead th').eq($(this).index()).text();
$(this).html('<input type="text" placeholder="Search ' + title + '"/>');
});
var vReqID;
var table = $('#grid').DataTable({
"sPaginationType" : "full_numbers",
"ajax": {
"url" : "data/get_status.php",
data: function(data) {
//$('form').serialize();
data.dtStart = $("#dtStart").val();
data.dtEnd = $("#dtEnd").val();
data.reqID = vReqID; //$("#reqID").val();
}
},
"processing" : false,
"serverSide" : true,
"fixedHeader" : true,
"lengthMenu" : [[10, 25, 50, 100, 200],[10,25,50,100,200]],
"pageLength" : 25,
"sScrollX" : "110%",
"sScrollY" : "600px",
"bScrollCollapse": true,
"columnDefs": [
{ "type": "signed-num", "targets": 3}
]
});
table.columns().every(function () {
var datatableColumn = this;
$(this.footer()).find('input').on('keyup change', function() {
datatableColumn.search(this.value).draw();
});
});
$('#btnSubmit').on('click', function(event){
vReqID = $("#reqID").val();
//vStart = $("#dtStart").val();
//vEnd = $("#dtEnd").val();
//alert(vReqID);
table.draw();
});
});
</script>
</body>
</html>
This discussion has been closed.
Answers
Seems I can extend the data component, but only if I use static data, which won't work.
I have to be able to pass dynamic parameter data to my url.
Is this possible? I've tried all the examples in the manual, and only static data works.
Please Advise!
Found and corrected the issue. My submit button is type="submit", it needs to be type="button". This was the source of my issue.