Question

I have a form with a few fields, one of which should be updated based on the value of another. The value of the first is POSTed to another URL, and the returned value should be used to fill the second field. Here’s the code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>        
    function lookup(rid) {
                    $.get("/handler?rid=" + $("input#rid").val(), function(update_rid){
                        $("#name").val(html(update_rid));
                    })
                }
    </script>
        <form name="new_alert">
            <input type="text" name="rid" id="rid" onkeyup="lookup(this.value);">
            <br />
            <input type="text" name="name" id="name">  
        </form>

The POST works fine, and the correct data is returned from /hander, which I confirmed by making a test and filling it using $(“#testdiv”).html(update_rid);

So it seems like the problem is in the way I’m trying to update the value, but I can’t get past that.

Answer 1

Remove the html() within val().

$.get("/handler?rid=" + $("input#rid").val(), function(update_rid){
   $("#name").val(update_rid);
});

It still might depend on what kind of data is returned from your server.

note by author

Stay unobtrusive!

Replace your inline onkeyup handler with

$(function(){
    $('#rid').bind('keyup', function(){
        lookup($(this).val());
    });
});