jQuery .val('newvalue') in widget sidebar panel

I can’t get jQuery to set the value of an input field of one of my widget settings in the sidebar panel of the widgets admin screen.

I’ve set up a simplified scenario to isolate the problem. Within the widget sidebar admin page for this test, there is a single text field and a <div> that when clicked, will try to use jQuery’s val() to change the field value.

According to the javascript alerts I use below, the value is successfully changed in the Dom. However, visually on the screen it is not, which is a problem if I want it to actually save to the options table.

My test javascript code looks like this:

function setVal() {
	alert(jQuery('#cat').val());
	jQuery('#cat').val('changed');
	jQuery('#cat').attr('value','changed again');
	alert(jQuery('#cat').val());
}

my plugin php is:

<?php
/*
Plugin Name: Test Val
*/

add_action('admin_print_scripts-widgets.php', 'my_plugin_ascripts');

function my_plugin_ascripts()
    {
	$tval = WP_PLUGIN_URL . '/mytestval/mytestval.js';
	wp_register_script('tval',$tval);
	wp_enqueue_script('tval');
	wp_enqueue_script('jquery');
    }

function widget_output () {
	echo "hi";
}

function widget_tvalinit() {

	if ( !function_exists('register_sidebar_widget') )
		return;

function widget_control() {

		?>
		<p>test field:</p>
        <p><div><input id="cat" name="cat" type="text"value="initial value"/><div style="width:80px;height:20px;border:1px solid #000000" onClick="setVal()">click me</div></div></p>

		<?php
			}

		wp_register_sidebar_widget('testval', 'Testval', 'widget_output');
		wp_register_widget_control('testval', 'Testval', 'widget_control');

}

add_action('widgets_init', 'widget_tvalinit');

?>