I am trying to implement Google's reCaptcha v.2.0 but i am getting null in g-recaptcha-response due to this reCaptcha is not working properly and I am always getting the error that Please click on the reCAPTCHA box. even if I successfully submitted the Captcha. I var_dump the $_POST['g-recaptcha-response'] and I am getting null. Please help me. Below is my code.
HTML
<head>
<script src="https://www.google.com/recaptcha/api.js"></script>
</head>
<form action="" method="POST">
<div class="g-recaptcha" style="margin-left: 230px; margin-top: 40px;" data-sitekey="MySiteKey"></div>
</form>
PHP
if (isset($_POST['submit'])) {
if (isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])) {
//your site secret key
$secret = 'My Site Secret Key';
//get verify response data
$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=' . $secret . '&response=' . $_POST['g-recaptcha-response']);
$responseData = json_decode($verifyResponse);
if ($responseData->success) {
// My All Logic Here
} else {
$error[] = 'Robot verification failed, please try again.';
}
} else {
$error[] = 'Please click on the reCAPTCHA box.';
}
}
I am always getting the error Please click on the reCAPTCHA box. on successful submission too. Please help me. Thanks in advance.
Note:- There is no table tag used in between the Form.
I've run into the same issue. The strangest part is a client-side call to grecaptcha.getResponse() returns to correct response. For some reason it's just not setting g-recaptcha-response.
So my workaround was to set a data-callback function to populate a hidden field with the response and use that server-side instead. The hidden input also helps with ease of client-side validation.
eg:
<div class="g-recaptcha" data-callback="captcha_onclick" data-sitekey="######"></div>
<input type="hidden" name="recaptcha" id="recaptchaValidator" />
javascript:
function captcha_onclick() {
document.getElementById('recaptchaValidator').value = grecaptcha.getResponse();
}
server-side:
if(!empty($_POST['recaptcha'])) {
$captcha = $_POST['recaptcha'];
...
}
I'm not sure how you're submitting the form without an actual submit button, but I've copy/pasted your code and it works for me. I did change the error arrays into echo to display the else messages.
<!DOCTYPE html>
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js"></script>
</head>
<body>
<form action="" method="POST">
<div class="g-recaptcha" style="margin-left: 230px; margin-top: 40px;" data-sitekey="Your-Public-Site-Key"></div>
<input type="submit" name="submit" value="Post comment">
</form>
</body>
</html>
<?php
if( isset($_POST['submit']) ) {
if( isset($_POST['g-recaptcha-response']) && !empty( $_POST['g-recaptcha-response'] ) ) {
//your site secret key
$secret = 'Your-Private-Site-Key';
//get verify response data
$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['g-recaptcha-response']);
$responseData = json_decode($verifyResponse);
if($responseData->success) {
// My All Logic Here
echo 'Success Message';
}
else {
echo 'Robot verification failed, please try again.';
}
}
else {
echo 'Please click on the reCAPTCHA box.';
}
}
?>
Related
If for example a username isn't filled in the user is given an error stating so, but after pressing submit they're thrown to another page with the error.
How would I go around keeping the error on the same page as the registration form and keeping all the text entered by the user after submit?
Registration PHP:
<?php
require 'db_connect.php';
$count = 0;
if (isset($_POST['username']))
{
$username = $_POST['username'];
if (!empty($username))
{
$count++;
}
else
{
echo 'Please enter a username';
echo "<br>";
}
}
if (isset($_POST['email']))
{
$email = $_POST['email'];
if (!empty($email))
{
$count++;
}
else
{
echo 'Please enter an email';
echo "<br>";
}
}
if (isset($_POST['password']))
{
$password = $_POST['password'];
if (!empty($password))
{
$count++;
}
else
{
echo 'Please enter a password';
echo "<br>";
}
}
if(strlen($username) > 25)
header('Location: registration.php');
$hashword = password_hash($password,PASSWORD_DEFAULT);
if($count == 3 )
{
$query = "INSERT INTO member ( username, password, email)
VALUES ( '$username', '$hashword', '$email');";
header('Location: login.html');
}
else {
echo '<b>You will be redirected shortly</b>';
echo "<br>";
echo '<b>Please enter ALL details correctly</b>';
header( "refresh:5;url=registration.php" );
}
$result = mysqli_query($connection, $query) or die(mysqli_error($connection));
?>
Registration Form:
<!doctype html>
<html lang="en">
<head>
<title>Gumby template file</title>
<meta charset="utf-8" />
<script data-touch="gumby/js/libs" src="gumby/js/libs/gumby.min.js"></script>
<script src="gumby/js/libs/jquery-2.0.2.min.js"></script>
<link rel="stylesheet" href="gumby/css/gumby.css">
<script src="gumby/js/libs/modernizr-2.6.2.min.js"></script>
<link rel="stylesheet" href="forumhomepage_style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<form name="register" action="register.php" method="post">
<tr>
<td>Username: </td>
<td><input type="text" name="username" maxlength="25" /></td>
</tr>
<tr>
<td>Email: </td>
<td><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Register" /></td>
</tr>
</table>
</form>
</body>
</html>
It depends on at what level do you want to do this.
Validating that the different data is not empty and has information that makes sense (like the password is at least 7 chars long) can be done via javascript before sending the form data, this way you can stop the form to be sent. You can use jQuery Plugin Validator to help you do this.
But other validations like the insert has failed only can be done at server side, if you need also not to redirect in this case then you have to use ajax to load the data and then refresh the website info without reloading it.
I prefer to only do an initial check with javascript and send the user to the results page. But I also keep the validations as this one of the password length in the php because, even though now a days it's really strange, a user can disable javascript and I don't wana have surprises when checking the database values. But, another example, if you have lots of users you could check that the user does not exist to warn the user at the very first moment before the form is sent and this can only be done performing an ajax call.
You should know how to do both things and decide depending on what you want to do on your projects.
In your case, I would leave the php validations as they are now and check the same (non empty values) in javascript on the form submit event calling event.preventDefault() if an error has been detected.
$('form[name="register"]').submit(function( event ) {
if ($('input[name="username"]').is(":empty")) {
// append a "Username can not be empty message somewhere on your page
event.preventDefault();
}
// I let you finish the jquery code...
});
This example uses jQuery lib. but you can do it without it with just javascript if you want.
There are several ways to do this. The first step is using the required attribute in your input elements:
<input type="text" name="username" required>
This will force the user to at least put something inside the input element. Then there's Javascript or jQuery for client side validation. You can create a custom event handler to catch the form submit and validate the input like so:
document.getElementById("your_form_id_here").addEventListener("submit", function(e){
// Your Javascript validation code here, for example:
var x = document.forms["your_form_id_here"]["username"].value;
if (x == "") {
alert("Username must be filled out");
e.preventDefault();
}
});
You can also put the form handler on the same file as the form and display the errors / values in case something goes wrong. For example:
<?php
if(!empty($_POST['submit'])){
$error = false;
if($_POST['username'] === ''){
$usernameEmpty = 'The username was empty. Please enter a username!';
$error = true;
}
if(!$error){
// No errors found so proceed with the registration
}
}
?>
<form id="myForm" method="post" action="" accept-charset="utf-8">
<?php if(!empty($usernameEmpty)){ echo $usernameEmpty . '<br/>'; } ?>
Username: <input type="text" name="username" value="<?php if(!empty($_POST['username'])){ echo $_POST['username']; } ?>"/>
<input type="submit" name="submit" value="Register"/>
</form>
Lastly there's of course Ajax which will allow you to send the form towards PHP without reloading your page. You could have PHP send the errors back and use Javascript to show the errors inside the DOM.
without ajax you will need ro lead your page with some conditional logic. This will look and see if any fields are filled in and fill them in again, along with setting any error messages to return to the user.
something like:
<?php
//example fields
$username = '';
$field2 = '';
$field3 = '';
if(isset($errorToShow)){
// echo your error message here
}
if($_POST["submit"]){
foreach($_POST as $k=>$v){
$$k = $v;
}
}
// your form can be here.
of course there are other considerations and ajax is a better solution, but this type of thing can work just fine.
You may use ajax
Or if you don't know ajax
You can put all your code in one page and call $_POST indexes into the value of every input.
for ex.
<input type="text" name="username" maxlength="25" value="<?=$_POST['usename'];?>"/>
Or you may use "PHP $_SESSION"
Just store $_POST into $_SESSION
then call it from the html page
for ex.
<input type="text" name="username" maxlength="25" value="<?=$_SESSION['usename'];?>"/>
And the same idea for errors.
So, I'm trying to implement to some website the brand new Invisible reCaptcha by Google.
I am following the steps exactly but it continously gives me missing-input-reponse error.
HTML Code:
<form id="subscribe-form" class="form-inline" action="phpScripts/subscribe/subscribeHandler.php" method="post">
<div class="input-group">
<input type="email" name="email" class="form-control" size="50" placeholder="Email Address" required>
<div class="input-group-btn">
<button class="g-recaptcha btn btn-danger" data-sitekey="6LfoNhkUAAAAAEcQFx8vGHZKHXsZ_q0j2KDnmU9M" data-callback="submitForm">Subscribe</button>
</div>
</div>
</form>
PHP Code:
<?php
include 'databaseConnection.php';
if($_POST){
$secret = "MY SECRET KEY";
$captcha= $_POST['g-recaptcha-response'];
$ip = $_SERVER['REMOTE_ADDR'];
$url= file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secret&response=$captcha&remoteip=$ip");
print_r($url);
$decodedResponse = json_decode($url, TRUE);
if($decodedResponse['success'] == 1){//code here}
So, I'm thinking that my $captcha variable cannot "catch" nothing from the POST of g-recaptcha-response. But why, this is exactly how Google says and exactly as the old reCaptcha v2.
Aswell, i have included <script src='https://www.google.com/recaptcha/api.js'></script>
I was facing the same problem for several hours, until I finally understood the logic behind this "invisible-captcha" !
the reason you don't get a response is simply because there is an empty textarea element with an id and name of g-recaptcha-response
this textarea only populates with the response string after the challenge has been completed (which happens normally in the usual recaptcha), but for "invisible-captcha" you must explicitly call grecaptcha.execute(); with your "submit" button, after which the textarea is populated, and your form is automatically submitted (assuming you have bound the submission with your callback function).
In my case, I already have php handling the form and recaptcha validation, so I decided to stick with the old "checkbox" version (at least until it gets improved), because I realized it will be really annoying to change everything (form submission logic, button action and JavaScript code) just to hide a checkbox! especially that both methods are nearly the same !
The issue could be that you're tying the functionality to a button possibly.
Try implementing the code they give you when creating your keys:
<form id="subscribe-form" class="form-inline" action="phpScripts/subscribe/subscribeHandler.php" method="post">
<div class="input-group">
<input type="email" name="email" class="form-control" size="50" placeholder="Email Address" required>
<div class="g-recaptcha" data-sitekey="{keyhere}"></div>
<div class="input-group-btn">
<button class="btn btn-danger" data-sitekey=" data-callback="submitForm">Subscribe</button>
</div>
</div>
</form>
For the PHP logic validation:
if ( $_POST['g-recaptcha-response'] ) {
$secret = '{keyhere}';
$response = file_get_contents( "https://www.google.com/recaptcha/api/siteverify?secret=" . $secret . "&response=" . $_POST['g-recaptcha-response'] . "&remoteip=" . $_SERVER['REMOTE_ADDR'] );
$response = json_decode( $response );
if ( ! $response->success ) {
//return error
}
//code logic below
}
The div code provided when creating the keys should properly generate all of the HTML from their end to be able to processed by your PHP validation when submitting your form.
Here is a solution.
Client Side
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>reCaptcha</title>
<!--api link-->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<!--call back function-->
<script>
function onSubmit(token) {
document.getElementById('reCaptchaForm').submit();
}
</script>
</head>
<body>
<div class="container">
<form id="reCaptchaForm" action="signup.php" method="POST">
<input type="text" placeholder="type anything">
<!--Invisible reCaptcha configuration-->
<button class="g-recaptcha" data-sitekey="<your site key>" data-callback='onSubmit'>Submit</button>
<br/>
</form>
</div>
</body>
</html>
Server Side validation: Create a signup.php file
<?php
//only run when form is submitted
if(isset($_POST['g-recaptcha-response'])) {
$secretKey = '<your secret key>';
$response = $_POST['g-recaptcha-response'];
$remoteIp = $_SERVER['REMOTE_ADDR'];
$reCaptchaValidationUrl = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$response&remoteip=$remoteIp");
$result = json_decode($reCaptchaValidationUrl, TRUE);
//get response along side with all results
print_r($result);
if($result['success'] == 1) {
//True - What happens when user is verified
$userMessage = '<div>Success: you\'ve made it :)</div>';
} else {
//False - What happens when user is not verified
$userMessage = '<div>Fail: please try again :(</div>';
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>reCAPTCHA Response</title>
</head>
<body>
<?php
if(!empty($userMessage)) {
echo $userMessage;
}
?>
</body>
</html>
Use grecaptcha.reset() to reset the recaptcha after each execution and all should work just fine. Follow this link for more info on grecaptcha.reset().
This may be a simple question for some of you but i've been investigating it for the last hour and couldn't find the answer. I have a simple login form/script that has the following structure;
<?php
PHP code here to check for token (if true) and then check the db for username and password
if the token is false display error message
?>
<HTML>
HTML logon form here that sets the token
</HTML>
Now if there is an issue with the logon, i.e the password is incorrect the php will output the error message, trouble is that it will echo the output at the top of the form. I'd like to be able to insert it at another point of the form. i have a vague idea that i could inject it into the html with something like {logon_error} but i don't know what method thats called or how to use it.
You can store the error message in a php variable , for e.g. $error_msg = "Error! ... ";
And display that wherever you want in the html page like this:
<html>
...
<body>
...
<span><?= $error_msg; ?>
</body>
</html>
Store the error message in a variable, and use it afterwards.
Here's a working example to help you understand:
<?php
if (isset($_POST['FormSubmit'])) {
$username = $_POST['username'];
$password = $_POST['password'];
if ($username === 'admin' && $password === 'hunter2') {
# success
} else {
$error = 'Invalid credentials';
}
}
?>
<html>
<div id="errorContainer">
<?php echo (isset($error)) ? $error : ''; ?>
</div>
<form action="" method="post">
Username: <input type="text" name="username" /> <br />
Password: <input type="text" name="password" /> <br />
<input type="submit" name="FormSubmit" value="Submit!" />
</form>
</html>
If you have multiple checks, and want different error messages to be output, then you could store the error messages in an array instead. Your validation code should look like:
if (condition) {
$error[] = '...'
}
elseif (condition) {
$error[] = '...'
}
else (condition) {
$error[] = '...'
}
And then, to output it in your HTML, you can use a foreach construct with the alternate syntax:
<div id="errorContainer">
<?php foreach($errors as $error): ?>
<p class="error-content">
<?php echo $error; ?>
</p>
<?php endforeach; ?>
</div>
Note that this is a very basic example and is just for demonstration purposes. You should never trust user input. Your original form should contain all the necessary validation and should not be just a couple of if statements.
You would have to store the message in the session or take a look at https://github.com/plasticbrain/PHP-Flash-Messages
the main idea is $error_mesage = 'your error mesage here';
loadView('your-view')->with($error_message);
It's really simple, if you give more information about what kind of framework you are working with we may be able to assist you further.
You can do like this:
PHP:
if ($_SERVER["REQUEST_METHOD"] == "POST")
{
if (empty($_POST["username"]))
{$userErr = "Username is required";}
}
HTML:
<span class="error">* <?php echo $userErr;?></span>
You can do whatever you like using <?php echo ""; ?> in php to call it on your html.
I'm having difficulty figuring out why my PHP form is processing on process.php but not returning to the form page with the appropriate $messages. Am I missing a line of code? I wrote this all up myself and it's the first time.
Here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Contact Form - jQuery</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h3>Contact Us</h3>
<?php echo $contact_message; ?>
<form id="myForm" method="post" action="process.php">
<input name="name" type="text" value="<?php echo $_POST[name]; ?>" placeholder="Name" required/>
<br>
<input name="email" type="email" value="<?php echo $_POST[email]; ?>" placeholder="you#yourmail.com" required/>
<br>
<textarea name="message" class="message" placeholder="We can answer your questions." required>
<?php echo $_POST[message]; ?>
</textarea>
<br>
<button type="submit" name="submit" class="btn send">
<img src="img/send.png">
</button>
<br>
<?php echo $contact_success_message; ?>
</form>
<!--close contact form-->
</body>
</html>
And here is my process.php
<?php
//checks for valid email
function is_valid_email($email) {
$result = true;
$pattern = '/^([a-z0-9])(([-a-z0-9._])*([a-z0-9]))*\#([a-z0-9])(([a-z0-9-])*([a-z0-9]))+(\.([a-z0-9])([-a-z0-9_-])?([a-z0-9])+)+$/i';
if(!preg_match($pattern, $email)) {
$result = false;
}
return $result;
}
//when send is pressed, validate fields
if(isset($_POST['submit'])) {
$valid = true;
$contact_message = '';
if ( $_POST['name'] == "" ) {
$contact_message .= "You forgot to tell us your name. ";
$valid = false;
}
if ( !is_valid_email($_POST['email']) ) {
$contact_message .= "A valid email is required, don't worry we don't share it with anyone. ";
$valid = false;
}
if ( $_POST['message'] == "" ) {
$contact_message .= "What did you want to ask us? ";
$valid = false;
}
//if everything checks out, send the message!
if ( $valid == true ) {
$safe_email = str_replace("\r\n","",$_POST[email]);
$mail = "From: $_POST[name]\n";
$mail .= "Email: $_POST[email]\n";
$mail .= "$_POST[message]\n";
mail('ME#MYEMAIL.COM','New Contact from RN+',$mail,"From: $safe_email\r\n");
$contact_success_message = 'Brilliant I say! We will be in contact with you shortly.';
//clear form when submission is successful
unset($_POST);
}
}
?>
I could have sworn that I've used this before but this time it's not returning to the contact page.
It looks like you meant to use the code like this:
form.php
<?php include 'process.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Contact Form - jQuery</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h3>Contact Us</h3>
<?php echo $contact_message; ?>
<form id="myForm" method="post" action="process.php">
<input name="name" type="text" value="<?php echo $_POST[name]; ?>" placeholder="Name" required/><br>
<input name="email" type="email" value="<?php echo $_POST[email]; ?>" placeholder="you#yourmail.com" required/><br>
<textarea name="message" class="message" placeholder="We can answer your questions." required><?php echo $_POST[message]; ?></textarea><br>
<button type="submit" name="submit" class="btn send"><img src="img/se
__
formnd.png"></button><br>
<?php echo $contact_success_message; ?>
</form><!--close contact form-->
</body>
</html>
The form processor will set the appropriate variables you are outputting in your HTML code. Since process.php checks if the method is POST, you don't have to do that in the form page.
If you want process.php to redirect back to your form, you need to add a PHP header code like: header('Location: http://www.example.com/form.php');
If you want to carry through any data back to the original page, include it in the URL as a GET variable: header('Location: http://www.example.com/form.php?message='.$messagetext); You can then retrieve this on your form page through use of GET: echo $contact_success_message = $_GET['message'];
Do not forget to exit(); or die(); after your redirect!
If you don't have any reason for excluding a single PHP page, you could merge the two (form and process) into one php page.
<?php
//checks for valid email function
...
if(isset($_POST['submit'])) {
...
}
?>
...your HTML goes here...
This will display just the form if no data has been submitted, and if the form has been submitted will "reload" the page, perform the action, and display the appropriate message. Change the form action to action="" so the file will post to itself.
I would recommend using jQuery validation. It is easier and will help with any issues you might have in returning the message.
http://docs.jquery.com/Plugins/Validation
Something like this...
$("#myForm").validate({
rules: {
name: { required: true; }
},
messages: {
name: "You forgot to tell us your name.",
}
});
You can do this for email fields and for your whole form. You can find plenty of examples online.
Just include your other fields. If you do it this way the validation is client side and the form will process and then you forward to a thank you for contacting us page.
I'm learning web design and have run into a difficulty that I can't figure out by myself.
I want to dynamically load a form into a using jQuery. My code looks like this:
From within the main file:
$('#left_colum').click(function(e) {
e.preventDefault();
$('#column_left').load(create_album.php);
});
create_album.php -> it contains the actual form, as well as the php script that handles it on POST. It's very basic. If I load up my_form.php by its own, it works fine. If I dynamically load it as above; the HTML works but the POST php script doesn't execute.
There is also another interesting behavior; if I click the submit button on the dynamically loaded form, it all disappears (unlike the "properly" loaded one).
I've gone through a lot of posts and tutorials, and I haven't been able to find a solution other than using iframes. It seems that people generally don't dynamically load anything other than basic HTML that doesn't have to talk back to the server. I'm new to this : P
Is there a fix or another way of doing it? Thanks!
Edit:
albums.php:
<?php
include 'init.php';
if(!logged_in()) {
header("Location: index.php");
exit();
}
?>
<h3>Albums</h3>
<?php
/*Output albums*/
$albums = get_albums();
if(empty($albums)) {
echo("You don't have any albums");
} else {
/*Changed: uploading images is now part of the albums sections*/
foreach($albums as $album) {
echo '<p><a class="album_view" id="'.$album['id'].'" href="">', $album['name'], '</a> (', $album['count'], ' images)<br/>Description: ', $album['description'], '...<br/><a class="album_edit" id="'.$album['id'].'" href="">Edit</a> / Delete / <a class="upload_image" id="'.$album['id'].'" href="">Upload</a></p>';
}
}
?>
<script type="text/javascript">
$(document).ready(function() {
/*Creating albums*/
$('#create_album').click(function(e) {
e.preventDefault();
$('#column_left').load(album.php);
});
});
create_album.php:
<h3>Create Album</h3>
<?php
if(isset($_POST["album_name"], $_POST["album_description"])) {
echo 'got here';
$album_name = $_POST["album_name"];
$album_description = $_POST["album_description"];
$errors = array();
if(empty($album_name) || empty($album_description)) {
$errors[] = "Album name and description required";
} else {
if(strlen($album_name) > 55 || strlen($album_description) > 255) {
$errors[] = "Name/description too long";
}
}
if(!empty($errors)) {
foreach($errors as $error) {
echo $error, "<br/>";
}
} else {
echo 'got here, too';
//create_album($album_name, $album_description);
//header("Location: albums.php");
}
}
?>
<form action="" method="post">
<p>Name:<br/><input type="text" name="album_name" maxlength="55"/></p>
<p>Description:</br><textarea name="album_description" rows="6" cols="35" maxlength="255"></textarea></p>
<p><input type="submit" value="Create"/></p>
</form>
I think that's:
$('#column_left').load('my_form.php');
right?
Anyways:
Is the form showing up correctly?
Try having a look at the generated source, by using firebug, in order to see if the loading was successful
Make sure that "my_form.php" returned html isn't the whole <html> but just <form> and its content
What's the form action? Is it an absolute path or not? If it is relative, it may point to different locations when called from the ajax-loading page or from my_form.php
Are you submitting the form vja ajax, or "the standard way"?
What does exactly happen when you click on form submit? Where do you get redirected?
because your form action would be to a different page so every time you click submit button it redirect you to that page , you can try using iframe it will work that way or if you want to use jquery only than paste some of your code so that we can understand what's actually happening... though iframe is the best solution for you as if now
With your code, you load only the html part of you form. So when user push submit button, your fields had sended to original page and not to "my_form.php", where I suppose you manage POST datas.
The easiest solution is to use IFRAME to load you form code.
Your form action is missing try this, i have tried and working on my end
album.php
<h3>Create Album</h3>
<?php
if(isset($_POST["album_name"], $_POST["album_description"])) {
echo 'got here';
$album_name = $_POST["album_name"];
$album_description = $_POST["album_description"];
$errors = array();
if(empty($album_name) || empty($album_description)) {
$errors[] = "Album name and description required";
} else {
if(strlen($album_name) > 55 || strlen($album_description) > 255) {
$errors[] = "Name/description too long";
}
}
if(!empty($errors)) {
foreach($errors as $error) {
echo $error, "<br/>";
}
} else {
echo 'got here, too';
//create_album($album_name, $album_description);
//header("Location: albums.php");
}
}
?>
<form action="album.php" method="post">
<p>Name:<br/><input type="text" name="album_name" maxlength="55"/></p>
<p>Description:</br><textarea name="album_description" rows="6" cols="35 "maxlength="255"></textarea></p>
<p><input type="submit" value="Create"/></p>
yourmainfile.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#create_album').click(function(e) {
e.preventDefault();
$('#column_left').load('album.php');
});
});
</script>
</head>
<body>
<div id="mainWrapper">
<div id="column_left"></div><!-- end column left -->
Create New Album
</div><!--end mainWrapper-->
</body>
</html>