Q:

Javascript button onclick get input value and submit post request

I have a form that looks like this:
<form method="post">
    <input type="text" name="username" id="username">
    <input type="text" name="password" id="password">
    <select id="item" name="item">
        <option value="1">Blue</option>
        <option value="3">Pink</option>
        <option value="4">Black</option>
    </select>
    <input type="button" id="submit" onclick="addItem();" name="submit" value="Submit"/>
</form>

How can I use javascript to call the addItem() function and send a post request to test.php with the value of the username as username, password as password, and item as item?
EDIT:
This is the only code in my addItem(); function so far:
$.post("http://test.com/test.php",{username:username, password:pword, item:item}, function(data) {
    $('#message').html(data);
});

However, I'm wondering, how can I grab the data from all of the input fields and put it into the code I have above? This is because the function is called through a button and NOT a submit button.

A:

To grab the data, jQuery has beautiful function inside. based upon your edited question you can try this :  
var username = $("#username").val();  
var pword = $("#password").val();  
var item = $("#item option:selected" ).text();
// you can check the validity of username and password here
$.post("http://test.com/test.php",{username:username, password:pword, item:item},        
function(data) {
   $('#message').html(data);
});

(again, if you are following this way then there is no use of form tag.)

