Translate

Saturday 22 November 2014

Uplaod PDF File into Database Using PHP and Javascript

Explaination:
In this tutorial i has explained about the upload the PDF file only using PHP  and Javascript.
SO this coding is easy to understand and very helpfull for the develoers for to code the 
sites.
enctype="multipart/form-data" - The enctype attribute specifies how the form-data should be encoded
when submitting it to the server.
action="" - The name of our PHP page that will be created, shortly.This can be used for after upload 
it work's through in that page which url u gave in that Action. 
method="POST" - Submits data to be processed to a specified resource.
input name="pdf" - uploadedfile is how we will access the file in our PHP script.

Now that we have the right HTML form wto upload the PDF files.

Typically, the PHP file should make a key decision with all uploads: keep the file or not accept. 
the folling files are not accept in the upload form.The including files are:

1.The file is too large and do not accept.

2.If u want to upload Images or CSV file or XLSX fole/Xls is should not upload.
3.There were problems uploading the file and so you can't keep it.


HTML FORM:
<form  action="pdf_upload.php" name="formLogin" method="post" enctype="multipart/form-data" onSubmit="return validate();">
<div class="form-group">
<input type="file" name="pdf" value="" id="file" class="form-control">
</div>
<div class="form-group">
<input type="submit" name="add" class="btn btn-primary">
</div>
</form>

pdf_upload.php:
When the pdf_upload.php file is executed, the uploaded file exists in a temporary storage area on the server. 
If the file is not moved to a different location it will be destroyed! To save our precious file we are going to need to make use of the
 $_FILES associative array.

The $_FILES array is where PHP stores all the information about files. 


   1.We have to POST the values throught the submit button.

   $_FILES['pdf']['name'] - name contains the original path of the user uploaded file.
   $_FILES['pdf']['name'] - tmp_name contains the path to the temporary file that resides on the server. The file should exist on the server in a temporary directory with a temporary name.
 Pdf is the name of the field.Now we can finally start to write a basic PHP upload manager script! Here is how we would get the temporary file name, choose a permanent name, and choose a place to store the file. 
<?php
error_reporting(0);
$conn=mysql_connect("localhost","root","") or die(mysql_error());
$db=mysql_select_db("db_name",$conn)or die(mysql_error());
$main=new main();

if(isset($_POST['add']))
{
if(($_FILES['pdf']['name']!='')) 
{ 
$name=str_replace("'","",$_FILES['pdf']['name']);
$pdf=$name;
$size=$_FILES['pdf']['size'];
$type=$_FILES['pdf']['type'];
$temp=$_FILES['pdf']['tmp_name'];
$target=("../pdf/".$pdf);
move_uploaded_file($temp,$target);
}
else
{
$error="** &nbsp; Check your file type &nbsp;!! &nbsp;**";
}
$insert="insert into file_tbl (id,file) values ('','$pdf')";
if($main->db->query($insert))
{
// header('location:dashboard.php');
}
else
{ 
$error="** &nbsp; Check your Connection &nbsp;!! &nbsp;**";
}
}
?>
Javascript:
<script type="text/javascript">
function validate(){var imgpath=$("#file").val();var imgpath1 = document.getElementById('file').value;if(imgpath1 == ""){alert( "Upload PDF File" );return false;}else{var arr1 = new Array;arr1 = imgpath.split("\\");var len = arr1.length;var img1 = arr1[len-1];var filext = img1.substring(img1.lastIndexOf(".")+1);if(filext == "pdf" || filext == "doc"|| filext == "docx"){}else{alert("Invalid File Format Selected");return false;}}}
</script>
Database Structure:
CREATE TABLE IF NOT EXISTS `file_tbl` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(100) NOT NULL,
  `study` varchar(55) NOT NULL,
  `file` varchar(200) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=34 ;


Friday 14 November 2014

Change the Text by using Javascript

Defintion of .html():
The html() method sets or returns the content (innerHTML) of the selected elements.
Get the HTML contents of the first element in the set of matched elements.
This method does not accept any arguments.
This method is not available on XML documents.

Description:
In an HTML document, .html() can be used to get the contents of any element. If the selector expression matches more than one element,
only the first match will have its HTML content returned.
 Example Code:
     $(".cointaner div").html();
Screenshot:
       Step 1:

 Step 2:


Style:
<style>
#type1
{
border: 1px solid #000;
float: left;
padding: 3px 67px 6px 50px;
width: 2px;background-color: #000000;
color: #FFFFFF;
}
#type2
{
border: 1px solid #000;
float: left;
padding: 3px 67px 6px 50px;
width: 2px;background-color:blue;
color: #FFFFFF;
}
.cointaner
{
border: 1px solid #FFF;
width:34%;
height:75px;
}
.heading1
{
margin:57px -15px 36px -115px;
}
#sel_hotel
{
font-size:16px;
color:green;
font-weight:bold;
}
</style>

HTML Form:
<body>
<form name="form1" id="form1" method="post">
<div class="cointaner">
<div id="type1" class="change_ho">PHP</div>
<div id="type2" class="change_ho">JS</div>
<div><input type="hidden" id="type3" name="type" value="PHP"></div>
<div align="center" class="heading1" id="sel_hotel">Search Creatersite</div>
</div>
</form>
</body>
Javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
//$("#type3").removeAttr("disabled");
$(".cointaner div").click(function(){
var htmlone=$(this).html();
$("#type1").removeClass("change_ho");
$("#type2").removeClass("change_ho");
if(htmlone == "PHP") {
$("#type3").val("PHP");
$("#sel_hotel").html("Search Creatersite");
}  else {
$("#type3").val("JS");
$("#sel_hotel").html("Creatersite is a Blog");
}
});
});
</script>

Thursday 13 November 2014

Concatenation the Strings in PHP and HTML

Defintion:
The concat() method is used to join two or more strings.
This method does not change the existing strings, but returns a new string containing the text of the joined strings.

Syntax:
string.concat(string1, string2, ..., stringX)
string1 - First string to be joined.
string2 - Second string to be joined. Up to N number of strings can be specified this way.

Explaination:
when you need Displaying more than one strings or combining the two strings where there may be variables or other things between them, 
it would be annoying to write a new statement to echo all the parts. php has a nice way of doing this for you, string concatenating
let me show you an example:
The . operator is the string concatenation operator and is very useful for situations like this. 
( i left spaces after and before '.' operators to make them more visible. this is not needed in fact. )

Example For HTML String
<div class="test"  name="<?php echo This." ".is." ".$row['name']." ".Blog; ?>"><div>

Example For PHP String
<?php 
echo '<div class="test" name=" '.This.' '.is.' '.$row['name'].' '.ucwords($row['blog']).'"></div>';
?>

Tuesday 11 November 2014

Append the HTML Elements Using Javascript and Jquery

Explaination:
Defintion of Append:
The append() method inserts specified content at the end of the selected elements.
           (or)

The .append() method inserts the specified content as the last child of each element in the jQuery collection.
Syntax:
$(selector).append(content,function(index,html))

Append means to add  r insert the elements using jquery.Here if we want to add the more forms using a button.
If we click on that button it will add the forms one by one if you dont want we can delete by using 
delete button for both add and delete the elements using ID's to delete."#add1" this can be used for
add the elements and "#delete1" this can be used for to delete the elements.I hope this tutorial is very helpfull for the add and delete the html elements using Javascript and Jquery.
Screenshot:

HTML Form:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body style="background-color: rgb(224, 255, 240);">
<form name="form" method="post" enctype="multipart/form-data" id="article">
<div class="col-sm-9" id="box" style="width: 27%;">
<div class="form-group col-sm-12" style="padding: 28px 0px 0px 6px;">
<label class="col-sm-2" style="float: left;">Title</label>
<div class="col-sm-2"> <select class="form-control" name="name_title[]" style="margin:2px 2px 2px 60px;"> <option>Dr.</option>  <option value="Dr.">Dr.</option>  <option value="Mr.">Mr.</option>  <option value="Mrs.">Mrs.</option>  <option value="Ms.">Ms.</option>  <option value="Prof.">Prof.</option></select></div>
</div>

<div class="form-group col-sm-12" style="padding: 28px 0px 0px 6px;">                  
<label class="col-sm-2" style="float: left;">First Name<sup class="star">*</sup></label>
<div class="col-sm-10"><input type="text" name="fname[]"  class="form-control" id="inputEmail3" placeholder="Enter Your First Name"></div>
</div>

<div class="form-group col-sm-12" style="padding: 28px 0px 0px 6px;">                  
<label class="col-sm-2" style="float: left;">Last Name</label>
<div class="col-sm-10"><input type="text"name="lname[]" class="form-control" id="inputEmail3" style="margin: 2px 2px 2px 11px;" placeholder="Enter Your Last Name"></div>
</div>

<div class="form-group col-sm-12" style="padding: 28px 0px 0px 6px;">                  
<label class="col-sm-2" style="float: left;">Email<sup class="star">*</sup></label>
<div class="col-sm-10"><input type="text" name="email[]"  class="form-control" id="inputEmail3" style="margin: 2px 2px 2px 45px;" placeholder="Enter Your Email Address"></div>
</div>

<div class="form-group col-sm-12" style="padding: 28px 0px 0px 6px;">                  
<label class="col-sm-2" style="float: left;">Affilate<sup class="star">*</sup></label>
<div class="col-sm-10"><input type="text" name="affilate[]" class="form-control" id="inputEmail3" style="margin: -21px 4px 3px 99px;"  placeholder="Enter Your Affilate"></div>
</div>

<div class="form-group col-sm-12" style="padding: 28px 0px 0px 6px;">                  
<label class="col-sm-2" style="float: left;">Mobile</label>
<div class="col-sm-10"><input type="text" name="mobile[]" class="form-control" id="inputEmail3" style="margin: -20px 2px 2px 98px;" placeholder="Enter Your Mobile"></div>
</div>

<div class="form-group col-sm-12" style="padding: 28px 0px 0px 6px;">                  
<label class="col-sm-2" style="float: left;">Coressponding Author</label>
<div class="col-sm-1"><input type="radio" name="head[]" class="form-control" style="margin: 2px 2px 2px 20px;"/></div>
</div>
</div>

<div  class="field"><div id="label"> </div>

<label class="col-sm-3"></label>
<div class="col-sm-4">  <input type="submit" name="add_author" id="add1" value="Add Author">  <input type="submit" name="delete1" class="add-button" value="Delete" id="delete1" > </div>
</div>
</form>
</body>
</html>
Javascript:
<script type="text/javascript">
$(document).ready(function(){
var counter = 1;
$("#add1").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}   
else
{
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);

newTextBoxDiv.after().html(' <div id="box" class="col-sm-12" style="width: 100%;"><div class="form-group col-sm-12" style="padding: 28px 0px 0px 62px;"><label class="col-sm-2"  style="float: left;">Title</label><div class="col-sm-2"> <select class="form-control" name="name_title[]" style="margin:2px 2px 2px 10px;"> <option>Dr.</option> <option value="Dr.">Dr.</option>  <option value="Mr.">Mr.</option>  <option value="Mrs.">Mrs.</option>  <option value="Ms.">Ms.</option><option value="Prof.">Prof.</option></select></div></div><div class="form-group col-sm-12" style="padding: 28px 0px 0px 6px;"><label class="col-sm-2"  style="float: left;">First Name<sup class="star">*</sup></label><div class="col-sm-10"><input type="text" name="fname[]"  class="form-control" id="inputEmail3" placeholder="Enter Your First Name"  ></div></div><div class="form-group col-sm-12" style="padding: 28px 0px 0px 6px;"><label class="col-sm-2"  style="float: left;">Last Name</label><div class="col-sm-10"><input type="text"name="lname[]" class="form-control" id="inputEmail3" placeholder="Enter Your Last Name"  style="margin: 2px 2px 2px 11px;"></div></div><div class="form-group col-sm-12" style="padding: 28px 0px 0px 6px;"><label class="col-sm-2"  style="float: left;">Email<sup class="star">*</sup></label><div class="col-sm-10"><input type="text" name="email[]"  style="margin: 2px 2px 2px 45px;" class="form-control" id="inputEmail3" placeholder="Enter Your Email Address"></div></div><div class="form-group col-sm-12" style="padding: 28px 0px 0px 6px;"><label class="col-sm-2"  style="float: left;">Affilate<sup class="star">*</sup></label><div class="col-sm-10"><input type="text" name="affilate[]" class="form-control" id="inputEmail3" placeholder="Enter Your Affilate" style="margin: -21px 2px 2px 100px;"></div></div><div class="form-group col-sm-12" style="padding: 28px 0px 0px 36px;"><label class="col-sm-2"  style="float: left;">Mobile</label><div class="col-sm-10"><input type="text" name="mobile[]" class="form-control" id="inputEmail3" placeholder="Enter Your Mobile" style="margin:-20px 2px 2px 69px;"></div></div><div class="form-group col-sm-12" style="padding: 28px 0px 0px 6px;"><label class="col-sm-2"  style="float: left;">Coressponding Author</label><div class="col-sm-1"><input type="radio" name="head[]" value="+counter+" class="form-control" style="margin: 2px 2px 2px 20px;"/></div></div></div> </div>');
newTextBoxDiv.appendTo("#box");
counter++;
return false;
}
});


$("#delete1").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}   
counter--;
$("#TextBoxDiv" + counter).remove();

return false;
});

$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>


Monday 10 November 2014

Simple Pagination Using PHP with Mysql

Explaination:
In this Tutorial i explained simple Pagination Using PHP.Here not include any javascript and
Jquery library files.Only by using PHP only i done the Pagination with fetching datas from 
database.Just here we can get that id and pass that in to pagination href link.
I hope this tutorial is very helpfull for the Developers as well as the learners also.
Screenshot:
DB Connection:
<?php
$query1=mysql_connect("localhost","root","");
mysql_select_db("db_name",$query1);
?> 
Style.css:
<style type="text/css">
.page
{
margin: -44px 17px 3px 166px;
padding: 0;height: 29px;
}
.page li
{
list-style: none;
display:inline-block;
}
.page li a, .current
{
display: block;
padding: 5px;
text-decoration: none;
color: #blue;
font-weight:bold
margin: 33px 2px 2px;
border:1px solid black;
}
.current{
display: block;
padding: 5px;
text-decoration: none;
color: #FFF;
border: 1px solid #000;
font-size: 16px;
background: #000;
}
.button
{
padding: 5px 15px;
text-decoration: none;
color: #F3F3F3;
font-size: 13PX;
border-radius: 2PX;
margin: 0 4PX;
display: block;
margin: -7px 961px 13px 270px;
padding: 7px 3px;
}
.button1{
text-decoration: none;
margin: 10px 1136px -36px 84px;
font-size: 13px;
border-radius: 2px;
display: block;
padding: 6px 40px;
}
</style>
Pagination Coding from Database:
Screenshot:
<body>
<table width="60%" cellpadding="7" cellspacing="0" border="1" style="margin: 59px 0px 3px;
font-size:14px;">
<thead>
<tr class="table_tr1">
<th>S.No</th>
<th >Name</th>
<th >Mobile_no</th>
<th>Email_id</th>
<th>City</th>
<th>Message</th>
<th>Created On</th>
</tr>
</thead>

<?php
$start=0;
$limit=3;
$rows=mysql_num_rows(mysql_query("select * from form"));
$total=ceil($rows/$limit);
if(isset($_GET['id']))
{
    $id=$_GET['id'];
    $start=($id-1)*$limit;
    if($id>1)
{
    echo "<a  href='?id=".($id-1)."' class='button1'><img src='arrow_left.png' width='22px'
 height='22px'/></a>";
}
if($id!=$total)
{
    echo "<a  href='?id=".($id+1)."' class='button'><img src='arrow_right.png'  width='22px'
 height='22px'/></a>";
}
    
$i=($id-1)*$limit+1;

$query=mysql_query("select * from form LIMIT $start, $limit");

echo "<div>";
if($rows>0)
 {
while($row=mysql_fetch_array($query))
{
    $id=$row['id'];
  $name=$row['name'];
  $mobileno=$row['mobileno'];
  //$seat_numbers = str_replace(",", ", ", $seat_numbers); 
  $email_id=$row['email_id'];
  $starting_city=$row['starting_city'];
  $message=$row['message'];
  $createdon=$row['created_on'];
  
  echo "<tr class='table_tr2' style='text-align:center;'>";
  echo "<td>" . $i++. "</td>";
  echo "<td>" . $name. "</td>";
  echo "<td>" . $mobileno. "</td>";
   echo "<td>" . $email_id. "</td>";
  echo "<td>" . $starting_city. "</td>";
  echo "<td>" . $message . "</td>";
  echo "<td> " . $createdon ."</td>";
  echo "</tr>";
 
}
}
else
{
    echo "<tr>";
    echo "<td  align='center' style='font-weight: bold;  font-size: 20px;color:#3399FF;
text-align:center;'>NO DATA FOUND</td>";
    echo "</tr>";
    echo "</table>";
}
} 
$id=$_REQUEST['id'];
echo "<ul class='page'>";
        for($i=1;$i<=$total;$i++)
        {
            if($i==$id) { echo "<li class='current'>".$i."</li>"; }
            
            else { echo "<li><a href='?id=".$i."'>".$i."</a></li>"; }
        }
echo "</ul>";
?>

</body>
</html> 
 Screenshot For Dispaly Results:
Database Structure:

--
-- Table structure for table `form`
--

CREATE TABLE IF NOT EXISTS `form` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL,
  `mobileno` bigint(12) NOT NULL,
  `email_id` varchar(50) NOT NULL,
  `starting_city` varchar(100) 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 ; 
 

Thursday 6 November 2014

Calendar Function Onclick event on Dates using Ajax and Javascript

Explaination:
In this tutorial  has explained about the calendar function usinh Ajax and Javascript function.Here if we click on that datys numbers according to that days and month is to be displayed in to days tabs by using Ajax and Javascript.In the javascriptwe have to written the coding as defaultView: 'agendaDay',because acyually in the id function as calendar #calendar here we have to pass the varualble as defaultDate and defaultView and dat_req are important variable this two have to write over there.In the default date the request date is to been displayed and the default view the js varialbe is 'agendaDay' have to write in that place.$_REQUEST['dates'].I hope this POst is very usefull for to develop diffferent calendar function using javascript in PHP.

Screenshot:



Css style:
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}

#calendar {
max-width: 900px;
margin: 0 auto;
}
.fc-today-button ui-button ui-state-default ui-corner-left ui-corner-right ui-state-disabled
{
display:block;
}
</style> 



Library Css Styles:
<link rel='stylesheet' href='jquery-ui.min.css' />
<link href='fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar.print.css' rel='stylesheet' media='print' />
Download Css Files:
jquery-ui.min.css
fullcalendar.css
fullcalendar.print.css
Library Javascript Styles:
<script src='moment.min.js'></script>
<script src='jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
Download Js Files:
moment.js,jquery.min.js,fullcalendar.min.js
moment.js,jquery.min.js,fullcalendar.min.js
Main-javacsript:
<script type="text/javascript">$(document).ready(function(){var d = new Date();var n = d.getMonth(); var dt = d.getDate(); var y = d.getFullYear(); var mon = Number(n)+1;var cur_date = y+'-'+mon+'-'+dt;if(Number(dt) <= 9){ var dt1 = '0'+dt;} else{var dt1 = dt; } var dat_req = <?php echo $dates; ?>;var cur_date1 = y+'-'+mon+'-'+dt1; getJsnData(dat_req); var myArray = jQuery.parseJSON(data_result); $('#calendar').fullCalendar({theme: true,header: {left: 'prev,next',center: 'title',right: 'month,agendaWeek,agendaDay'}, defaultDate: dat_req, defaultView: 'agendaDay',editable: true,eventLimit: true, events:myArray });}); </script>
Form:

<body><div id='calendar'></div></body></html>

PHP function to Pass the Variable:

if(isset($_REQUEST['dates'])){$dates = "'".$_REQUEST['dates']."'";} else{$dates = "'".date('Y-m-d')."'";}?>

This Script Pass from JS file:

<script type="text/javascript">
var data_result = 0;
var data_result2= 0;function getJsnData(dates){}function data(dat){ var url = "nlog.php?dates="+dat;window.location=url;} </script>

Adding Select Option Field using PHP and Javascript

Explaination:
In this tutorial i has explained the about the onchange events for append javascript(ie.,Adding Select Option Field by Onchange events using Javascript).
We will call the function onchange where we pass the attributs there we call the event function.In the select option field according to that field we
have to add the extra fields means there should be call the functions.The other two fields names have to be take it to be an array[].Then we will pass the
two field id's into javascript.By using the msdropdown javascript and that css is used to design the dropdown fields.id="addDetails" is very important
to dispaly the results of the div.Then append function is play an important role for adding the extra <select><option>....</option></select> fields.
I hope this tutorial is very usefull to use the javascript in an different manner.
By using this style only the drop down field is been displayed properly 

style.css:
<style>.float_left {
float: left !important;
}
.clear{clear:both; margin: 2px 2px 2px 110px;}
</style> 
Form:
<form action="" name="form"><div class="padding8 float_left hotel_age_part_select" >Rooms<br/><select class="text_box_radius adult_hotel_textbox" id="roomno" name="rooms" style="float:left;background: none repeat scroll 0 0 rgba(0, 0, 0, 0);border: 1px solid #A4A4A4; border-radius: 5px;float: left;height:34px; padding: padding: 3px 1px 2px 0;;width: 110px !important;#5B5B5B;" onchange="addRooms(this.value);"><option>1</option><option>2</option><option>3</option><option>4</option></select></div> <div class="padding8 float_left hotel_age_part_select" ><span style="margin-left: 45px;">Adults</span><br/><img src="room1.png" style="float:left;margin:-5px 2px 0 0;"/><select class="text_box_radius adult_hotel_textbox " id="adult1" name="adults[]" style="float:left;background: none repeat scroll 0 0 rgba(0, 0, 0, 0);border: 1px solid #A4A4A4; border-radius: 5px;float: left;height:34px; padding: padding: 3px 1px 2px 0;;width: 110px !important;#5B5B5B;" ><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select></div> <div class="padding8 float_left hotel_age_part_select" >Childrens<br/><select class="text_box_radius adult_hotel_textbox " id="child1" name="child[]" style="float:left;background: none repeat scroll 0 0 rgba(0, 0, 0, 0);border: 1px solid #A4A4A4; border-radius: 5px;float: left;height:34px; padding: padding: 3px 1px 2px 0;;width: 110px !important;#5B5B5B;" ><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select></div> <div id="addDetails"></div></form> 

Note:If u want the images also want to be displayed along with the fields you store it to be in your folder.Here what the class i have called means thatshould be very important suppose if you may change u shouls call th correct style on their otherwise it should be very prob's so be carefull if u may changethe class name in this coding.
Css and Javascript files: 
<link href="msdropdown.css" rel="stylesheet" type="text/css" /><script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="jquery.dd.min.js"></script>

Download the js and css files:msdropdown.css,jquery.dd.min.js

Javascript Main Function:
<script type="text/javascript">
function addRooms(rooms) {
$("#addDetails").html("");
if(rooms > 1)
{
for(var i=2;i<=rooms;i++) {
var roomHtml = '<div class="clear"><div class="padding8 float_left hotel_age_part_select"><img src="room'+i+'.png" style="float:left;"><select class="text_box_radius adult_hotel_textbox" id="adult'+i+'" name="adults[]" style="float:left"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select></div><div class="padding8 float_left hotel_age_part_select"><select class="text_box_radius adult_hotel_textbox" id="child'+i+'" name="child[]" ><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select></div></div>';
$("#addDetails").append(roomHtml);
$("#adult"+i).msDropdown().data("dd");
$("#child"+i).msDropdown().data("dd");
}}}
</script>

Screenshots:




Step 1:

Step 2:

Step 3:

Step 4: