Sometime you want to save the information entered in your form before redirecting to Paypal payment. The problem with web forms is that when you submit the it, it has only one way post submission before redirecting to a page. Unfortunately you can't submit a form with two actions being called (to redirect to paypal and to save to the database), that's where Ajax and Javascript comes into action.
You can do this in many way but it's more convenient to use Ajax for this. With Ajax, Web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. So eventually before the form being sent to Paypal, the Ajax script will be executed first (your save to database script) and will allow you to execute certain processes afterwards (like redirecting to a page).
So if you want to save the information from your form to your database you can do this trick.
Your form will be something like this together with the Paypal form fields you specified.
HTML form
<form action="https://www.paypal.com/cgi-bin/webscr" name="ligit" method="POST" id="senrollnow" target="_top" >
<!-- THE THREE FIELDS BELOW ARE NOT FROM PAYPAL BUT YOU WANT IT TO SAVE IN THER DATABASE -->
<input type="text" placeholder="First Name" name="first_name" required />
<input type="text" placeholder="Last Name" name="last_name" required />
<input type="email" placeholder="Email" name="email" required />
<!-- BELOW ARE PAYPAL FIELDS FROM PAYPAL GENERATION -->
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="......">
<input type="hidden" name="on0" value="Courses Options">Courses Options
<select name="os0">
<option value="Basic (30 mins)">Basic (30 mins) : $69.00 AUD - monthly</option>
<option value="Basic (1 hour)">Basic (1 hour) : $129.00 AUD - monthly</option>
<option value="Standard (30 mins)">Standard (30 mins) : $69.00 AUD - monthly</option>
<option value="Standard (1 hour)">Standard (1 hour) : $129.00 AUD - monthly</option>
<option value="International (30 mins)">International (30 mins) : $69.00 AUD - monthly</option>
<option value="International (1 hour)">International (1 hour) : $129.00 AUD - monthly</option>
</select>
<input type="hidden" name="currency_code" value="AUD">
<input class="pulse-shrink" type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
Above is the HTML form generated by Paypal. In addition three input fields are added to capture some useful information from the users.
Ajax
Put it in the header of the HTML.
<script>
$(function () {
$('#senrollnow').on('submit', function (e) {
var form = $(this);
if(!form.hasClass('pending')) {
e.preventDefault();
form.addClass('pending');
$.ajax({
type: 'post',
url: 'insert.php',
data: $('#senrollnow').serialize(),
success: function () {
form.submit();
alert('form was submitted'+data);
}
});
}
});
$('#freeform').on('submit', function (e) {
//e.preventDefault(); //prevents the form to submit
alert("Your request has been sent! Please check your email within 12 hours for my feedback. Thank you.");
});
});
</script>
The Ajax script recognizes a form, identified by an ID #senrollnow that is being triggered for submission. The scripts determine if a 'pending' class is in the form, then stops the submission for a while and trigger a process which involves calling a certain page named insert.php. By adding the 'pending' class, the scripts continues, then the form submission continues.
Insert.php
<?php
require_once "dbconfig.php";
// escape variables for security
$firstname = mysqli_real_escape_string($con, $_POST['first_name']);
$lastname = mysqli_real_escape_string($con, $_POST['last_name']);
$email = mysqli_real_escape_string($con, $_POST['email']);
$type = mysqli_real_escape_string($con, $_POST['os0']);
$date = date_create();
$created = date_format($date, 'Y-m-d H:i:s');
$sql="INSERT INTO student (first_name, last_name, email, type, created)
VALUES ('$firstname', '$lastname', '$email', '$type', '$created')";
if (!mysqli_query($con,$sql)) {
die('Error: ' . mysqli_error($con));
}
header('Location: index.php');
?>
The idea is simple but very useful make sure you are calling the right ID for your form and the insert script is certainly running.
So that's it. Just leave comments if you have certain problem with it.
Cheers.Labels: Ajax, PHP, Scripts, Tutorial
