Pass JavaScript variable to PHP

jpindi · Sep 9, 2009

I have some code that worked not bad, until I've added PHP to it. The problem may be with right around line 12 where I am trying to get the variable in the first place:

Code:

function expander(RecordID){

The other possibility is where the element ID is assigned:

Code:

 echo "<img id='".$row['IDNumber']."' src=".$row['ImagePath']." width='5%' onMouseOver='expander(".$row['IDNumber'].");' onMouseOut='shrinker(".$row['IDNumber'].");'>";}

Using some cleverly placed alert boxes the only thing that is getting passed forward is "[object HTMLImageElement]" but not the element ID.

Shouldn't need AJAX because I am NOT trying to pass JavaScript variable to PHP. Rather, it is the other way around, which should be kosher.

Here is the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="class.css" />
<script type = "text/javascript" language="javascript">
//<![CDATA[
var maxheight = 150;

var countShrink = 1;
function expander(RecordID){	
	alert(RecordID);
	var countGrow = 1;
		var pic = document.getElementById(RecordID);
		if(pic){
			var imageh = pic.height;
			var imagew = pic.width;

	if(imageh<100){
	countGrow++;
	imageh = imageh*1.2;
	imagew = imagew*1.2;
	pic.style.height = imageh + "px";
	pic.style.width = imagew + "px";
	var timer = window.setTimeout(function(){expander(RecordID);},2);}
	}
		else
			{alert("error on");}


}

function shrinker(RecordID){
			var pic = document.getElementById(RecordID);
		if(pic){var counter = 1
			var imageh = pic.height;
			var imagew = pic.width;

	if(imageh>20){
	imageh = imageh/1.2;
	imagew = imagew/1.2;
	pic.style.height = imageh + "px";
	pic.style.width = imagew + "px";
	var timer = window.setTimeout(function(){shrinker(RecordID);},3);}
	}
		else
			{alert("error off");}

	}
	
//]]>
</script>
</head>
<body>
<?php
include('menuSub.html');
require_once('connect.php');
$idnum = 'phmdv06tbu';
//$q="SELECT * FROM art WHERE IDNumber = '".$idnum."'";
$q="SELECT * FROM art ORDER BY IDNumber LIMIT 4";
$r = @mysqli_query ($dbc, $q);

echo "<div class='bodyContent'><div class='imageContent'>";
if($r){
	while ($row = mysqli_fetch_array($r,MYSQLI_ASSOC)){
echo "<img id='".$row['IDNumber']."' src=".$row['ImagePath']." width='5%' onMouseOver='expander(".$row['IDNumber'].");' onMouseOut='shrinker(".$row['IDNumber'].");'>";}
}
else{
echo '<div class="bodyContent"> Error<div>';
}
echo "</div></div>";
mysqli_close($dbc); ?>
</body>
</html>

jpindi · Sep 9, 2009

And also as promised here is a cut-and-paste of what the code looks like in IE:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="class.css" />
<script type = "text/javascript" language="javascript"> 
//<![CDATA[
var maxheight = 150;
 
var countShrink = 1;
function expander(RecordID){ 
 alert(RecordID);
 var countGrow = 1;
  var pic = document.getElementById(RecordID);
  if(pic){
   var imageh = pic.height;
   var imagew = pic.width;
 
 if(imageh<100){
 countGrow++;
 imageh = imageh*1.2;
 imagew = imagew*1.2;
 pic.style.height = imageh + "px";
 pic.style.width = imagew + "px";
 var timer = window.setTimeout(function(){expander(RecordID);},2);}
 }
  else
   {alert("error on");}
 
 
}
 
function shrinker(RecordID){
   var pic = document.getElementById(RecordID);
  if(pic){var counter = 1
   var imageh = pic.height;
   var imagew = pic.width;
 
 if(imageh>20){
 imageh = imageh/1.2;
 imagew = imagew/1.2;
 pic.style.height = imageh + "px";
 pic.style.width = imagew + "px";
 var timer = window.setTimeout(function(){shrinker(RecordID);},3);}
 }
  else
   {alert("error off");}
 
 }
 
//]]>
</script>
</head>
<body>
 
<script type="text/javascript"> 
//<![CDATA[
window.onload=starter;
function starter(){
 collapseMenu();
// SetUpAnimation();
  }
 
function SetUpAnimation(){
 
 if (document.querySelectorAll)
  {
  labels = document.querySelectorAll('div.label');
   }
  else if (document.getElementsByClassName)
   {
  labels = document.getElementsByClassName('label');
  }
//loops through the labels
 if (labels){
    for (var i=1; i <= labels.length; i++)
     { 
      SlideIn(i);
     }
    }
}
 var endPos = 100;
 var currentPos = -150;
 var delayT = 1
 
function SlideIn(label_id_no){
 var label_id_fixed = label_id_no;
 
 var label_id_name = "label" + label_id_fixed;
 if (currentPos<endPos){
 currentPos +=1
 if (currentPos > 0) {delayT +=1;}
// Math.round(delayT)
  document.getElementById(label_id_name).style.left = currentPos + "px";
  var timer = window.setTimeout(function(){SlideIn(label_id_no);}, delayT);
  
  
}
 
//need this otherwise the little blocks are off each other by 1 pixel
if (currentPos==endPos){
  document.getElementById(label_id_name).style.left = currentPos + "px";
  
  }
}
 
function collapseMenu(){
 var elems = null;
 var labels = null;
 if (document.querySelectorAll)
  {
  elems = document.querySelectorAll('div.elements');
  labels = document.querySelectorAll('div.label');
}
  else if (document.getElementsByClassName)
   {   
  elems = document.getElementsByClassName('elements');
  labels = document.getElementsByClassName('label');
   }
if (elems){
    for (var i=0; i < elems.length; i++)
    {
    elems[i].style.display="none";
    }
   for (var i=0; i < labels.length; i++)
    {
   labels[i].onclick=showBlock;
    }
  }
}
 
function showBlock(evnt){
 var theEvent = evnt ? evnt : window.event;
 var theSrc = theEvent.target ? theEvent.target: theEvent.srcElement;
 var itemId = "elements" + theSrc.id.substr(5,1);
 var item = document.getElementById(itemId);
 if (item.style.display=='none'){
  item.style.display='block';
 }else{
  item.style.display='none';
 }
}
//]]>
</script>
</head>
<body><div class="label" id="label1">home</div>
<div class="label" id="label2">portfolios</div>
<div class="elements" id="elements2">
<p>metallic c-prints</p><br />
<p>product photography</p><br />
<p>faces<br />
</div>
<div class="label" id="label3">about me</div>
<div class="elements" id="elements3">
<p>biography</p><br />
<p>c.v.</p><br />
<p>contact</p><br />
</div>
</body>
<div class='bodyContent'><div class='imageContent'><img id='paaex05tad' src=images/ArcticDream.jpg width='5%' onMouseOver='expander(paaex05tad);' onMouseOut='shrinker(paaex05tad);'><img id='paanu02tpp' src=images/PortraitOfP.jpg width='5%' onMouseOver='expander(paanu02tpp);' onMouseOut='shrinker(paanu02tpp);'><img id='paapo00trb' src=images/RedBanting.jpg width='5%' onMouseOver='expander(paapo00trb);' onMouseOut='shrinker(paapo00trb);'><img id='paapo02tbb' src=images/BlueBanting.jpg width='5%' onMouseOver='expander(paapo02tbb);' onMouseOut='shrinker(paapo02tbb);'></div></div></body>
</html>

jpindi · Sep 9, 2009

Ok I got it fixed. The problem was it didn't like what I was doing with the brackets for the onMouseOver and onMouseOut events.

I added single quotation marks in the function brackets and voila all ok. I have to tweak what the JavaScript actually does, but at least this part is squared away.

Here is the code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="class.css" />
<script type = "text/javascript" language="javascript">
//<![CDATA[
var maxheight = 150;

var countShrink = 1;
function expander(RecordID){	

	var countGrow = 1;
		var pic = document.getElementById(RecordID);
		if(pic){
			var imageh = pic.height;
			var imagew = pic.width;

	if(imageh<100){
	countGrow++;
	imageh = imageh*1.2;
	imagew = imagew*1.2;
	pic.style.height = imageh + "px";
	pic.style.width = imagew + "px";
	var timer = window.setTimeout(function(){expander(RecordID);},2);}
	}
		else
			{alert("error on");}


}

function shrinker(RecordID){
			var pic = document.getElementById(RecordID);
		if(pic){var counter = 1
			var imageh = pic.height;
			var imagew = pic.width;

	if(imageh>20){
	imageh = imageh/1.2;
	imagew = imagew/1.2;
	pic.style.height = imageh + "px";
	pic.style.width = imagew + "px";
	var timer = window.setTimeout(function(){shrinker(RecordID);},3);}
	}
		else
			{alert("error off");}

	}
	
//]]>
</script>
</head>
<body>
<?php
include('menuSub.html');
require_once('connect.php');
$idnum = 'phmdv06tbu';
//$q="SELECT * FROM art WHERE IDNumber = '".$idnum."'";
$q="SELECT * FROM art ORDER BY IDNumber LIMIT 4";
$r = @mysqli_query ($dbc, $q);

echo "<div class='bodyContent'><div class='imageContent'>";
if($r){
	while ($row = mysqli_fetch_array($r,MYSQLI_ASSOC)){
?>
<img id= "<?=$row['IDNumber']?>" src="<?=$row['ImagePath']?>" width="5%" onMouseOver="expander('<?=$row['IDNumber']?>');" onMouseOut="shrinker('<?=$row['IDNumber']?>');">
<?php
	}
}

else{
echo '<div class="bodyContent"> Error<div>';
}
echo "</div></div>";
mysqli_close($dbc); ?>
</body>
</html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Pass JavaScript variable to PHP

jpindi

Programmer

jpindi

Programmer

jpindi

Programmer

Similar threads

Part and Inventory Search

Sponsor