Javascript pour définir la valeur du formulaire caché lors de la modification du menu déroulant

Question

Nouveau en javascript, mais je suis sûr que c'est facile. Malheureusement, la plupart des résultats Google n'ont pas été utiles.

Quoi qu'il en soit, je veux définir la valeur d'un élément de formulaire caché via javascript lorsqu'une sélection déroulante change.

Je peux utiliser jQuery, si cela facilite l'obtention ou la définition des valeurs.

Answer 1

Si vous avez le HTML comme ceci, par exemple:

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

Tout ce que vous avez à faire est de lier une fonction à l' change cas de le sélectionner, et de faire ce dont vous avez besoin là:

<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
        $('#myhidden').val(x);
    });
});
</script>

Toutes choses considérées, si vous allez faire beaucoup de jQuery programmation, de toujours disposer de la documentation ouvert. Il est très facile de trouver ce dont vous avez besoin si vous lui donner une chance.

Answer 2

Javascript ancien simple:

 <script type="text/javascript">

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

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

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

Answer 3

J'avais combattu avec ça pendant longtemps - $ ('# myelement'). Val (x) ne fonctionnait tout simplement pas ... jusqu'à ce que je réalise que la construction # nécessite un ID, pas un NOM. Donc, si ".val (x) ne fonctionne pas!" est votre problème, vérifiez votre élément et assurez-vous qu'il a un ID!

C'est un piège embarrassant, mais je sentais que je devais partager pour sauver les autres beaucoup de cheveux déchirants.

Answer 4

Ici, vous pouvez définir la valeur de masqué lors de l'événement onchange de la liste déroulante:

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

votre liste cachée et déroulante:

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

Answer 5

C'est avec jQuery.

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

Dans le html

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