Jquery Click to Change Form Field Value

Question

I have this code:

<input type="text" name="frameSelection" id="frameSelection" value="Option 1" />
<a id="change">Change to Option 2</a>

When I click on the link I want to change the field value into "Option 2". How can I do that?

Answer 1

Very simple. Use click to attach an event handler to the click event, and val to set the value:

$("#change").click(function() {
    $("#frameSelection").val("Option 2");
});

As mentioned in other answers, you may want to prevent the default behaviour of the link, but with your code as it currently is in the question (with no href attribute on the a element) that's not necessary. Just bear it in mind if that could change.

Answer 2

With jQuery:

$('#change').click(
    function(e){
        e.preventDefault;  // if your a has an href attribute, this prevents the browser
                           // following that link.
        $('#frameSelection').val("Option 2");
    });

References:

• click().
• e.preventDefault.
• val().