ajax update not working

[eluser]bobbob[/eluser]
I am trying to do a very simple update to my database.
Somehow I can't stop the form from submitting to the controller and then opening a new page.
Loaded prototype.js and confirmed it is loaded.
My form:

Code:

<form name="preferred_form" id="preferred_form" method="post" action="<?php echo site_url('members/preferred');?>">
                     <input type="text" name="preferred" id="preferred" />
                     <input type="submit" value="Update" id="button" />
                     </form>
    <div id="new_preferred"></div>

I want the new value to show up in the new_preferred div.
This is loaded in an external file in the same directory as the prototype so it must be being read:

Code:

function init(){
    
     Event.observe('button', 'submit', updateit(), false);
}

function updateit(){
     var url = 'members/preferred';
     var pars = 'preferred='+escape($F('preferred'));
     var target = 'new_preferred';
     var myAjax = new Ajax.Updater(target, url, {method: 'post', parameters: pars});
}

As you can see javascript is not my thing.
Help much appreciated.
The update is successful through the normal call to the controller. I just can't get it to happen without opening a new page.