Set variable value from input before submit

Question

First, I have this input in a form.

<select id="entry_14">
     <option value="Woman">Woman</option>
     <option value="Man">Man</option>
</select>

Then I declared this variable.

var mygender = document.getElementById('entry_14').value;

but then, when I document.write, it already shows "Man" before the user even makes a selection, and after selecting woman, it still shows man.

How can I set the value of this variable to change, each time the user selects one of the options?

Does this answer your question? [Get selected value/text from Select on change](https://stackoverflow.com/questions/5416767/get-selected-value-text-from-select-on-change) — SuperStormer, Sep 15 '22 at 07:51

score 5 · Accepted Answer · edited Jan 18 '12 at 06:18

5

It executes immediately because your code is not in a function. You need to call this function when the select changes. Add an onchange handler to your select. In this example I pass this.value which is your select lists value to the function. Finally you can do whatever you want with that value.

<select id="entry_14" onchange="myfunction(this.value);">
    <option value="Woman">Woman</option> 
    <option  value="Man">Man</option>
</select>

<script>
    function myfunction(val) {
        document.write(val);
    }
</script>

edited Jan 18 '12 at 06:18

Uwe Keim

39,551
56
175
291

answered Jan 18 '12 at 06:09

mrtsherman

39,342
23
87
111

In IE, if the user is navigating the options using the cursor keys, the onchange listener will be called each time they press the up or down key. – RobG Jan 18 '12 at 06:23
mrtsherman, your solution works, now it writes the correct selected value, but... It replaces everything else on the page. When the user makes a selection, the entire form goes away, and "woman" is the only thing you see at the top left of the page. Can I document.write to another place in the same/original page, while keeping the form on screen? Thanks for your help! – Jan 18 '12 at 19:38
Yes, you can modify an existing elements contents to relect the output. This is the preferred way. http://jsfiddle.net/eZg5h/ – mrtsherman Jan 18 '12 at 20:45

score 3 · Answer 2 · edited Sep 15 '22 at 07:50

3

Declare a onchange event handler.

document.getElementById('entry_14').onchange = function(){
    var mygender = this.value;
    document.write(mygender);
}

edited Sep 15 '22 at 07:50

SuperStormer

4,997
5
25
35

answered Jan 18 '12 at 06:14

dku.rajkumar

18,414
7
41
58

1

+1 - I actually like this answer better than my own because it doesn't rely on inline javascript declarations. – mrtsherman Jan 18 '12 at 06:23

score 0 · Answer 3 · answered Jan 18 '12 at 06:12

Add a onChange JS handler to the <select> element. The example below shows an inline way of doing this...

<select id="entry_14" onChange="updateMyGender();">
    ....
</select>

<script>
    var mygender = document.getElementById('entry_14').value;
    function updateMyGender()
    {
        mygender = document.getElementById('entry_14').value;
    }
</script>

score 0 · Answer 4 · answered Jan 18 '12 at 06:16

0

I think you are looking for this

var mygender= document.getElementById('entry_14');
var gender= mygender.options[mygender.selectedIndex].value;// for value 

var gender= mygender.options[mygender.selectedIndex].Text;//for text

answered Jan 18 '12 at 06:16

Rashmi Kant Shrivastwa

1,107
8
17

`selectedIndex` is only required to support ancient browsers. – RobG Jan 18 '12 at 06:24

Set variable value from input before submit

4 Answers4