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

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!

Solution 1

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.

Solution 2

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>

Solution 3

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

Comments

[Sean Vieira]

Even better, use the serialize method

[John Robertson]

@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]

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

[John Robertson]

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

[Sean Vieira]

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

[nyedidikeke]

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.