I have a drop html list. If I select an option from dropdown, I have to assign dropdown value to the javascript variable and display it on html
Here is my code
HTML:
<form method="post">
<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="" />
<button onclick="changeHiddenInput (objDropDown)">Try it</button>
</form>
<div id="result"> </div>
Javascript:
function changeHiddenInput (objDropDown)
{
var objHidden = document.getElementById("hiddenInput");
objHidden.value = objDropDown.value;
var a = objHidden.value;
result.innerHTML = a || "";
}
But whenever I am submitting the values,it giving error. anything wrong here ?
DEMO
I have a drop html list. If I select an option from dropdown, I have to assign dropdown value to the javascript variable and display it on html
Here is my code
HTML:
<form method="post">
<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="" />
<button onclick="changeHiddenInput (objDropDown)">Try it</button>
</form>
<div id="result"> </div>
Javascript:
function changeHiddenInput (objDropDown)
{
var objHidden = document.getElementById("hiddenInput");
objHidden.value = objDropDown.value;
var a = objHidden.value;
result.innerHTML = a || "";
}
But whenever I am submitting the values,it giving error. anything wrong here ?
DEMO
Share Improve this question asked Jul 29, 2013 at 18:49 acracr 1,74611 gold badges49 silver badges83 bronze badges 1- I made a last update, it might be usefull for you. Please check. – Sergio Commented Jul 29, 2013 at 19:14
1 Answer
Reset to default 3On your demo, you've selected the default onLoad option in jsfiddle. This causes the site to wrap your entire code within a callback function, meaning that your showit function is not a global function as required by DOM0 inline event handlers.
Change this option to no wrap(head) and it will work.
The code you have will work good on a page, assuming you have the <script>
tags for the javascript.
Fiddle here
About your <button onclick="changeHiddenInput (objDropDown)">Try it</button>
, objDropDown
is not defined... and also add type="button"
otherwise the default is a submit button.
I made some changes for the demo, so my code is:
html
<form method="post">
<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="" />
<button onclick="changeHiddenInput (objDropDown)">Try it</button>
</form>
<div id="result"> </div>
javascript
var select;
window.onload = function () {
select = document.getElementById('dropdown');
console.log(select);
}
function changeHiddenInput(objDropDown) {
console.log(objDropDown);
var objHidden = document.getElementById("hiddenInput");
objHidden.value = objDropDown.value;
var a = objHidden.value;
result.innerHTML = a || "";
}