...

View Full Version : Get a value of a span id and pass it to a hidden form



greens85
02-27-2012, 05:14 PM
Hi All,

I'm pretty sure that this will need a javascript solution but could an admin please move it if I have placed it in the wrong section!

Basically I am populating a span id with a number value...


<div id="behaviour_management" style="overflow: auto;">
Behaviour Management
<br><br>
<span id="behaviour_management_rating">4</span>

What I need to do is grab that value... 4 in this case and pass it to a hidden field or via another method so that it because part of the form for processing on the next page.

I've tried a couple of things but I am very shakey on javscript and have a very limited knowledge of it.

I've basically tried (and managed) to assign the value to a javscript var by using getElementByID...


<script type="text/javascript">
function getRatings() {
var s1 = document.getElementById('behaviour_management_rating').innerHTML;
}
</script>


<input type="image" name="submit" src="images/search_list_btn.png" onclick="getRatings()"/>

my next plan was to pass that var to a hidden input at which point I am becoming stuck.

Can someone tell me if this is even possible and if so perhaps they would be kind enough to point me in the right direction.

Any help would be greatly appreciated..

Many thanks
Greens85

Philip M
02-27-2012, 05:28 PM
Hidden (form) fields must be within a form.


<form name = "myform">
<div id="behaviour_management" style="overflow: auto;">
Behaviour Management
<br><br>
<span id="behaviour_management_rating">4</span>
<br>
<input type="image" name="myimagebutton" src="images/search_list_btn.png" onclick="getRatings()"/>
<input type = "hidden" name = "hiddenfield">
</form>

<script type="text/javascript">
function getRatings() {
var s1 = document.getElementById('behaviour_management_rating').innerHTML;
document.myform.hiddenfield.value = s1;
alert ("The value of the hidden field is " + document.myform.hiddenfield.value); // for testing
}
</script>

Do not use the name "submit" for your image because then your JS code can't call document.formname.submit() if you ever need to. (Which I am guessing you will need to!)



Quizmaster: Which King George was the present Queen's father?
Contestant: Seventh.

Co1dFusion
02-27-2012, 05:29 PM
You can asign an input value a variable using something like this.


document.forms['FORM_NAME']['INPUT_NAME'].value= s1

greens85
02-27-2012, 05:46 PM
Hi Phillip,

Many thanks for your prompt reply...

I understand that they need to be within the form, my issue is more how to populate that hidden input with the javascript variable.

I tried your example but have not been able to get it to work. This could however be because of the larger picture. The value is not present in the span ID on the page load (as it forms part of a bigger click and rate system)... so basically the span will start off without a value.

In order to populate the span id, the user must first click on a star (as per attached image).

If you see how the first section is populated with 4 but the remainder are blank... obviously this is because I have interacted with that section but not the rest.

Additionally this is the rating plugin I am using:

http://www.switchonthecode.com/tutorials/how-to-build-a-star-ratings-jquery-plugin

Not sure if this will help you to further understand why I am having problems.

Would this impact your suggested code?

greens85
02-27-2012, 05:49 PM
You can asign an input value a variable using something like this.


document.forms['FORM_NAME']['INPUT_NAME'].value= s1


Co1dFusion,

Again many thanks for your response, it is much appreciated.

Again I have tried to implement your suggestion but no luck with that either:

<form action="public_supply_results.php" method="get" name="myform" id="myform">

you can see I have given my form a name and id and then tried the following code:


<script type="text/javascript">
document.forms['myform']['hiddenfield'].value= s1
</script>


again I'm not sure if what I have explained above is hampering the code or if I am just misunderstanding due to my lack of javascript ability!

greens85
02-27-2012, 05:54 PM
Phillip,

My apologies... I have now got this working!

It seems that I was missing a couple of things. I had forgotten to name my form and I had also removed my onclick event during some other testing and forgotten to put it back in.

To anyone who may find this useful my final code is:


<form action="public_supply_results.php" method="get" name="myform" id="myform">


<script type="text/javascript">
function getRatings() {
var s1 = document.getElementById('behaviour_management_rating').innerHTML;
document.myform.hiddenfield.value = s1;
alert ("The value of the hidden field is " + document.myform.hiddenfield.value); // for testing
}
</script>

Many thanks for the help and responses.

Much appreciated!

Philip M
02-27-2012, 05:59 PM
It seems that I was missing a couple of things. I had forgotten to name my form and I had also removed my onclick event during some other testing and forgotten to put it back in.


Well, that certainly could explain it. :)
As so often, the fault, Dear Brutus, lies not in the stars .......



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum