JavaScript Populating an input Field Using an Html combo Box

Question

i am trying to find a way to allow a user to click items in a combo box and have its value populate an input field and also alert "work stop" or "work start" message when appropriate option is selected. But my code is not working. Please Help! Here is my code:

    <html>
    <head>

    </head>
    <body>

    <form>
<select name="sel1" onChange="populateField(this.form)" >
    <option value="">---Select---</option>
    <option value="stop" >Stop</option>
    <option value="start">Start</option>
</select>

<input type="text" id="eStop" name="eStop" />
</form>
<script type="text/javascript">

function populateField(frm){
 test = frm.stop.value;
 alert('work' test);
 frm.eStop.value = test;
}
</script>
    </body>
    </html>

Thanks in Advance

Zoltan Toth · Accepted Answer · 2011-11-29 18:27:45Z

2

http://jsfiddle.net/snHQY/

<form>
    <select name="sel1" id="select" onchange="populateField();" >
        <option value="">---Select---</option>
        <option name="stop" value="stop" >Stop</option>
        <option name="start" value="start">Start</option>
    </select>

    <input type="text" id="eStop" name="eStop" />
</form>

<script>
function populateField() {
    test = document.getElementById('select').value;
    alert(test);
    document.getElementById('eStop').value = test;
}
</script>

answered Nov 29, 2011 at 18:27

Zoltan Toth

47.8k12 gold badges132 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrew · Accepted Answer · 2011-11-29 18:34:21Z

0

You can do it using the selectedIndex if you want as well,

<form>
    <select name="sel1" id="select" onchange="populateField(this);" >
        <option value="">---Select---</option>
        <option name="stop" value="stop" >Stop</option>
        <option name="start" value="start">Start</option>
    </select>

    <input type="text" id="eStop" name="eStop" />
</form>

<script>
function populateField(sel) {
  sel.form.eStop.value = 'work ' + (sel.selectedIndex == 1 ? 'Stop' : 'Start');
}
</script>

http://jsfiddle.net/cnpuM/

answered Nov 29, 2011 at 18:34

Andrew

13.9k14 gold badges70 silver badges85 bronze badges

Comments

Naeem Ul Wahhab · Accepted Answer · 2011-11-29 18:39:53Z

Your code has two errors. You can not reference an element by its value like this test = frm.stop.value; instead use test = frm.sel1.value; . Another error is in this line alert('work' test);. Here you are joining a string "work" with a variable "test". In java script where ever you join two or more variables or strings and variables you alway have to join them with + sign like this:alert('work ' + test);. Remaining code is ok:

<html>
<head>

</head>
<body>
<form>
<select name="sel1" onChange="populateField(this.form)" >
<option value="">---Select---</option>
<option value="stop" >Stop</option>
<option value="start">Start</option>
</select>

<input type="text" id="eStop" name="eStop" />
</form>
<script type="text/javascript">
function populateField(frm){
    var test = frm.sel1.value;
 alert('work '+ test);
frm.eStop.value = test;
}
</script>

</body>
</html>

You can also use selectedIndex property of "sel1" to do the same.

BenMorel · Accepted Answer · 2013-11-26 13:16:20Z

0

in your select you can add to onchange's and onkeypress to the populateField's function this as the objects reference.

<select name="sel1" onchange="populateField(this)" onkeypress="populateField(this)">

Now you can reference the select from o. to pass the selected value to the alert dialog and the input field.

function populateField(o){

  alert("work " + o.value);
  // use regular W3C DOM syntax for element referencing the input and populate it with the select objects selected options value
  document.getElementById("eStop").value = o.value;
}

edited Nov 26, 2013 at 13:16

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Nov 29, 2011 at 18:34

david

4,3383 gold badges26 silver badges26 bronze badges

Collectives™ on Stack Overflow

JavaScript Populating an input Field Using an Html combo Box

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related