CODEWITHSUNDEEP
javascripthtmldrop-down-menu
Messi L
Messi L

Reputation: 97

display selected from dropdown box in a form as readonly

I have a situation, ie, I wanted the selected data from the dropdown box to be displayed inside a form (of type text) below it and which should be readonly.(using html/javascript). I am not able to do that as i am a pioneer in that Hope responses

Upvotes: 0

Views: 2441

Answers (2)

U.P
U.P

Reputation: 7442

First of all, you need a select list like below (notice the onchange event handler)

<select onchange="fillTextBox(this)" id='mySelectList'>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
</select>

You will also need a text box (lets give it an Id myTextBox)

<input value='' name='' id='myTextBox'></input>

You'll need the following script for fillTextBox function

function fillTextBox(obj) {
    var sel = obj.value;
    document.getElementById('myTextBox').value = sel;   
}

Upvotes: 0

gaara42
gaara42

Reputation: 112

The below is a rough sketch of a non-jquery method of dynamically changing one form box using input from a dropdown menu.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script type="text/javascript">
            function optionCallBack (arg) {
                var currentOption = arg.options[arg.selectedIndex].text;
                document.getElementById('changeForm').value = currentOption;
            }
        </script>
    </head>
    <body>
        <select onclick="optionCallBack(this)" id='getForm'>
          <option>asia</option>
          <option>africa</option>
          <option>america</option>
          <option>europe</option>
        </select>
        <form>
            <input value='europe' name='changeForm' id='changeForm'></input>
        </form>
    </body>
</html>

Upvotes: 1

Related Questions