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!
This question is related to
javascript
php
jquery
post
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);
});
});
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>
Source: Stackoverflow.com