I have a page called index.php and on this page I have a form that takes a number and processes the form via ajax and returns the result on this same page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Ordertrack</title>
<link rel='stylesheet' type='text/css' href='css/style.css' />
<link rel='stylesheet' type='text/css' href='css/print.css' media="print" />
</head>
<body>
<form action="processing.php" id="submitsearch" method="post">
<input type="text" name="ordernum" value="">
<input type="submit" />
</form>
<div id="searchresults"></div>
<script src="js/jquery.js"></script>
<script src="js/example.js"></script>
</body>
</html>
As you can see I am linking my css and js in index.php and a few things were not working in jquery when I was submitting the form as it was getting to processing.php so, I changed click to onclick but then I wanted to check on a few things like a link with a class delete exists and that wasn't working. Then I added the script to processing.php. Now I need to know if this is good or bad. Should I link my js and css files in processing.php ?
This is the ajax call
$(document).ready(function(){
$('#submitsearch').submit(function() {
$.ajax({
data: $(this).serialize(),
type: $(this).attr('method'),
url: $(this).attr('action'),
success: function(response) {
$('#searchresults').html(response);
$('#submitsearch').hide();
}
});
return false;
});
});
This is my processing.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Ordertrack</title>
<link rel="stylesheet" href="">
</head>
<body>
<div id="page-wrap">
<div style="clear:both"></div>
<div id="customer">
</div>
<div class="border-rtlt"></div>
<div class="border-rtlt"></div>
<table id="items">
<tr>
<th>Products</th>
<th>SKU</th>
<th>Price</th>
<th>Qty</th>
<th>Discount</th>
<th>Subtotal</th>
</tr>
<tr class="item-row">
<td class="description"><div class="delete-wpr"><textarea>data</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td><textarea>data</textarea></td>
<td><textarea class="cost">data</textarea></td>
<td><textarea class="qty">data</textarea></td>
<td><span>data</span></td>
<td><span class="price">data</span></td>
</tr>
<tr id="hiderow">
<td colspan="6"><a id="addrow" href="javascript:;" title="Add a row">Add a row</a></td>
</tr>
<tr>
<td colspan="3" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value"><div id="subtotal">data</div></td>
</tr>
<tr>
<td colspan="3" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value"><div id="total">data</div></td>
</tr>
</table>
</div>
<script>
if ($(".item-row").length == 1) {
$("a.delete").hide();
};
</script>
</body>
</html>
Your button
<input type="submit" id='btnSubmit'/>
You only need to prevent the default behavior of the button
$( "#btnSubmit'" ).click(function( event ) {
event.preventDefault();
$.ajax({
data: $( "#submitsearch'").serialize(),
type: $("#submitsearch'").attr('method'),
url: $("#submitsearch'").attr('action'),
success: function(response) {
$('#searchresults').html(response);
$('#submitsearch').hide();
}
});
return false;
});