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(".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.

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./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.

• javascript
• php
• jquery
• function
• post

• read about ajax – Arun P Johny Commented Dec 25, 2013 at 3:31
• if you are using form then I guess addItem(); can be used for validation purpose, else as Arun suggested, $.ajax() or $.post() or $.get() will help you out. in that case form is not necessary. – AGupta Commented Dec 25, 2013 at 3:38
• @Aman Please look at my edit, I'm already using $.post(), I just need to find out how to grab the data. – user2898075 Commented Dec 25, 2013 at 3:43
• @user2898075 pretty simple... use $('#username').val() and so on, where username is id attribute of input field. same applies to other field. – AGupta Commented Dec 25, 2013 at 3:46

4 Answers 4

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./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.)

Using jQuery you can send the form as simply as doing:

$('form').submit(function(){
   $.post('path/to/server/file', $(this).serialize(),function(response){
       /* do something with returned data from server*/
   });
   return false; /* prevent browser submitting form*/
});

$.post is a shortcut method of $.ajax

jQuery $.ajax() docs

jQuery $.post() docs

give a form name and a action url, then use form.sumit() method to post form data

<form method='post' name='myform' action='test.php'>
...
<script type="text/javascript">
function addItem() {
  document.myform.submit();
}
</script>

<form action="your.php" onSubmit="return addItem()">

This should do it

then in js

function addItem() {
//whatever you want to do
return true;
}

=============================================================

I see you are using Ajax, if you want to do it, then you should do the following:

$(document).on("click", "#yoursubmitbuttonID", function(e){
var password = $("#password").val();
var username = $("#username").val();
//send Ajax here
}