如何从javascript中的多个输入字段读取值？

Question

Thanks for looking into this in advance. It's basically my first week of javascript, so apologies if it is something common and I appreciate a link to a similar question.

I can't figure out how to extract values from my dropdown and text input at the same time so I can then append that information to another container. Here is my html:

<div class=“container1”>
   <select class=“options_selector”>
     <option val=“admin”>admin</option>
     <option val=“user”>user</option>
   </select>
   <input class=“user_name” type="text"/>
</div>

<div class=“container2”>
   <!— append stuff here —>
</div>

So information from container1 should get appended to container2. For example, if I chose 'admin' in options_selector and typed 'freddy' in user_name input box, container2 should now have 'admin freddy' in it. When, then, I change the select box value to 'user' and the input text to 'john' - container2 should have another piece of text appended 'user john'.

I know it can be done with on change events, but i cannot figure out the general idea behind extracting both of those pieces of information together.

I'm using jquery as a framework by the way.

thanks in advance.

Answer 1

You could write code like :

$( "select" ).change(function () {
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
$( "#user_name" ).val(str);
}).change();

JSFiddle Here!