Popup form using jQuery
Tags: jquery, popupform
Published: 2017-08-23 12:43:06

---
title: Popup form using jQuery
published: true
description: 
tags: jQuery #pop-up-form
---
#Pop-up window
Pop-up window is a child window inside the parent window that blocks interaction with parent window.There are also some options in a pop-up window to react with.Now a days websites use this feature a lot.This window is mainly used for collection of review of a website or for a feedback.Some websites use Pop-up box as a login window.Making a pop-up box is very easy using `jQuery`.
#jQuery
jQuery is a cross platform,free,open source `JavaScript library`.It is used as a client side programming language with html.jQuery is supported by most of the browsers.The main purpose of using jQuery is to obtain a dynamic website.jQuery is used for animation,[DOM](https://www.w3.org/TR/WD-DOM/introduction.html),events,ajax etc.

## Here's the code for making a simple jQuery feedback form##
```html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>popup</title>
</head>  
<body style="background-image: url('aa.jpg');background-image: cover;">
	
	<!--review button-->
	<input type="button" id="reviews" value="reviews" name="" style="margin-left: 35%;margin-right: 20%;margin-top: 2%;margin-bottom: 2%;height: 50px;background-color: #884FF3;text-align: center;width: 10%;border-radius: 5%;
	position: fixed;">

	<!--feedback button-->
	<input type="button" id="feedback" value="feedback" name="" style="margin-left: 55%;margin-right: 20%;margin-top: 2%;margin-bottom: 2%;height: 50px;background-color: #884FF3;text-align: center;width: 10%;border-radius: 5%;
	position: relative;">
	<!--welcome message -->
	<div class="pop" style="z-index: 4;margin-left: 20%;margin-right: 20%;margin-top: 10%;margin-bottom: 2%;height: 30%;background-color: #768b8e;text-align: center;border-radius: 5%"><br/><h1>  	WELCOME </h1><br></div>

	<!--review -->
	<div id="pop1" z-index="1"  style="margin-left: 20%;margin-right: 20%;margin-top: 5%;margin-bottom: 2%;height: 30%; background-color: #40858e;text-align: center; position: fixed; display: none; width: 60%;border-radius: 5%"><h2> REVIEWS </h2>
<h3 >&nbsp&nbsp&nbsp&nbsp&nbsp Name  :  <input type="TextBox" style="opacity: 0.5;width: 25%;" id="txtNamef" name="txt" placeholder=" you can't edit this field" value="" disabled="disabled"></h3>
 <h3>Feedback :	<input type="TextBox"  style="opacity: 0.5;width: 25%;" id="txtf" name="txt" placeholder=" you can't edit this field " value="" disabled="disabled"></h3>
   <input type="button" class="close" value="close" width="1000px">

	</div>
	

<!--feedback-->
	<div class="pop-feed" style="background-color: #995892:; position:fixed;display: none; ">
	
	<div id="pop2" z-index="1"; style="margin-left: 20%;margin-right: 20%;margin-top: 5%;margin-bottom: 2%;height: 40%;background-color: #40858e;text-align: center;width: 60%;border-radius: 5%;
	position: fixed;">
	<h2> &nbsp&nbsp&nbspFEEDBACK</h2>
		<h3>  &nbsp&nbsp&nbsp&nbsp&nbsp  Name  :  &nbsp&nbsp&nbsp <input style="opacity: 0.5;width: 25%;" type="TextBox" id="txtName" class="txt" name="txt" placeholder="enter your name " value=""></h3>
    <h3>Feedback  : &nbsp&nbsp <textarea style="opacity: 0.5;width: 25%;" id="txt" class="txt" name="txtFeedback" value="" placeholder="enter your opinion"></textarea> </h3>
	<br>
		<input type="submit" " value="FEEDBACK" disabled="disabled" style="height: 15%;background-color: #884FF3;text-align: center;width: 15%;border-radius: 5%;
	">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
	<input type="button" class="close" value="CLOSE" style="height: 15%;background-color: #884FF3;text-align: center;width: 10%;border-radius: 5%;">
	</div>
	</div>
	
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="popup.js">
	</script>

</body>
</html>
```
```javascript

$(document).ready(function(){
	$('.pop').delay('2000').fadeOut('5000');
	
	$('.close').click(function(){
		$('#pop1').hide('slow');
		$('#pop2').hide('slow');
	});

	
	$('.txt').change(function(){
	$(':submit').removeAttr('disabled');
	});
	$(':submit').click(function(){
		
		$('.txt').attr('value','nilanjana');
		alert('feedback submitted successfuly');
		var txtName =  $('#txtName').val();
		var txt =  $('#txt').val();
		alert(' NAME :'+txtName+' 		FEEDBACK :'+txt);
		$('#txtNamef').attr('value',txtName);
		$('#txtf').attr('value',txt);
		$('.pop-outer').fadeOut('slow');
		$('#pop1').fadeIn('slow');
		$('#pop1').delay('3000').fadeOut('slow');

	});
	
	
	$('.close').click(function(){
		$('.pop-outer').fadeOut('slow');
	});

	$('#reviews').click(function(){
		$('.pop-outer').hide();
		$('#pop1').fadeIn('slow');
		$('#pop1').fadeIn('fast').toggle();
		
	});


	$('#feedback').click(function(){
		$('#pop1').hide();
		$('#pop2').fadeIn('slow');
		$('.pop-outer').fadeIn('slow');
		$('.pop-outer').fadeIn('fast').toggle();
		
	});

});
```

##Explanation of jQuery 
*Basic syntax of jQuery :*` $(selector).action();`
 $ sign: define/access jQuery. A (selector) to find (query).
 
`delay()` is a method used to delay some task to perform.
 `click(function(){code})`:click is an event handler which performs some tasks defined in `function({code})` .
` show()`is a method  used to show a particular element .It can take the `'slow'`,`'fast'`,`'milliseconds'`values
 `hide()` is a method used to hide a particular element.It can take the `'slow'`,`'fast'`,`'milliseconds'`values
`change()` is a event handler used to know about any change of an element,(**it is only valid for ` textbox`, `select`,`input`,`textarea`**).
`removeAttr('attribute')`method is used to remove the ` attribute `from an element.
`attr('value','changed value')`is used to change a specific attribute's `value`to `changed value`.
`val()`method is used to return the value of `value ` attribute. 
 `fadeIn()` method gradually changes the opacity of the selected element from hidden to visible.
fadeout()`is a method used to vanish some element by fading that out;it gradually changes the opacity of the selected element from visible to hidden . `
`alert('message')`is used to display an alert box with specified `message`.
     


Explore the code here : [Pop-up form using jQuery](https://codepen.io/nilanjana9/pen/Bdxeox?editors=1000#0)
 on [codepen](https://codepen.io/)