Hello everybody,
I want to display database query result (php+mysql) on submitting a form. And also the result should be displayed in the same page without altering other contents of the page. For example, we have
<body>
<div>
<form action="" method="post">
<p>Name: <input></p>
<p>Email: <input></p>
<p><input type="submit" onclick="demo.php" value="click me">
</form>
</div>
some other page contents
</body>
what I want, is to only replace the form by result retrieved. Guide me please
showing php result in same page
Moderator: General Moderators
Re: showing php result in same page
What have you tried? Where are you running into problems?
Re: showing php result in same page
In order to do this, you are going to need to use javascript
Instead of actually submitting the form to the server, you will need to capture it (the on submit, but you can't just give it a page name, Javascript doesn't know how to handle that)
So assuming you want to pass the form to the database lookup, you create an AJAX call and pass the form info via post, then when the result is returned from the server, you replace the content the div around the form (give it an ID so you can directly access it) with the results, either directly if your PHP script is giving out html, or piece it together from data such as JSON.
Instead of actually submitting the form to the server, you will need to capture it (the on submit, but you can't just give it a page name, Javascript doesn't know how to handle that)
So assuming you want to pass the form to the database lookup, you create an AJAX call and pass the form info via post, then when the result is returned from the server, you replace the content the div around the form (give it an ID so you can directly access it) with the results, either directly if your PHP script is giving out html, or piece it together from data such as JSON.
Re: showing php result in same page
Oh!, thanks. Actually I don't know ajax that's why these problems. Got it.
Re: showing php result in same page
First off, place all code in code blocks.
Second, like mentioned, use AJAX, it's a good way of interacting with the server without the need for refreshing.
Here's some code.
Your reworked HTML:
The contents of script.js:
And lastly, the PHP code if demo.php:
Second, like mentioned, use AJAX, it's a good way of interacting with the server without the need for refreshing.
Here's some code.
Your reworked HTML:
Code: Select all
<!doctype html>
<html>
<head>
<title>AJAX</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<style type="text/css">
.error { color: red; }
.success { color: green; }
.bold { font-weight: bold; }
</style>
</head>
<body>
<div>
<form action="demo.php" method="post" id="myForm">
<p>Name: <input name="name" id="name" type="text"></p>
<p>Email: <input name="email" id="email" type="email"></p>
<p><input type="submit" value="click me" id="submit"></p>
</form>
</div>
<p><span id="return">Some other page contents</span></p>
</body>
</html>Code: Select all
$(function()
{
// Grab submit button event
$("#submit").on('click', function()
{
// get form and location from form and method
var form = $("#myForm"),
location = form.attr("action"),
method = form.attr("method");
// Ajax call to the location
// It's method gotten from the form
// Sent as JSON, and returned as JSON from location
$.ajax({
url: location,
type: method,
data: form.serialize(),
dataType: 'json',
cache: false,
// AJAX call success, parse data received
success: function(data, status, xhr)
{
if(data.error === true)
{
// location returned error, adjust look to reflect this
$("#return").html("Error: " + data.message).removeClass().addClass("error bold");
}
else
{
// location returned success, adjust look to reflect this
$("#return").html(data.message).removeClass().addClass("success bold");
}
},
// AJAX call failed
error: function(xhr, status, errorThrown)
{
$("#return").html("An internal error occured: " + errorThrown).removeClass().addClass("error bold");
}
});
// Prevent form from submitting normally
return false;
});
});Code: Select all
<?php
// Get name and email from $_POST
$name = trim($_POST["name"]);
$email = trim($_POST["email"]);
// Set return defaults
$return["error"] = true;
$return["message"] = "";
// if $name is empty, make user supply it
if(empty($name))
$return["message"] = "Please supply your name!";
// if $email is empty, make user supply it
else if(empty($email))
$return["message"] = "Please supply your email!";
// All is well, return some nice message
else
{
$message = "Your submission was received<br><br>";
$message .= "Your name: " . $email . "<br>";
$message .= "Your email: " . $email . "<br>";
$return = array(
"error" => false, // set error = false, there's no error here
"message" => $message
);
}
// echo out JSON
echo @json_encode($return);- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
Re: showing php result in same page
Lots of thanks @Pazuzu156 for detailed explanation. It will help me lot.
Re: showing php result in same page
You're welcome. Sometimes, actual code teaches better than being told. And welcome to the forums.
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156