JavaScripters,

This question is in regards to a JavaScript script within a PHP page. I included everything in case a complete understanding is required for a correct response.

Thanks in advance.

****INFO****
Rater.php has a JavaScript script, which displays an interactive rating tool. It allows a user to slide a bar up and down while it displays various images that represent various rating levels. We'll call this the “selector". For example, an image of 5 stars represents the rating value of 5. There is a submit button, which interestingly enough submits the chosen rating. And we'll cleverly call this the "submit button". There is only one "selector" and one submit button.

****QUESTION****
Is there any way to create two "selectors" and have only one submit button? Essentially, having each of the selectors for rating two items, but only having to press one submit button, rather than the obvious scenario of selecting twice and submitting twice.

PHEW, hope someone reads this.

Here’s the code:

<?php
$ID = $_POST["ID"];
$rate = $_POST["rate"];
if (!isset($_POST['rate'])) {
?>

<html>
<head>
</head>
<body>

<script language="javascript" type="text/javascript">
var	set_action 	= "<?php echo $PHP_SELF;?>";
var	set_id		= "000000000"; ////Future:<?PHP echo $IMAGE_ID;?>, but 0X9 for now.
var	set_path	= "images/";
var	set_spacer 	= "spacer.gif";
var	set_scroll 	= "f0.gif";
var	set_thumb 	= "f1.gif";
var	set_rate1	= "1.gif";
var	set_rate2	= "2.gif";
var	set_rate3	= "3.gif";
var	set_rate4	= "4.gif";
var	set_rate5	= "5.gif";
var	set_mark1	= "1";
var	set_mark2	= "2";
var	set_mark3	= "3";
var	set_mark4	= "4";
var	set_mark5	= "5";
var	set_text	= "set_text";
var	set_submit	= "Rate";
//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() 
{
 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;
num = 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();
//-->")));
</script>

<?
} else {
echo "ID: ";
echo $ID;
echo "<br /><br />";
echo "Rate: ";
echo $rate;
}
?>

</body>
</html>

have you seen the yahoo 'launchcast' station music rating? it uses that crazy macromedia stuff to implement its ratings, but these days you can eliminate around 10% of your audience by using AJAX to do the same thing!

then the user selects their rating or selector or whatever and they never push any silly 'submit' button.

the simple answer is "YES" I am sure there is a way of doing what you ask... but all your code was in PHP... you should post the html output, then anyone can load it.

cheers.

have you seen the yahoo 'launchcast' station music rating? it uses that crazy macromedia stuff to implement its ratings, but these days you can eliminate around 10% of your audience by using AJAX to do the same thing!

No, I haven’t seen launchcast ratings. But nonetheless, I know even less “macromedia stuff” aka flash, therefore that’s of no help. AJAX is also not a relevant alternative. There will be two items per page to vote for. I want the user to be able to do one of three things. Vote twice, vote once, or not at all. Hence the need for the “silly submit button”.

but all your code was in PHP... you should post the html output, then anyone can load it.

There are only 9 lines of php code. The majority of the code is in JavaScript, followed by HTML, then PHP. The output is 2 lines. I didn't think it was necessary to post the output, and I doubt anyone who has the ability to answer the question would disagree.

the simple answer is "YES" I am sure there is a way of doing what you ask.

As you finally realized the point of my post…if the answer is "yes" then how do I do it?

I'm only concerned about the JavaScript and of course the html form. I included the php, albeit small amount, because I wanted the reader to have a complete understanding of the script.

I want to thank you for your post. However, I’d rather be helped with my current situation (modifying the JavaScript; see the title of this thread "Help modify some JavaScript/HTML") rather than fielding submitted alternatives. Unless, of course, there is no way to perform the task I would like with the current method.

interesting... I guess I could remove the php code, load it in a web browser, take a look at your problem and find a solution for you.

No one said you had to do anything. If you know the answer, great. Otherwise, there is no reason for your to post on this thread.

Yes, It is pretty simple to put two elements in a form. You will have a little problem with your code, because you don't have a very 'object-oriented' structure. It is very procedural.

What I mean is that you have overriden the event listeners and then when you move the mouse on the slider you set a 'flag' variable, indicating you should redraw the slider and stars. The nasty way of putting in two sliders: add another complete set of variables into your code and duplicate your algorithm. I.e. use flag and flag1.

The nice way of implmenting the code would be to write functions that you could pass the image object to and manipulate the other objects accordingly, this could be extended past 2 sliders on a page.

You will also need to add the correct elements to your form, so you know what people select.

Now a design question, why use the slider? Why not implement the code on your stars and let the user drag the mouse over the stars, the algorithm is the same no?

I like the slide bar, only because it allows me to use images. My purpose is to utilize icons vs numbers for the rating system. The icons are rather large and to boot, there are 10. Therefore, I can't just lay them out. So it would be beneficial if they appeared in the same place, one at a time, to save space. However, as you are pointing out, the code is inefficient. Unfortunately, I didn't write the code, and I wouldn't know how to make it efficient.

To fix the issue, I thought of using a very simple JavaScript function to mouseover hyperlinks to change the image, rather than the current, obviously overcomplicated method. Here is an example. Take a look at the top left menu. That's something I'm looking to do, on one condition. I know that the images are given values by the JS, so I was hoping I could tie the mouseover effect in with a submission form. Is there a way to post the mousover value using a form? This way, I could have users just mouse over one of the vertical links, then press a submit button. Of course I would need two sets of vertical links and one submit button, but I first need to know if this is even possible. Otherwise, I'll just have to see about re-writing the first, more complicated, version.

Thanks,

Yes it is all possible (if I understand what your saying).

I think you are saying you were thinking about setting the value with a mouse over event? This is actually very similar to how it is now, you wouldn't have to change much to make it work as mouseover instead of mouse drag.

Also, you can now manipulate all objects in your html document using javascript. When the user alters the image dragging the mouse, just set the value of the hidden objects in the form. They will all have names, and can be accessed using these names.

document.ID.value = "whatever";

Something like this can be called to set the value in the form.

This is actually very similar to how it is now, you wouldn't have to change much to make it work as mouseover instead of mouse drag.

Remember, the code works fine now. The only reason to change the code is to be able to put 2 raters on the same page with one submit button. But I don't know how. It's certainly not a matter of copying and pasting, because I've already tried that, haha.

My second idea was to completely forget about the first method (slide bar) and utilize a mouseover script to get a similar effect.

(In theory) Let say for example I have five links (#ed 1-5) and each link has a mousein value corresponding to the appropriate image. Most mouseover JS scripts have a mouseout image value to go to by default whenever your mouse leaves. I'll just ignore that. This way, the current variable will be the last variable chosen by the visitor. I'll just have to include both "raters" in one form. That way I can post both values (mounsein1 and mousein2) at once. So, do you think this is possible? If so, I think it will be a better alternative than the first method.

<html>
<head></head>
<body>
<script language="javascript" type="text/javascript">
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	= "2.gif";
var	set_rate3	= "3.gif";
var	set_rate4	= "4.gif";
var	set_rate5	= "5.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	= "Vote";
//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() {
 document.id_pn.src = img_p[5].src;
 document.id_pn1.src = img_p[5].src;
}

flg = (document.all) ? 0 : 1;
var obj;
var dx,dy;
var flag = false;
var flag1 = 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;
  }
  else if (flag1) 
 {

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

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

document.id_spacer1.height = document.id_spacer1.height+(Y2-Y);
Y=Y2;
};
if (dh<=-1)
     {
     document.id_spacer1.height=1;
     }
if (dh>=document.id_pn1.height-7)
     {
     document.id_spacer1.height=document.id_pn1.height-8;
     }
	var mark=Math.floor(document.id_spacer1.height/(document.id_pn1.height/5));
	//alert(mark);
	mark=5-mark;
	document.id_pn1.src = img_p[mark].src
	document.post_form.rate2.value=mark;
	//window.status=mark;
	return false;
  }
}
function mouseup() 
{
 obj = null;
 flag = false;
 flag1 = 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>"+
"	<tr>"+
"		<td align='center'>"+
"		<img align='middle' name='id_pn1'>"+
"		</td>"+
"		<td id='scroll_cell1' 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_spacer1' width='20' height='0' src='"+set_spacer+"'></td></tr><tr><td><img width='20' height='8' border='0' id='id_pil1' src='"+img_f[1].src+" 'style='cursor : hand;' onMouseDown='flag1 = true;' ></td></table>"+
"		</td>"+
"	</tr>"+
"<form action='"+set_action+"' method='post' name='post_form'>"+
"	<tr>"+
"		<td colspan='2' style='padding: 2px' align='center'>"+
"	<input style='width:40%' type='submit' value='"+set_submit+"' onclick=\"javascript:alert('rate.value='+document.post_form.rate.value+', rate2.value='+document.post_form.rate2.value)\">"+
"	<input type='hidden' name='ID' value='"+set_id+"'><input type='hidden' name='rate' value='5'><input type='hidden' name='rate2' value='5'>"+
"		</td>"+
"	</tr></form></table>");
imgonload();

</script></body></html>

I disagree. This is what you call the copy and paste technique... the code is now double the ugliness, a nicer solution would take a little more typing. But a little less total code.

The use of the element name (to locate dom elements) isn't really supported across browsers, it works now in Firefox, because most pages are written for IE. But I don't know how supported it is across other browsers.

Cheers.

Comments
Thanks for putting up with me.

That's cool, I get bored at work. as a rule of thumb, the easier it is for people to access the problem, the easier it is for them to help.

If I can glance at the code and see I can paste it into a webpage without editing it, I will, even if I have no idea what the problem is! So what you did with a zip was handy, as the images are rather important sometimes too.

Everything you have mentioned is doable, as always, a problem has many solutions.

Have fun.

alpha_foobar,

I hate to beat a dead horse, but...

I created rater2 with mouseover rather than mouse drag. Do you think this will work too? I only found one problem. If you mouseover and click on one of the numberes, then mouse over the link to display the rating, it will display the javascript alert twice. If I used <input type='hidden' name='rate' value='"+rate+"'> do you think it will cause an issue with double votes like the javascript alert has?

Thanks,

This question has already been answered. Start a new discussion instead.