[jQuery] linking two controls

[jQuery] linking two controls


hello,
on several pages I have small forms (plural) with a textbox and a
button. If I click on the button, a popup shows a search form. The
results of the searchform are shown in the very same popup as a list
of radiobuttons/labels. If someone selects a radiobutton, it's value
should be inserted into the textbox next to the button. Then the popup
should go away.
This popup (something like a singleton) serves many different pages,
so I cannot hardwire it. Probably I need to pass a delegate to some
event the form provides, indicating the originating form. Problem is:
I have no idea how something like this can be done. Anyone could give
me a hint or two, or direct me to good resources on similar matters?
The popup looks like that:
<form id="article-search-form" method="get"
action="${Url.For({@contoller:'articles',
@action:'FullTextSearchAsJson'})}">
    <input type="text" name="fragment" />
    <input type="submit" value="Buscar" />
</form>
<form id="article-search-result" method>
</form>
<script type="text/javascript" src="/script/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/script/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#article-search-form').ajaxForm({
        dataType: 'json',
        success: fillListWithArticles
});
});
function fillListWithArticles(data)
{
    var list = $("#article-search-result");
    $(list).empty();
    i = 0;
    $.each(data, function(){
        id = "article-search-result-" + i;
        $("<div><input type='radio' value='"+this.Id+"' id='"+id+"'
name='article.Id'/><label style='float: inherit' for='"+id+"'>" +
this.Name +"</label></div>").appendTo(list);
        i++;
    });
}
</script>
--
Jan
___________________
jan@limpens.com
www.limpens.com
+55 (11) 3082-1087
+55 (11) 3097-8339