How do I set a textbox's value using an anchor with jQuery?

Question

I have a textbox whose value I want to set based on the inner text of an anchor tag. In other words, when someone clicks on this anchor:

<a href="javascript:void();" class="clickable">Blah</a>

I want my textbox to populate with the text "Blah". Here is the code I am currently using:

<script type="text/javascript">
    $(document).ready(function(){
        $("a.clickable").click(function(event){
            $("input#textbox").val($(this).html());
        });  
    });
</script>

And in my html there is a list of anchor tags with the class "clickable" and one textbox with the id "textbox".

I've substituted the code above with code to just show a javascript alert with $(this).html() and it seems to show the correct value. I have also changed the $(this).html() to be a hardcoded string and it setes the textbox value correctly. But when I combine them the textbox simply clears out. What am I doing wrong?

Answer 1

I wrote this code snippet and it works fine:

<a href="#" class="clickable">Blah</a>
<input id="textbox">
<script type="text/javascript">
    $(document).ready(function(){
        $("a.clickable").click(function(event){
            event.preventDefault();
            $("input#textbox").val($(this).html());
        });  
    });
</script>

Maybe you forgot to give a class name "clickable" to your links?

Answer 2

To assign value of a text box whose id is ёtextboxё in jQuery please do the following

$("#textbox").val('Blah');