Translate

Tuesday 4 November 2014

Registration Form in Lightbox Dynamically with MYSQL Using PHP and Javascript

Explaination:
In this tutorial i have explained the way of in Lightbox the form(i.e.,,Registration form,Send Enquiry Form) Using PHP.In this tutorial using PHP and Js
First step we have to call a class as click r anyothername i.e.,class='click'But we should call this class function in JS as
Onclick function $('.click').click(function().At what form we have to display in Lightbox there we should put an class='popup' or someother
also but it should be use it in JS $('.close').click(function(). I hope This Tutorial is very helpfull for the Developers.
Form:<html>
<form>
<head></head>
<body>
<a href='' class='click' style="text-decoration:none;"><input type="button" value="Send Enquiry"></a>
</body>
</form>
</html>
Display Form in Lightbox:<div class='popup'>
<div class='content'>
<img src="../images/close2.png" class='x' id='x'>
<div class="middilecontianer">
<form name="form" method="post" >
<input type="hidden" name="package" id="package" placeholder="package" required="required" class="popUp_text" >
<div style="width:50%; float:left;">
<span>
<img src="../img/user.png" height="16" width="16" class="img_icon" />
<input type="text" name="name" id="client" placeholder="Name" required="required" class="popUp_text" >
</span>
</div>
<div style="width:50%; float:left;">
<span>
<img src="../img/mobile.png" height="16" width="16" class="img_icon" />
<input type="text" name="mobileno" id="contact" placeholder="Contact Number" required="required" class="popUp_text" >
</span>
</div>
<div style="width:50%; float:left; margin-top:20px;">
<span>
<img src="../img/mail.png" height="16" width="16" class="img_icon" />
<input type="text" name="email_id" id="mail" placeholder="E-mail Id" required="required" class="popUp_text">
</span>
</div>
<div style="width:50%; float:left; margin-top:20px;">
<span>
<img src="../img/loc.png" height="16" width="16" class="img_icon" />
<input type="text" name="starting_city" id="point" placeholder="Starting Point" required="required" class="popUp_text">
</span>
</div>
<div style="width:50%; float:left; margin-top:20px;">
<span>
<img src="../img/datepicker2.png" height="16" width="16" class="img_icon" />
<input type="text" name="travel_date" id="datepicker" placeholder="Select Travel Date" required="required" class="popUp_text">
</span>
</div>
<div style="width:100%; float:left; margin-top:20px;">
<span>
<img src="../img/message.png" height="16" width="16" class="img_icon1" />
<textarea name="message" placeholder="Message" style="width: 60%; height: 109px;" id="message" required="required" class="popUp_textarea"></textarea>
</span>
</div>
<div style="float:">
<input type="submit" name="form" value="submit" class="ht-button ht-autowidth ht-right" style="margin: 21px 266px 2px 2px;" />
</div>
</form>
</div>
</p>
</div>
</div>
PHP insert coding :<?php
if(isset($_POST['form']))
{
$refid=$row['refid'];
$name=$_POST['name'];
$email_id=$_POST['email_id'];
$mobileno=$_POST['mobileno'];
$city=$_POST['city'];
$dates=$_POST['date'];
$date = date('Y-m-d',strtotime($dates));
$message=mysql_real_escape_string($_POST['message']);
$form="insert into form(package_id,name,email_id,mobileno,city,date,message) values('$package_id','$name','$email_id','$mobileno','$city','$date','$message')";
$insert_form=mysql_query($form);
}
?>
Javascript Success condition after inserting:<?php
if(isset($_POST['form']))
{
echo '<script type="text/javascript">alert("Inserted Successfully");</script>';
}
?>
Databse Structure:Databse Structure
---- Table structure for table `form`
-- CREATE TABLE IF NOT EXISTS `form` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`refid_id` varchar(100) NOT NULL,
`name` varchar(100) NOT NULL,
`mobileno` bigint(12) NOT NULL,
`email_id` varchar(50) NOT NULL,
`city` varchar(100) NOT NULL,
`date` date NOT NULL,
`message` longtext NOT NULL,
`created_on` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=137 ;

















No comments:

Post a Comment