Set form value

Using the OnClick method

[bateman_ap]

I am not up to speed really with Javascript and am starting to slowly learn. What I am trying to do is set a form value when a "star value" is clicked. I am trying the code below however I am getting an error:

Error: rating is not defined

 <input type="hidden" name="rating" />
 <ul class="star-rating">
 <li class="current-rating" style="width:105px;"> Currently 3.5/5 Stars.</li>
 <li><a href="#" onClick="rating.value='1'; return false;"
title="1 star out of 5" class="one-star">1</a></li>
 <li><a href="#" onclick="rating.value='2'; return false;"
title="2 stars out of 5" class="two-stars">2</a></li>
 <li><a href="#" onclick="rating.value='3'; return false;"
title="3 stars out of 5" class="three-stars">3</a></li>
 <li><a href="#" onclick="rating.value='4'; return false;"
title="4 stars out of 5" class="four-stars">4</a></li>
 <li><a href="#" onclick="rating.value='5'; return false;"
title="5 stars out of 5" class="five-stars">5</a></li>
 </ul>

Anyone spell out what I need to do! Many thanks

[edited by: DrDoc at 8:21 pm (utc) on June 24, 2007]
[edit reason] fixed side scroll [/edit]

[rocknbil]

Normally you can use the this keywork to refer to a form, but since links are not form objects, you have to refer to the form by name or object id.

<a href="#" onclick="document.formname.rating.value='5'; return false;"
title="5 stars out of 5" class="five-stars">5</a>

You are better off to do this as an external routine. What if Javascript is disabled?

<script type="text/javascript"> 
function rateIt(num) { 
 var form = document.getElementById('your_form_id'); 
 document.getElementById('rating').value=num; 
 form.submit(); 
 return false; 
} 
</script> 

<a href="your_processor.cgi?rating=5" onclick="return rateIt(5);" title="5 stars out of 5" class="five-stars">5</a>
<form method="get" name="your_form_name" id="your_form_id" action="your_processor.cgi">
<input type="hidden" name="rating" id="rating" value="">
</form>

The return false on the link (in your example) or on the function will stop the link from executing the script twice. If javascript is disabled, it still submits the rating value to the processor via the link. It's probably notable to mention this is all done easier, without Javascript, by just using the intended element . . . radio buttons. :-)

<input type="radio" name="rating" id="rating-1" value="1">1
<input type="radio" name="rating" id="rating-2" value="2">2
<input type="radio" name="rating" id="rating-3" value="3">3
<input type="radio" name="rating" id="rating-4" value="4">4
<input type="radio" name="rating" id="rating-5" value="5" checked>5

[edited by: tedster at 5:22 pm (utc) on June 24, 2007]
[edit reason] stop side-scroll [/edit]

[bateman_ap]

Many thanks, the second method will submit the form when you click a link won't it? Reason I haven't done it like that is that it is part of a bigger form so need to just store it somewhere (the hidden field) until it is submitted.

If Javascript is disabled a standard html form will be displayed (this is checked beforehand as the form is displayed using a scriptaculous blind effect).

[rocknbil]

the second method will submit the form when you click a link won't it?

Well, yeah, thought that's what you wanted. Try removing the form.submit() line. You'll still need to refer to the hidden form element in one of those two ways. Frankly I've never tried to store data in this way, but it just might work.

[bateman_ap]

<a href="#" onclick="document.formname.rating.value='5'; return false;"
title="5 stars out of 5" class="five-stars">5</a>

This worked perfectly. Many thanks!