New to javascript, but I'm sure this is easy. Unfortunately, most of the google results haven't been helpful.
Anyway, I want to set the value of a hidden form element through javascript when a drop down selection changes.
I can use jQuery, if it makes it simpler to get or set the values.
This question is related to
javascript
jquery
This is with jQuery.
$('#selectFormElement').change( function() {
$('#hiddenFormElement').val('newValue');
} );
In the html
<select id="selectFormElement" name="..."> ... </select>
<input type="hidden" name="..." id="hiddenFormElement" />
Just to be different, changed my answer so that this question doesn't have 5 answers with the same code.
<html>
<head>
<title>Page</title>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(function() {
var select = $("body").append('<form></form>').children('form')
.append('<input type="hidden" value="" />').children('input[type=hidden]')
.attr('id', 'hiddenValue').end()
.append('<select></select>').children('select')
.attr('id', 'dropdown')
.change(function() {
alert($(this).val());
});
$.each({ one: 1, two: 2, three: 3, four: 4, five: 5 }, function(txt, val) {
select.append('<option value="' + val + '">' + txt + '</option>');
});
});
</script>
</head>
<body></body>
</html>
Plain old Javascript:
<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>
I'd fought with this a long time $('#myelement').val(x) just wasn't working ... until I realized the # construction requires an ID, not a NAME. So if ".val(x) doesn't work!" is your problem, check your element and be sure it has an ID!
It's an embarrassing gotcha, but I felt I had to share to save others much hair-tearing.
<form>
<input type="hidden" name="selval">
<select onchange="this.form.selval.value=this.selectedIndex">
<option>val1</option>
<option>val2</option>
</select>
</form>
pure javascript from within a form
Here you can set hidden's value at onchange event of dropdown list :
$('#myDropDown').bind('change', function () {
$('#myHidden').val('setted value');
});
your hidden and 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>
$(function() {
$('#myselect').change(function() {
$('#myhidden').val =$("#myselect option:selected").text();
});
});
Source: Stackoverflow.com