37

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!

Yolo
  • 413
  • 1
  • 5
  • 8
  • 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 Sep 17 '14 at 02:20

3 Answers3

70

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.

nbrooks
  • 18,126
  • 5
  • 54
  • 66
  • 2
    Just adding to this: `action="process.php" method="post"` is no longer needed on the `
    ` element as the submission is being handled by the jQuery AJAX `.post()` method.
     – nyedidikeke Jun 20 '17 at 08:03
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>
Dan O
  • 6,022
  • 2
  • 32
  • 50
John Robertson
  • 1,486
  • 13
  • 16
  • 2
    Even better, use the [`serialize` method](http://api.jquery.com/serialize/) – Sean Vieira Sep 17 '14 at 02:18
  • 1
    @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 – John Robertson Sep 17 '14 at 02:21
  • 6
    `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, `` becomes `"firstName=Sean"`. – Sean Vieira Sep 17 '14 at 02:25
  • @SeanVieira ok thanks and then you just need to post or get the firstName? :) – John Robertson Sep 17 '14 at 02:26
  • Yes - then you can directly use that string in `$.ajax` or any of its cousins (`$.post`, `$.get`), as [this answer](http://stackoverflow.com/a/25881249/135978) does – Sean Vieira Sep 17 '14 at 02:28
7

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);
    });
});
MH2K9
  • 11,951
  • 7
  • 32
  • 49