I have a 2 input form that I want to use in the where statement of a MySQL query to return data on a web page
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
success: function ()
});
});
});
</script>
</head>
I am looking for a table to be returned with the data from the MySQL server, but the page reloads with the fields blanked out
Update to add new code
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.post("3.16.86.231/bandi.php", {
// these are the data you are passing you will to find a way to get them from the input boxes
po: '$porder',
pn: '$pnumber'
},
});
});
</script>
</head><style>
body {
font-family:arial;
font-size:12;
}
</style>
<form action = "" method = "POST">
<body>
<table border = 3>
<tr>
<td> Purchase Order Number </td>
<td> <input type = text name = po value = "<?php echo $porder;?>" size="50" autofocus>
</tr>
<tr>
<td> Part Number </td>
<td> <input type = text name = pn value = "<?php echo $pnumber;?>" size="50">
</tr>
<tr>
<td colspan = 3>
<input type = "submit" name="send" value = "Ok" title="Click here to display values.">
<input type = "submit" name="clear" value = "Clear" title="Click here to clear text boxes.">
</td>
</tr>
</table>
</form>
You can do this in different ways but in both cases you will need to have your php file ready and stored in your server to where it can be run. Then, you need to find the url for your php file so if your php file is called Script.php then your url is localhost/Script.php you can confirm that by typing the url in the your browser and see if you get error 404 or not.
Once you found your url we can start on submitting your request. So here is the plan, you will send some information from your html/js to your php code. Then, your php code will connect to the database and run your sql. So to send the information to the php you can either use the form post method like:
<form action="localhost/script.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>Or you can use AJAX as you used in the example above. However, if you are going to use AJAX then you need to modify your code to something like this:
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.post("localhost/script.php", {
// these are the data you are passing you will to find a way to get them from the input boxes
name: "Donald Duck",
city: "Duckburg"
},
function(data, status){
//this is the data you are getting back and you need to find a way to put them in a table
alert("Data: " + data + "
Status: " + status);
});
});
});If you are going with the form post method then you will need to have your php script render your table and put the data in it.
There are other ways to do it but this should get you started
Sources for more info: https://www.w3schools.com/tags/tag_form.asp
https://www.w3schools.com/jquery/jquery_ajax_get_post.asp
</div>