AJAX

Passing variables to and from PHP

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Aug 2005

Posts: 279

Reputation: J_Search is an unknown quantity at this point

Solved Threads: 6

J_Search

Offline

Posting Whiz in Training

Passing variables to/from JS w/ PHP

Jun 7th, 2006

All,

Here is some JavaScript I found. It creates a small scrollbar, which allows a user to scroll though a series of 5 images. The images represent votes, and the user can then press a "Rate us" button in order to cast a vote. As you can see in the code, followed by the images loading section, the default image/rating is set at 5. I would like to dynamically change this with a value stored in MySQL by passing the variable via PHP. I would again like to pass the new variable (the image/rating the user chose before selecting the submit button) to MySQL via PHP again. I'm not sure if this is even possible, but I thought I'd ask. I don't know JavaScript, so I'm sorry if this a noob question, cause I am. I do know PHP and MySQL though.

I'm open to other options as well. But I really like the idea of a small scrollbar and the ability to scroll through a series of images and cast a vote based on the image chosen. Could this be done in Flash? If JavaScripts work, I'd rather use that, cause I've got all the code right in front of me.

.... and now you.

Here is the code. I've also zipped and attached a working version. Just unzip the folder and htm file, and run the index.htm file.

Thanks!!!

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
var	set_action = "";
var	set_path	= "images/";
var	set_id="<!--%ID%-->";
var	set_spacer 	= "spacer.gif";
var	set_scroll 	= "f0.gif";
var	set_thumb 	= "f1.gif";
var	set_rate1	= "1.gif";
var	set_rate2	= "25.gif";
var	set_rate3	= "5.gif";
var	set_rate4	= "75.gif";
var	set_rate5	= "10.gif";
var	set_mark1	= "1";
var	set_mark2	= "2";
var	set_mark3	= "3";
var	set_mark4	= "4";
var	set_mark5	= "5";
var	set_text	= "";
var	set_submit	= "Rate us";
//SETTINGS END
var gotkl = 0;
var path = set_path;
var index = 0;
var firstTime = true;
var img_f = new Array();
img_f[0] = new Image();
img_f[1] = new Image();
img_f[0].src= path + set_scroll;
img_f[1].src= path + set_thumb;
//Files with images 
var img_p = new Array();
img_p[1] = new Image();
img_p[2] = new Image();
img_p[3] = new Image();
img_p[4] = new Image();
img_p[5] = new Image();
set_spacer 	=path + set_spacer;
img_p[1].src=path + set_rate1
img_p[2].src=path + set_rate2
img_p[3].src=path + set_rate3
img_p[4].src=path + set_rate4
img_p[5].src=path + set_rate5
function imgonload() 
{
// I need to be able to set this value dynamically.  Currently it is statically set to 5. 
 document.id_pn.src = img_p[5].src;
}
flg = (document.all) ? 0 : 1;
var obj;
var dx,dy;
var flag = false;
function mousedown(ev) 
{
 if (flg) 
 {
  X=ev.clientX;
  Y=ev.clientY;
  return false;
 }
 else 
 {
  X=event.clientX;
  Y=event.clientY;
 }
}
function mousemove(ev) 
{
 if (flag) 
 {
 
  if (flg) 
  {
  X2=ev.clientX;
  Y2=ev.clientY;
  }
  else 
  {
  X2=event.clientX;
  Y2=event.clientY;
  }
dy=Y2-Y;
var dh=document.id_spacer.height+dy;
 
if (dh>-1 && document.id_spacer.height+dy<document.id_pn.height-7) {
 
document.id_spacer.height = document.id_spacer.height+(Y2-Y);
Y=Y2;
};
if (dh<=-1)
     {
     document.id_spacer.height=1;
     }
if (dh>=document.id_pn.height-7)
     {
     document.id_spacer.height=document.id_pn.height-8;
     }
var mark=Math.floor(document.id_spacer.height/(document.id_pn.height/5));
//alert(mark);
mark=5-mark;
document.id_pn.src = img_p[mark].src
document.post_form.rate.value=mark;
//window.status=mark;
return false;
  }
}
function mouseup() 
{
 obj = null;
 flag = false;
}
if (flg) 
{
  document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = mousedown;
document.onmousemove = mousemove;
document.onmouseup = mouseup;
document.write(""+
"<table border='0' cellspacing='0' cellpadding='0' width='100px'>"+
"	<tr>"+
"		<td align='center'>"+
"		<img align='middle' name='id_pn'>"+
"		</td>"+
"		<td id='scroll_cell' align='center' valign='top' width='20' background='"+img_f[0].src+"'>"+
"<table border=0 cellspacing='0' cellpadding='0'><tr><td><img border=0 name='id_spacer' width='20' height='0' src='"+set_spacer+"'></td></tr><tr><td><img width='20' height='8' border='0' id='id_pil' src='"+img_f[1].src+" 'style='cursor : hand;' onMouseDown='flag = true;' ></td></table>"+
"		</td>"+
"	</tr>"+
"<form action='"+set_action+"' method='post' name='post_form'>"+
"	<tr>"+
"		<td colspan='2' style='padding: 2px' align='left'>"+
"	<input style='width:80%' type='submit' value='"+set_submit+"'>"+
"	<input type='hidden' name='ID' value='"+set_id+"'><input type='hidden' name='rate' value='5'>"+
"		</td>"+
"	</tr></form></table>");
imgonload();
//-->")));
var	set_action = "";
var	set_path	= "images/";
var	set_id="<!--%ID%-->";
var	set_spacer 	= "spacer.gif";
var	set_scroll 	= "f0.gif";
var	set_thumb 	= "f1.gif";
var	set_rate1	= "1.gif";
var	set_rate2	= "25.gif";
var	set_rate3	= "5.gif";
var	set_rate4	= "75.gif";
var	set_rate5	= "10.gif";
var	set_mark1	= "1";
var	set_mark2	= "2";
var	set_mark3	= "3";
var	set_mark4	= "4";
var	set_mark5	= "5";
var	set_text	= "";
var	set_submit	= "Rate us";
//SETTINGS END
var gotkl = 0;
var path = set_path;
var index = 0;
var firstTime = true;
var img_f = new Array();
img_f[0] = new Image();
img_f[1] = new Image();
img_f[0].src= path + set_scroll;
img_f[1].src= path + set_thumb;
//Files with images 
var img_p = new Array();
img_p[1] = new Image();
img_p[2] = new Image();
img_p[3] = new Image();
img_p[4] = new Image();
img_p[5] = new Image();
set_spacer 	=path + set_spacer;
img_p[1].src=path + set_rate1
img_p[2].src=path + set_rate2
img_p[3].src=path + set_rate3
img_p[4].src=path + set_rate4
img_p[5].src=path + set_rate5
function imgonload() 
{
// I need to be able to set this value dynamically.  Currently it is statically set to 5. 
 document.id_pn.src = img_p[5].src;
}
flg = (document.all) ? 0 : 1;
var obj;
var dx,dy;
var flag = false;
function mousedown(ev) 
{
 if (flg) 
 {
  X=ev.clientX;
  Y=ev.clientY;
  return false;
 }
 else 
 {
  X=event.clientX;
  Y=event.clientY;
 }
}
function mousemove(ev) 
{
 if (flag) 
 {

  if (flg) 
  {
  X2=ev.clientX;
  Y2=ev.clientY;
  }
  else 
  {
  X2=event.clientX;
  Y2=event.clientY;
  }
dy=Y2-Y;
var dh=document.id_spacer.height+dy;

if (dh>-1 && document.id_spacer.height+dy<document.id_pn.height-7) {

document.id_spacer.height = document.id_spacer.height+(Y2-Y);
Y=Y2;
};
if (dh<=-1)
     {
     document.id_spacer.height=1;
     }
if (dh>=document.id_pn.height-7)
     {
     document.id_spacer.height=document.id_pn.height-8;
     }
var mark=Math.floor(document.id_spacer.height/(document.id_pn.height/5));
//alert(mark);
mark=5-mark;
document.id_pn.src = img_p[mark].src
document.post_form.rate.value=mark;
//window.status=mark;
return false;
  }
}
function mouseup() 
{
 obj = null;
 flag = false;
}
if (flg) 
{
  document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = mousedown;
document.onmousemove = mousemove;
document.onmouseup = mouseup;
document.write(""+
"<table border='0' cellspacing='0' cellpadding='0' width='100px'>"+
"	<tr>"+
"		<td align='center'>"+
"		<img align='middle' name='id_pn'>"+
"		</td>"+
"		<td id='scroll_cell' align='center' valign='top' width='20' background='"+img_f[0].src+"'>"+
"<table border=0 cellspacing='0' cellpadding='0'><tr><td><img border=0 name='id_spacer' width='20' height='0' src='"+set_spacer+"'></td></tr><tr><td><img width='20' height='8' border='0' id='id_pil' src='"+img_f[1].src+" 'style='cursor : hand;' onMouseDown='flag = true;' ></td></table>"+
"		</td>"+
"	</tr>"+
"<form action='"+set_action+"' method='post' name='post_form'>"+
"	<tr>"+
"		<td colspan='2' style='padding: 2px' align='left'>"+
"	<input style='width:80%' type='submit' value='"+set_submit+"'>"+
"	<input type='hidden' name='ID' value='"+set_id+"'><input type='hidden' name='rate' value='5'>"+
"		</td>"+
"	</tr></form></table>");
imgonload();
//-->")));

Last edited by J_Search; Jun 7th, 2006 at 5:51 pm. Reason: Incorrect title

Attached Files

JavaScript_Rater.zip (21.4 KB, 11 views)

j_
FunnyAssBlog.com|||RealJobDescriptions.com|||People of Public Transit|||AutoCompleteFail|||Sucker-Fish|||Blacklisted Cards

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: Passing variables to and from PHP

Jun 8th, 2006

You cannot pass variables, per se, between JavaScript and PHP. However, your PHP script can certainly author JavaScript, including JavaScript variables. I hope that makes sense, because it's late and I don't feel like debugging all that code you posted. Thanks for using code tags, though!

Seriously, with your JavaScript, use PHP to simpy "echo" the JavaScript variable.