Form is submiting by calling own function in Jquery ?

Form is submiting by calling own function in Jquery ?

hi all,
 
I'm tring to write one external function to append option to select box, when you enter some value text box and click on ' add ' button. It is appending to select box when we click on 'add' button at same time form submition also going . How to solve this problem ?
 
Please help anyone ?
 
Thanks& Regards,
Nazeer
 
HTML CODE:

<

 script src = "js/jquery.js" ></ script >

<

 script type = "text/javascript" src = "js/editableList.js" ></ script >
<
script type = "text/javascript" >

$(document).ready(

 function () {

$(

 '#add' ).click( function () {

$(

 "#list" ).appendToList({value: 'addelementvalue' ,controllist: 'control_list' });

});

$(

 '#remove' ).click( function () {

$(

 '#list' ).removeFromList({selectboxid: 'control_list' });

});

$(

 'form' ).submit( function () {

 return false ;

});

});

　

</

 script >

<

 title > Editable Control List </ title >

</

 head >

<

 body bgcolor = "#CCCCCC" >

<

 form name = "f1" >

<

 div id = "list" >

<

 label > Editable Control List </ label >< br >

<

 table >

<

 tr >

<

 td >

<

 table >

<

 tr >< td >< select size = 6 id = "control_list" style =" width : 145px ;" ></ select ></ td ></ tr >

<

 tr >< td >< input type = "text" id = "addelementvalue" /></ td ></ tr >

</

 table >

　

</

 td >

　

<

 td >

<

 table >

<

 tr >< td >< input type = "image" src = "Images/remove.png" id = "remove" title = "click here to remove value from the list" alt = "click here to remove value from the list" style =" top : 300px " /></ td ></ tr >

<

 tr >< td >< input type = "image" src = "Images/add.png" alt = "click here to append value to list" title = "click here to append value to list" id = "add" /></ td ></ tr >

</

 table >

</

 td >

</

 tr >

</
table >
 
 
external script file:
--------------------------

(

function ($) {

 // jQuery plugin definition

$.fn.appendToList =

function (params) {

 this .each( function () {

 // express a single node as a jQuery object

var $list=$( '#' +params.controllist+ '' );

 var $value=$( '#' +params.value+ '' ).val();

 var isThere=$list.find( 'option:contains(' +$value+ ')' ).val()==$value? true : false ;

 if ($value== '' ||$value== null )

{

alert(

 'Enter Value' );

}

 else if ($.trim($value)== "" )

{

alert(

 'Only spaces not allowed' );

}

 else if (isThere) {

alert(

 'Duplicates Not Allowed' );

}

 else

{

$list.append(

 "<option value='" +$value+ "' alt='" +$value+ "' title='" +$value+ "'>" +$value+ "</option>" );

document.getElementById(params.value).value=

 "" ;

}

});

 // allow jQuery chaining

return this ;

};

})(jQuery);