Javascript button onclick get input value and submit post request

Question

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.

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. — Aman
– Aman, 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
– 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. — Aman
– Aman, Commented Dec 25, 2013 at 3:46

Aman · Accepted Answer · 2013-12-25 03:53:08Z

2

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

answered Dec 25, 2013 at 3:53

Aman

5,77010 gold badges57 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

charlietfl · Accepted Answer · 2013-12-25 03:42:42Z

1

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

answered Dec 25, 2013 at 3:42

charlietfl

172k14 gold badges125 silver badges154 bronze badges

3 Comments

user2898075 Over a year ago

Thank you, however, I'm executing the function upon a button a click, and not on a submission. I've made an edit to my question.

charlietfl Over a year ago

well when you originally posted question you didn't provide any code. You can still serialize all data using $('form').serialize(). WOuld be better to give form an ID and use that as selector. Really not clear what your updated question is

Aman Over a year ago

@charlietfl serialize.. nice way to go through, is it able to serialize all the form element ?

Cliff Liu · Accepted Answer · 2013-12-25 03:53:37Z

0

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>

answered Dec 25, 2013 at 3:53

Cliff Liu

1961 silver badge6 bronze badges

Comments

ah-shiang han · Accepted Answer · 2013-12-25 03:56:06Z

0

<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
}

edited Dec 25, 2013 at 3:56

answered Dec 25, 2013 at 3:50

ah-shiang han

3301 silver badge10 bronze badges

Collectives™ on Stack Overflow

Javascript button onclick get input value and submit post request

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related