How to use jquery $.post() method to submit form values [duplicate]

Question

I have 1 main page with a form and another page to process the form value here are source codes of the 2 pages

Form Page:

<meta charset="UTF-8"> <title>Form Page</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="process.php" method="post" id="reg-form"> Username: <input type="text" id="username" name="username"> <br> Password: <input type="password" id="password" name="password"> <br> <button type="submit" id="submit-btn">Traditional Submit</button> <button type="button" id="post-btn">$.Post Submit</button> </form> <script> $("#post-btn").click(function(){ $.post("process.php",function(data){ alert(data); }); }); </script>

Process Page:

<?php $username=$_POST["username"]; $password=$_POST["password"]; echo "Username: ".$username; echo "<br>"; echo "Password: ".$password;?>

if I click the "Traditional Submit" buttton, it works perfectly well.

but when I click the "$.Post Submit" button, I just keep getting error msg "Notice: Undefined Index ..."

I can not figure out where the problem is, please kindly help check and fix, thanks in advance!

yes, I'm trying to use Ajax to process the form values and stay on the main page (instead of being redirected to the process page like using the traditional form submit) — Yolo
– Yolo, Commented Sep 17, 2014 at 2:20

nbrooks · Accepted Answer · 2014-09-17 02:18:53Z

You have to select and send the form data as well:

$("#post-btn").click(function(){ $.post("process.php", $("#reg-form").serialize(), function(data) { alert(data); }); });

Take a look at the documentation for the jQuery serialize method, which encodes the data from the form fields into a data-string to be sent to the server.

Just adding to this: action="process.php" method="post" is no longer needed on the <form> element as the submission is being handled by the jQuery AJAX .post() method.

Dan O · Accepted Answer · 2017-05-07 23:59:49Z

9

Get the value of your textboxes using val() and store them in a variable. Pass those values through $.post. In using the $.Post Submit button you can actually remove the form.

<script> username = $("#username").val(); password = $("#password").val(); $("#post-btn").click(function(){ $.post("process.php", { username:username, password:password } ,function(data){ alert(data); }); }); </script>

edited May 7, 2017 at 23:59

Dan O

6,0802 gold badges35 silver badges52 bronze badges

answered Sep 17, 2014 at 2:17

JRN

1,48513 silver badges16 bronze badges

5 Comments

Sean Vieira Over a year ago

Even better, use the serialize method

JRN Over a year ago

@SeanVieira I don't know how to use that. What's the purpose of it? I've been learning that but just can't understand :) Please tell me

Sean Vieira Over a year ago

serialize takes a form (or a set of inputs) and turns all of the input, select, and textarea tags into a string suitable for sending as the body of an HTTP POST request (or as the query string of a GET request). For example, serializing a form with the single field, <input name="firstName" value="Sean"> becomes "firstName=Sean".

JRN Over a year ago

@SeanVieira ok thanks and then you just need to post or get the firstName? :)

Sean Vieira Over a year ago

Yes - then you can directly use that string in $.ajax or any of its cousins ($.post, $.get), as this answer does

MH2K9 · Accepted Answer · 2014-09-17 02:25:10Z

Yor $.post has no data. You need to pass the form data. You can use serialize() to post the form data. Try this

$("#post-btn").click(function(){ $.post("process.php", $('#reg-form').serialize() ,function(data){ alert(data); }); });

Collectives™ on Stack Overflow

How to use jquery $.post() method to submit form values [duplicate]

3 Answers 3

1 Comment

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Linked

Related