[ACCEPTED]-Javascript to set hidden form value on drop down change-jquery

Accepted answer
Score: 69

If you have HTML like this, for example:

<select id='myselect'>
    <option value='1'>A</option>
    <option value='2'>B</option>
    <option value='3'>C</option>
    <option value='4'>D</option>
<input type='hidden' id='myhidden' value=''>

All 5 you have to do is bind a function to the change event of the select, and do what you need 4 there:

<script type='text/javascript'>
$(function() {
    $('#myselect').change(function() {
        // if changed to, for example, the last option, then
        // $(this).find('option:selected').text() == D
        // $(this).val() == 4
        // get whatever value you want into a variable
        var x = $(this).val();
        // and update the hidden input's value

All things considered, if you're going 3 to be doing a lot of jQuery programming, always 2 have the documentation open. It is very easy to find 1 what you need there if you give it a chance.

Score: 10

Plain old Javascript:

<script type="text/javascript">

function changeHiddenInput (objDropDown)
    var objHidden = document.getElementById("hiddenInput");
    objHidden.value = objDropDown.value; 

    <select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>

    <input type="hidden" name="hiddenInput" id="hiddenInput" value="" />


Score: 8

I'd fought with this a long time $('#myelement').val(x) just wasn't 6 working ... until I realized the # construction 5 requires an ID, not a NAME. So if ".val(x) doesn't 4 work!" is your problem, check your element 3 and be sure it has an ID!

It's an embarrassing 2 gotcha, but I felt I had to share to save 1 others much hair-tearing.

Score: 3

Here you can set hidden's value at onchange 2 event of dropdown list :

$('#myDropDown').bind('change', function () {
  $('#myHidden').val('setted value');

your hidden and 1 drop down list :

<input type="hidden" id="myHidden" />

<select id="myDropDown">
   <option value="opt 1">Option 1</option>
   <option value="opt 2">Option 2</option>
   <option value="opt 3">Option 3</option>
</ select>
Score: 2

This is with jQuery.

$('#selectFormElement').change( function() {
} );

In the html

<select id="selectFormElement" name="..."> ... </select>
<input type="hidden" name="..." id="hiddenFormElement" />


Score: 2

Just to be different, changed my answer 2 so that this question doesn't have 5 answers 1 with the same code.

   <script src="jquery-1.3.2.min.js"></script>
       $(function() {
           var select = $("body").append('<form></form>').children('form')
                .append('<input type="hidden" value="" />').children('input[type=hidden]')
                .attr('id', 'hiddenValue').end()
                .attr('id', 'dropdown')
                .change(function() {

           $.each({ one: 1, two: 2, three: 3, four: 4, five: 5 }, function(txt, val) {
               select.append('<option value="' + val + '">' + txt + '</option>');
Score: 1
  <input type="hidden" name="selval">
  <select onchange="this.form.selval.value=this.selectedIndex">

pure javascript from within a form


Score: 0
$(function() {
$('#myselect').change(function() {
   $('#myhidden').val =$("#myselect option:selected").text();


More Related questions