Adding Text under textbox based on value

I have a text field and I want to put underneath this text field information based on the input. For example, lets say someone types abc, then I would like some text underneat开发者_如何学运维h the text field to say foo_abc. Is jquery the best way to accomplish something like this? Also, I have a drop down above the text field and would like to append information to this label under the text field based on what is selected. Is this possible?

read up on javascript events http://www.w3schools.com/js/js_events.asp

Once you are comfortable with the basics, then read up on jquery to make your life easier.

You don't need jQuery to do just this, so here you go with plain JavaScript:

<script>        
    // Just an easier way to get an 
    // element by id in the document.
    function $get(id) {
        return document.getElementById(id);
    }    

    // This is what's called whenever
    // the user types into the input
    // box or changes the select value
    function config(event) {
       var prepend = "foo_",
           msgbox = $get("msgbox"),
           input = $get("input"),
           append = $get("selector");

        // Just a shorthand for an "if(){}else{}" 
        // statement. If input is blank, don't do
        // anything but clear the msgbox.
        (input.value) ? msgbox.innerHTML = prepend + input.value + append.value :
        msgbox.innerHTML = "";

    }    

    // Although this should probably
    // be at the top, it's better if
    // we declare everything before
    // we try to call them. ;)
    window.onload = function(event) {  
        // On load of the window, lets add
        // event listeners to our input
        // and selector box.

        // Input
        this.input = $get("input");
        this.input.addEventListener('change', config, false);
        this.input.addEventListener('keyup', config, false);

        // Selector
        this.append = $get("selector");
        this.append.addEventListener('change', config, false);
    }
</script>

<div id="container">
    <input id='input' value=""/>
    <select id="selector">
        <option value="_bar1">_bar1</option>
        <option value="_bar2">_bar2</option>
        <option value="_bar3">_bar3</option>
    </select>
    <div id="msgbox"></div>
</div>

--> example <--

This can be done with or without jQuery. A JS framework like jQuery makes your code a little neater and shorter to accomplish tasks like the one you're referring to. But without it you can use the "onkeyup" event of the text field to trigger a JS function that updates the text under the text field. Also, the "onchange" event of the dropdown box to do the same. The document.getElementById() allows you to directly grab a element in the document by the id attribute of the tag.

I coded up an example. Take a look here: http://jsfiddle.net/3Ys6f/

I would recommend you reading the jQuery documentation, there are lots of examples