showing php result in same page

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
masho
Forum Newbie
Posts: 3
Joined: Tue Jul 28, 2015 12:01 pm

showing php result in same page

Post by masho »

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
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: showing php result in same page

Post by Celauran »

What have you tried? Where are you running into problems?
User avatar
twinedev
Forum Regular
Posts: 984
Joined: Tue Sep 28, 2010 11:41 am
Location: Columbus, Ohio

Re: showing php result in same page

Post by twinedev »

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.
masho
Forum Newbie
Posts: 3
Joined: Tue Jul 28, 2015 12:01 pm

Re: showing php result in same page

Post by masho »

Oh!, thanks. Actually I don't know ajax that's why these problems. Got it.
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: showing php result in same page

Post by Pazuzu156 »

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:

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>
The contents of script.js:

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;
	});
});
And lastly, the PHP code if demo.php:

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
masho
Forum Newbie
Posts: 3
Joined: Tue Jul 28, 2015 12:01 pm

Re: showing php result in same page

Post by masho »

Lots of thanks @Pazuzu156 for detailed explanation. It will help me lot.
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: showing php result in same page

Post by Pazuzu156 »

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
Post Reply