...

View Full Version : Passing variable between PHP and HTML/Javascript



lld
03-02-2012, 08:09 AM
Hi,

I am pretty new to PHP here. Please help me with the following problem.

I am currently designing a webpage. I have put a few icons in my page. I would like the body portion of my page responds to the icon the user click on the page.

The solution I came up so far is like this. I included a onclick event for each icon. Upon clicking, I would call a javascript function.

Here is a portion of my code:


<center>
<ul id="nav" >
<li class="current"><img src="images/applespheregreen.png" width="55" height="55" onclick='mainPage()'/></li>

<li><a><img src="images/magnifier.png" width="45" height="45" title='Search' onClick='searchRecord()'></a></li>

<li><a><img src="images/plus.png" width="45" height="45" title='Add Record' onClick='addRecord()'></a></li>

</ul>
</center>

<div id ="viewtype">

<?php


require_once "Add_view.php";

?>


</div>


I had a very difficult time figuring out how I can possibly use a parameter to require different php files in the PHP code.

Can someone help me with this?

Thanks a lot!

lld
03-02-2012, 10:06 AM
I guess I can use javascript function to change one of the html elements' value. However, I am wondering how I can get that value in PHP and then use a simple if else to get the page I need.

Very appreciated if anyone can enlighten me on this.

smerlinr
03-02-2012, 01:22 PM
I guess I can use javascript function to change one of the html elements' value. However, I am wondering how I can get that value in PHP and then use a simple if else to get the page I need.

Very appreciated if anyone can enlighten me on this.

If you want the content of the body to change, you can set a hidden field on clicking the icon using javascript say '1' on clciking icon 1, '2' on clicking icon 2.

Then get the value of the hidden field on page load after clicking the icon, using php and based on that value, you can show corresponding content.

themousemaster
03-02-2012, 01:24 PM
I guess I can use javascript function to change one of the html elements' value. However, I am wondering how I can get that value in PHP and then use a simple if else to get the page I need.

Very appreciated if anyone can enlighten me on this.

PHP code is done on the server, and is (by definition) finsihed running when the server "serves" the page to the client.

Javascript code runs on the client only.


Therefore, as far as passing variables on the same page, it can only be done PHP -> Javascript, not the other way around.

For Javascript to get a variable "into" PHP, you'd have to pass the variable in a form, and reload the page.

lld
03-02-2012, 01:27 PM
If you want the content of the body to change, you can set a hidden field on clicking the icon using javascript say '1' on clciking icon 1, '2' on clicking icon 2.

Then get the value of the hidden field on page load after clicking the icon, using php and based on that value, you can show corresponding content.

Hi Smerlinr,

Thanks for the reply. Yes, that is exactly where I am stopped. I can use javascript to assign a value to a hidden element. However, how do I retrieve that value then in PHP since it is a value of a HTML element?

lld
03-02-2012, 01:35 PM
PHP code is done on the server, and is (by definition) finsihed running when the server "serves" the page to the client.

Javascript code runs on the client only.


Therefore, as far as passing variables on the same page, it can only be done PHP -> Javascript, not the other way around.

For Javascript to get a variable "into" PHP, you'd have to pass the variable in a form, and reload the page.

Thanks for the explanation themousmaster. Here is something I have done:



<div id="viewtype"
<form name="changetype" method="get">
<input type="hidden" id="type" value="">

<?php
$type = $_GET['type'];
if($type == "Add")
require_once "add_view.php";
?>
</div>


I will use a javascript function to alter the value of 'type' element.

But it doesn't work... Would you help me see what went wrong?

Thank you.

Keleth
03-02-2012, 02:07 PM
I assume that isn't your whole code? The div isn't closed (as on the yah itself) and you don't have a close form tag. Otherwise why its not working depends on what its meant to do. You need to provide more details. The open tags are likely the issue, depending you're js. You should look into a framework... jQuery is my fav... Makes js dev much easier.

Get Firebug.. Its amazing for debugging when you have js altering the page.

also, its not true that data can only go from js to php with a form... In fact, its say the preferred way is AJAX.

lld
03-02-2012, 02:20 PM
I assume that isn't your whole code? The div isn't closed (as on the yah itself) and you don't have a close form tag. Otherwise why its not working depends on what its meant to do. You need to provide more details. The open tags are likely the issue, depending you're js. You should look into a framework... jQuery is my fav... Makes js dev much easier.

Get Firebug.. Its amazing for debugging when you have js altering the page.

also, its not true that data can only go from js to php with a form... In fact, its say the preferred way is AJAX.

Hi Keleth, sorry for the syntax. I do not have the code right now, so these are only typed sentences. But in my real code, the tags are closed.

Do you mean using xmlhttp.open();? I tried this also, but it does not work right. I will give it a try again later.

Keleth
03-02-2012, 03:31 PM
Well, AJAX is more complicated then simply calling one function. Google it, there are plenty of guides.

Like I said though, look into a framework. While doing an AJAX call with vanilla JS takes a few calls, with jQuery its as simple as $.post(fileLoc, { variables to pass }, function () { what to do when the call completes });. It also makes DOM manipulation a breeze. Its generally good methodology to not have your JS inline... put it in a separate file, or worse case, in a separate block at the bottom of your code, before the body close.

Like I said, without knowing exactly what you're trying to do and what is not working, can't really give advice. Assuming everything is closed properly and validates, all I can say is debug your code via alerts or writing to the page. I don't see any issue with your PHP, so this seems like a JS issue now, not a PHP one.

anotherJEK
03-03-2012, 02:39 AM
On the client side:


var someVar = <?php print $yourPhpVar; ?>

Then use javascript to add a query to the url



<?php
$fileName = basename($_SERVER['PHP_SELF']); // the file now knows its own name;
?>
// later on in the file
// write a link with the url set to
<a href="<php? print $fileName>"/?var=value>
//this link will redirect you to the same page, then
<?php
$value = '';
if($_GET['var'])
{
$value = $_GET['var']; // now you have a variable sent from the page
}
// This is the general approach, you will have to figure out specifics.
?>

lld
03-04-2012, 03:45 AM
Hi guys, thanks for the help. I have finally solved it using AJAX. Here is my code:



<center>
<ul id="nav" >
<li class="current"><img src="images/applespheregreen.png" width="55" height="55" onclick='mainPage()'/></li>

<li><a><img src="images/magnifier.png" width="45" height="45" title='Search' onClick='searchRecord()'></a></li>

<li><a><img src="images/plus.png" width="45" height="45" title='Add Record' onClick='addRecord()'></a></li>

</ul>
</center>

<div id ="viewtype">

</div>



Then I hava a javascript function addRecord() to change the page view:



function addRecord()
{
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("viewtype").innerHTML=xmlhttp.responseText;
}
}

xmlhttp.open("GET","Add_view.php",true);
xmlhttp.send();

}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum