Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 5084

Jun 7th, 2006

Passing variables to/from JS w/ PHP

Expand Post »

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!!!

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();
//-->")));

Attached Files

JavaScript_Rater.zip (21.4 KB, 40 views)

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

Similar Threads

text field values to php variable....... in PHP
Problem passing variables to thread in Perl
passing session in PHP
function passing variables in C
passing variables threw query in MySQL

J_Search

Reputation Points: 27

Solved Threads: 6

Posting Whiz in Training

Offline

284 posts
since Aug 2005

Permalink

Jun 8th, 2006

Re: Passing variables to and from PHP

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.

tgreer

Team Colleague

Reputation Points: 227

Solved Threads: 37

Made Her Cry

Offline

1,697 posts
since Dec 2004

Permalink

Jun 10th, 2006

Re: Passing variables to and from PHP

Alright, I'll get right on that. Anyone else?

J_Search

Reputation Points: 27

Solved Threads: 6

Posting Whiz in Training

Offline

284 posts
since Aug 2005

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Processing Checkbox Information From A Form

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Where do you get this WYSIWYG editor on DaniWeb

DaniWeb Message

Cancel Changes

User Name
Password