Getting the text in a select box

JavaScript
1

I have a select box with a hidden box underneath,


<select name="provider_id" id="Username" class="select"> <option value=4>anyone</option>
<option value=2>Balena</option>
<option value=3>Eschimossa</option>
<option value=14>matts girl</option>
<option value=1>Sandra J.</option>                    
</select>

what im trying to do is capture is the other value (anyone, etc…) depending on which option is chosen in a hidden input box.


 <input type="hidden" value="" name="provider_name">

I gather what need to do is use the onChange thing on the select box to capture the current texts value and somehow put it in my hidden thing.

How can I do this?
Thx…

2

Hi,

So, just to be clear, you want to dynamically set the value of the hidden input element to the text of whatever option is selected in the select element (e.g. anyone, Balena, Eschimossa).
Is that correct?
Are you already using jQuery in your page?

3

Yes, thats exactly what im trying to accomplish, Im only using HTML form elements and nothing-else. /Should I use jquery?

4

No. It makes the job 5% easier, so I would have used it if you had been using it.

This should do the trick:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Dynamically set value of hidden input</title>
  </head>

  <body>
    <form>
      <select name="provider_id" id="Username" class="select">
        <option value=4>anyone</option>
        <option value=2>Balena</option>
        <option value=3>Eschimossa</option>
        <option value=14>matts girl</option>
        <option value=1>Sandra J.</option>                    
      </select>
      
      <input type="hidden" value="anyone" name="provider_name" id="hidden">
    </form>
    
    <script>
      var sel = document.getElementById("Username"),
                hidden = document.getElementById("hidden");
				
      sel.onchange=function(){
        hidden.value = sel.options[sel.selectedIndex].text;
      }
    </script>
  </body>
</html>
5

thx