I want to change written value of JavaScript after I change the value of ComboBox, but it didn't work. Here is my code :

<script>var selGate = "empty"</script>
   <SELECT NAME = "cmbGate" STYLE ="width: 600px" SIZE = 15 onchange="chGate()">
   <OPTION Value = "opt1">Option 1</OPTION>
   <OPTION Value = "opt2">Option 2</OPTION>
   </SELECT>                    
   <BR>
   <form name="frGate">
   Selected Gate is: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    
   <script>document.write(selGate)</script>
   </form>
            <script>
                function chGate()
                {
                    selGate = document.getElementsByName("cmbGate").selectorText;
                    frGate.submit();
                }
            </script>                  

I want to change written value of JavaScript after I change the value of ComboBox, but it didn't work. Here is my code :

<script>var selGate = "empty"</script>
   <SELECT NAME = "cmbGate" STYLE ="width: 600px" SIZE = 15 onchange="chGate()">
   <OPTION Value = "opt1">Option 1</OPTION>
   <OPTION Value = "opt2">Option 2</OPTION>
   </SELECT>                    
   <BR>
   <form name="frGate">
   Selected Gate is: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    
   <script>document.write(selGate)</script>
   </form>
            <script>
                function chGate()
                {
                    selGate = document.getElementsByName("cmbGate").selectorText;
                    frGate.submit();
                }
            </script>                  

• javascript
• jsp
• dom-events

• 1 What do you mean by change the value of javascript? Can you describe what exactly is NOT working? – gideon Commented Feb 24, 2012 at 4:55
• 'I want to change written value of JavaScript' , the JavaScript variable that written to the document this one : document.write(selGate) – Nore Commented Feb 24, 2012 at 4:57
• and it's not changing after all – Nore Commented Feb 24, 2012 at 4:58

2 Answers 2

You function would look like this:

function chGate()
{
    var e = document.getElementById("cmbGate");//get the bobox
    var selGate = e.options[e.selectedIndex].value;//get selected value
    //you can also do use                  ^.text =>to get the text instead
    document.getElementById("selected").innerHTML = "Selected Gate is:"+selGate;
                                     //^^ set the text to the selected value
    frGate.submit();
}

You html should change like this:

==> Change the select

<SELECT id="cmbGate" STYLE ="width: 600px" SIZE = 15 onchange="chGate()">
//      ^^ set the id

==> Change the form

<form name="frGate">
    <div id="selected">Selected Gate is:</div>
    //    ^^ set an id here also so you can update it 
</form> 

See a working demo: http://jsfiddle/Mr2CF/2/

There are a lot of problems with your code, mostly due to the fact that it's all over the place and half of it isn't bound to any event. What you really want is something like this:

<script type="text/javascript">
  var selGate = 'empty';
  document.getElementById('cmbGate').onchange = function () {
    selGate = this.options[this.selectedIndex].text
    document.getElementById('selectedGate').innerHTML = selGate;
  }
</script>

<select id="cmbGate" name="cmbGate" style="width: 600px" size="15">
  <option value="opt1">Option 1</option>
  <option value="opt2">Option 2</option>
</select>
<br>
<form name="frGate" id="frGate">
  <p>Selected gate is: <span id="selectedGate"></span></p>
</form>

See this in action here.