how to get value by button ?

hi all,
i want to get f_rangeStart,f_rangeEnd ,sip when user press the Query button ,
i have try to using form, but when i add form ,the date picker can't work ,
anyone else can help me how to fix ?

<table width="492" border="1">
<tr>
<td colspan="3" >Query</td>
</tr>
<tr>
<td width="130">Query Date</td>
<td width="170">
<input id="f_rangeStart" size="10" />
<button id="f_rangeStart_trigger">DATE</button>

<script type="text/javascript">

var cal = Calendar.setup({

onSelect: function(cal) { cal.hide() }

});
cal.manageFields("f_rangeStart_trigger", "f_rangeStart", "%Y-%m-%d");

</script>
</td>
<td width="170">
<input id="f_rangeEnd" size="10" />
<button id="f_rangeEnd_trigger">DATE</button>

<script type="text/javascript">

var cal = Calendar.setup({

onSelect: function(cal) { cal.hide() }

}); 

cal.manageFields("f_rangeEnd_trigger", "f_rangeEnd", "%Y-%m-%d");

</script>
</td>
</tr>
<tr>
<td>user IP</td>
<td colspan="2"><input id="sip" size="15" /></td>
</tr>
<tr>
<td colspan="3"> <button id="query" >Query</button></td>
</tr>
</table>

Code (markup):

 

If you use jQuery, it would be like this:

$(document).ready(function(){
    $('#query').click(function(){
       var f_rangeStart = $('#f_rangeStart').val();
       var f_rangeEnd = $('#f_rangeEnd').val(); 
       var sip = $('#sip').val(); 

       alert(f_rangeStart);
       alert(f_rangeEnd);
       alert(sip);

    });
        
});​

Code (markup):

Test it online: jsfiddle.net/LPnrB/

Hope it helps