Auto Post Using Javascript

December 5, 2009 — leoganda

Hi there, a few weeks ago I was doing research about auto post from webpage to paypal payment page. The basic idea is the visitor fill the form, then when the visitor submit the form we will store visitor data input to database. Once data stored in database the page will be automatically redirected to paypal website. It’s pretty easy, we will use JavaScript to do auto post. I wanna make this article as simple as possible, I just wanna show how to do auto post with Javascript.

1. Database

We will use simple database for this experiment, single table with 4 columns ( id, first_name, last_name, package).

CREATE TABLE `javascriptpost`.`sales` (
`id` INT( 6 ) NOT NULL AUTO_INCREMENT ,
`first_name` VARCHAR( 30 ) NOT NULL ,
`last_name` VARCHAR( 30 ) NOT NULL ,
`package` VARCHAR( 10 ) NOT NULL ,
PRIMARY KEY ( `id` )
) ENGINE = MYISAM ;

2. Form (index.php)

First we need a basic form for user to input, data will be posted to post.php.

<html>
	<body>
		<form action="post.php" method="post">						
				<p>
				<label>First Name</label>
				<input type="text" id="first_name" name="first_name"/>
				</p>
				<p>
				<label>Last Name</label>
				<input type="text" id="last_name" name="last_name"/>
				</p>				
				<p>
				<label>Package</label>
				<select id="package" name="package">
					<option value="A">A</option>
					<option value="B">B</option>
					<option value="C">C</option>
				</select>
				</p>				
				<input type="submit" value="submit"/>				
		</form>
	<body>
</html>

3. Post.php

In post.php we will retrieve the posted data from index.php and store the data to database.
Once data stored, the pages will be redirected to paypal website.

We will use javascript syntax to do autopost,

<script language="JavaScript">
var time = null
function subm() {
document.getElementById('paypal').submit();
}
</script>

post.php

 
<?php
if ( isSet($_POST['first_name']) )
{
	$firstname=$_POST['first_name'];
	$lastname=$_POST['last_name'];
	$package=$_POST['package'];
 
	switch($package)
	{
		case "A": $amount=10;break;
		case "B": $amount=20;break;
		case "C": $amount=30;break;
		default : $amount=0;
	}
 
	$sql = "INSERT INTO sales (first_name,last_name,package) values ('$firstname','$lastname','$package')";
	$con = mysql_connect("localhost","root","");
	if (!$con)
	  {
	  die('Could not connect: ' . mysql_error());
	  }
 
	mysql_select_db("javascriptpost", $con);
	mysql_query($sql);//insert to database
}
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
 
<script language="JavaScript">
var time = null
function subm() {
document.getElementById('paypal').submit();
}
</script>
 
</head>
	<body  onload="timer=setTimeout('subm()',2500)">
        <div id="content">
  			<center>
            	<h3>Thank you for booking</h3>                
                <p>Now we will redirect to payment page</p>            
            </center>
				<form action="https://www.paypal.com/cgi-bin/webscr" method="post" onSubmit="" name="paypal" id="paypal">
					    <input type="hidden" name="cmd" value="_xclick">
						<input type="hidden" name="business" value="your-email@email.com">
						<input type="hidden" name="item_name" value="Package <?php echo $package;?>">
						<input type="hidden" name="amount" value="<?php echo $amount;?>">
						<input type="hidden" name="currency_code" value="USD">
						<input type="hidden" name="return" value="http://www.leoganda.net">
						<input type="hidden" name="defined_quantity" value="1">
				</form>
			</div><!--content-->
	</body>
</html>

No related posts.

Posted in PHP, Tips. RSS feed for comments on this post.. TrackBack URL.

Leave a comment

«
»