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

• javascript
• jquery
• html

• I made a last update, it might be usefull for you. Please check. – Sergio Commented Jul 29, 2013 at 19:14

1 Answer 1

On 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 || "";
}