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.
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>
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>
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>
</select>
<input type='hidden' id='myhidden' value=''>
All you have to do is bind a function to the change event of the select, and do what you need 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
$('#myhidden').val(x);
});
});
</script>
All things considered, if you're going to be doing a lot of jQuery programming, always have the documentation open. It is very easy to find what you need there if you give it a chance.
<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
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 have a secondary question.
If you wanted to change the value of the hidden field to something not in the value of the dropdown like so
<form>
<select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="foo">One - 42</option>
<option value="bar">Two - 40</option>
<option value="wig">Three - 38</option>
</select>
<input type="hidden" name="hiddenInput" id="hiddenInput" value="" />
</form>
And i want to pass (if two selected) dropdown="bar" and hiddenInput="40"
The value has to be passed but needs to effect the hiddenfield.
What do you think? Would you need to If then? or could you have it something like
<form>
<select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="foo" onchange="set hiddenInput - 42">One - 42</option>
<option value="bar" onchange="set hiddenInput - 40">Two - 40</option>
<option value="wig" onchange="set hiddenInput - 38">Three - 38</option>
</select>
<input type="hidden" name="hiddenInput" id="hiddenInput" value="" />
</form>
onchange="this.form.selval.value=this.selectedIndex"
that's easy, would it work for other fields too? I have a special case of a payment page needing to be .html
if I had an ordinary text input field could I do this from this field to a hidden field? or will it only work for dropdowns ?
ian