setting the HTML textbox value based on the selected option using Javascript function. But it seems to be not working

Question

This is the javascript snippet which assigns the selected option value to a text box

function check() {
 document.getElementById("inp").value=document.getElementById("id").value ;
}

this is the actual html code

<form>
<select id="id"  onSelect="check( );">
<option></option>
<option value=85.5>opt1</option>
<option value=95.5>opt2</option>
<option value=95.5>opt3</option>
<option value=95.5>opt4</option>
</select>
<input type=text name="input" id="inp">
</form>

I Hope am done right ,but still am not able to get my solution

Nick · Accepted Answer · 2013-11-08 12:34:16Z

1

Here's your fix.

This one works

I guess the summary of it is that you should change onSelect to onChange.

<script>
 function check() {
     document.getElementById("inp").value=document.getElementById("id").value;
    } 
 </script>
</head>
<body>
    <form>
        <select id="id"  onChange="check();">
        <option></option>
        <option value=85.5>opt1</option>
        <option value=95.5>opt2</option>
        <option value=95.5>opt3</option>
        <option value=95.5>opt4</option>
        </select>
    <input type=text name="input" id="inp" value="">
    </form>
</body>

answered Nov 8, 2013 at 12:34

Nick

2,9072 gold badges39 silver badges65 bronze badges

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

5 Comments

mplungjan Over a year ago

and do onChange="check(this)" so you can do function check(theSel) { theSel.form.input.value=theSel.value } if it must be inline

Nick Over a year ago

Not to mention that all of this could be handled much more elegantly with jQuery altogether

MarsOne Over a year ago

Yes. Exactly. jQuery all the things

mplungjan Over a year ago

So we load a framework to be able to do $(function() { $("#id").on("change",function() { $("#inp").val($(this).val()) }); }); instead of window.onload=function() { document.getElementById("id").onchange=function() { this.form.input.value=this.value }} I am not really convinced that is necessary

Nick Over a year ago

Depends, usually there's a lot more javascript going in a site than what we see in this little snippet. I'm sure there would be a lot more if we could see the full site. If, however, that's the only place then yeah I wouldn't recommend jQuery either

mplungjan · Accepted Answer · 2013-11-08 12:47:23Z

1

Assuming this html

<select id="id">
  <option value="">Please select</option>
  <option value="85.5">opt1</option>
  <option value="95.5">opt2</option>
  <option value="95.5">opt3</option>
  <option value="95.5">opt4</option>
</select>

You can use unobtrusive JavaScript and add this to the head

Plain JS:

window.onload=function() { 
  document.getElementById("id").onchange=function() {     
    this.form.input.value=this.value; 
  }
}

Same in jQuery would be

$(function() { 
  $("#id").on("change",function() { 
    $("#inp").val($(this).val()); 
  }); 
});

If you MUST do it inline, then

<select id="id" onchange="this.form.input.value=this.value;">

answered Nov 8, 2013 at 12:47

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Comments

MarsOne · Accepted Answer · 2013-11-08 12:50:39Z

0

You HTML has multiple issues as well as your javascript

Your formatted HTML

<form>
<select id="id" onChange="check();">
    <option></option>
    <option value="85.5">opt1</option>
    <option value="95.5">opt2</option>
    <option value="95.5">opt3</option>
    <option value="95.5">opt4</option>
</select>
<input type="text" name="input" id="inp" />
</form>

JS

function check() {
    document.getElementById("inp").value = document.getElementById("id").value;
}

Working DEMO

Also you should enclose you values like value="". Besides this no major issues

edited Nov 8, 2013 at 12:50

answered Nov 8, 2013 at 12:40

MarsOne

2,1875 gold badges30 silver badges54 bronze badges

Collectives™ on Stack Overflow

setting the HTML textbox value based on the selected option using Javascript function. But it seems to be not working

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related