Page 1 of 1

showing php result in same page

Posted: Tue Jul 28, 2015 12:08 pm
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

Re: showing php result in same page

Posted: Tue Jul 28, 2015 1:00 pm
by Celauran
What have you tried? Where are you running into problems?

Re: showing php result in same page

Posted: Tue Jul 28, 2015 4:19 pm
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.

Re: showing php result in same page

Posted: Wed Jul 29, 2015 2:24 am
by masho
Oh!, thanks. Actually I don't know ajax that's why these problems. Got it.

Re: showing php result in same page

Posted: Fri Jul 31, 2015 2:27 am
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);

Re: showing php result in same page

Posted: Fri Jul 31, 2015 10:47 am
by masho
Lots of thanks @Pazuzu156 for detailed explanation. It will help me lot.

Re: showing php result in same page

Posted: Fri Jul 31, 2015 12:52 pm
by Pazuzu156
You're welcome. Sometimes, actual code teaches better than being told. And welcome to the forums.