Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Sep 2007
    Posts
    809
    Thanks
    5
    Thanked 2 Times in 2 Posts

    Get a value of a span id and pass it to a hidden form

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

    Code:
    <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...

    Code:
    <script type="text/javascript">
    	function getRatings() {
    		var s1 = document.getElementById('behaviour_management_rating').innerHTML;
    	}
    </script>
    Code:
    <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

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Hidden (form) fields must be within a form.

    Code:
    <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.
    Last edited by Philip M; 02-27-2012 at 04:38 PM. Reason: Typo

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Feb 2012
    Location
    England
    Posts
    77
    Thanks
    0
    Thanked 12 Times in 11 Posts
    You can asign an input value a variable using something like this.
    Code:
    document.forms['FORM_NAME']['INPUT_NAME'].value= s1

  • #4
    Regular Coder
    Join Date
    Sep 2007
    Posts
    809
    Thanks
    5
    Thanked 2 Times in 2 Posts
    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/tutor...-jquery-plugin

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

    Would this impact your suggested code?
    Attached Thumbnails Attached Thumbnails Get a value of a span id and pass it to a hidden form-javascript_issue.gif  

  • #5
    Regular Coder
    Join Date
    Sep 2007
    Posts
    809
    Thanks
    5
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Co1dFusion View Post
    You can asign an input value a variable using something like this.
    Code:
    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:

    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!

  • #6
    Regular Coder
    Join Date
    Sep 2007
    Posts
    809
    Thanks
    5
    Thanked 2 Times in 2 Posts
    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:

    Code:
    <form action="public_supply_results.php" method="get" name="myform" id="myform">
    Code:
    <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!

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by greens85 View Post
    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 .......

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •