We Keep Coding

add previous ans next button

i wanna add next and previous button to my page jsp , I have actually multiple form which i can reach with a menu but i would like to pass from a form to another by clicking both on next or previous and with the menu
thank you for you attention and help I've seen a lot of topic but none of them could help me
$(function() {
/*
number of fieldsets
*/
var fieldsetCount = $('#formElem').children().length;
/*
current position of fieldset / navigation link
*/
var current = 1;
/*
sum and save the widths of each one of the fieldsets
set the final sum as the total width of the steps element
*/
var stepsWidth = 0;
var widths = new Array();
$('#steps .step').each(function(i){
var $step = $(this);
widths[i] = stepsWidth;
stepsWidth += $step.width();
});
$('#steps').width(stepsWidth);
/*
to avoid problems in IE, focus the first input of the form
*/
$('#formElem').children(':first').find(':input:first').focus();
/*
show the navigation bar
*/
$('#navigation').show();
/*
when clicking on a navigation link
the form slides to the corresponding fieldset
*/
$('#navigation a').bind('click',function(e){
var $this = $(this);
var prev = current;
$this.closest('ul').find('li').removeClass('selected');
$this.parent().addClass('selected');
/*
we store the position of the link
in the current variable
*/
current = $this.parent().index() + 1;
/*
animate / slide to the next or to the corresponding
fieldset. The order of the links in the navigation
is the order of the fieldsets.
Also, after sliding, we trigger the focus on the first
input element of the new fieldset
If we clicked on the last link (confirmation), then we validate
all the fieldsets, otherwise we validate the previous one
before the form slided
*/
$('#steps').stop().animate({
marginLeft: '-' + widths[current-1] + 'px'
},500,function(){
if(current == fieldsetCount)
validateSteps();
else
validateStep(prev);
$('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();
});
e.preventDefault();
});
/*
clicking on the tab (on the last input of each fieldset), makes the form
slide to the next step
*/
$('#formElem > fieldset').each(function(){
var $fieldset = $(this);
$fieldset.children(':last').find(':input').keydown(function(e){
if (e.which == 9){
$('#navigation li:nth-child(' + (parseInt(current)+1) + ') a').click();
/* force the blur for validation */
$(this).blur();
e.preventDefault();
}
});
});
/*
validates errors on all the fieldsets
records if the Form has errors in $('#formElem').data()
*/
function validateSteps(){
var FormErrors = false;
for(var i = 1; i < fieldsetCount; ++i){
var error = validateStep(i);
if(error == -1)
FormErrors = true;
}
$('#formElem').data('errors',FormErrors);
}
/*
validates one fieldset
and returns -1 if errors found, or 1 if not
*/
function validateStep(step){
if(step == fieldsetCount) return;
var error = 1;
var hasError = false;
$('#formElem').children(':nth-child('+ parseInt(step) +')').find(':input:not(button)').each(function(){
var $this = $(this);
var valueLength = jQuery.trim($this.val()).length;
if(valueLength == ''){
hasError = true;
$this.css('background-color','#FFEDEF');
}
else
$this.css('background-color','#FFFFFF');
});
var $link = $('#navigation li:nth-child(' + parseInt(step) + ') a');
$link.parent().find('.error,.checked').remove();
var valclass = 'checked';
if(hasError){
error = -1;
valclass = 'error';
}
$('<span class="'+valclass+'"></span>').insertAfter($link);
return error;
}
/*
if there are errors don't allow the user to submit
*/
$('#registerButton').bind('click',function(){
if($('#formElem').data('errors')){
alert('Please correct the errors in the Form');
return false;
}
});
});
*{
margin:0px;
padding:0px;
}
body{
color:#444444;
font-size:13px;
background: #f2f2f2;
font-family:"Century Gothic", Helvetica, sans-serif;
}
#content{
margin:15px auto;
text-align:center;
width:600px;
position:relative;
height:100%;
}
#wrapper{
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:2px solid #fff;
background-color:#f9f9f9;
width:600px;
overflow:hidden;
}
#steps{
width:600px;
/*height:320px;*/
overflow:hidden;
}
.step{
float:left;
width:600px;
/*height:320px;*/
}
#navigation{
height:45px;
background-color:#e9e9e9;
border-top:1px solid #fff;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
#navigation ul{
list-style:none;
float:left;
margin-left:22px;
}
#navigation ul li{
float:left;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
position:relative;
margin:0px 2px;
}
#navigation ul li a{
display:block;
height:45px;
background-color:#444;
color:#777;
outline:none;
font-weight:bold;
text-decoration:none;
line-height:45px;
padding:0px 20px;
border-right:1px solid #fff;
border-left:1px solid #fff;
background:#f0f0f0;
background:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.09, rgb(240,240,240)),
color-stop(0.55, rgb(227,227,227)),
color-stop(0.78, rgb(240,240,240))
);
background:
-moz-linear-gradient(
center bottom,
rgb(240,240,240) 9%,
rgb(227,227,227) 55%,
rgb(240,240,240) 78%
)
}
#navigation ul li a:hover,
#navigation ul li.
ted a{
background:#d8d8d8;
color:#666;
text-shadow:1px 1px 1px #fff;
}
span.checked{
background:transparent url(../img/checked.png) no-repeat top left;
position:absolute;
top:0px;
left:1px;
width:20px;
height:20px;
}
span.error{
background:transparent url(img/error.png) no-repeat top left;
position:absolute;
top:0px;
left:1px;
width:20px;
height:20px;
}
#steps form fieldset{
border:none;
padding-bottom:20px;
}
#steps form legend{
text-align:left;
background-color:#f0f0f0;
color:#666;
font-size:24px;
text-shadow:1px 1px 1px #fff;
font-weight:bold;
float:left;
width:590px;
padding:5px 0px 5px 10px;
margin:10px 0px;
border-bottom:1px solid #fff;
border-top:1px solid #d9d9d9;
}
#steps form p{
float:left;
clear:both;
margin:5px 0px;
background-color:#f4f4f4;
border:1px solid #fff;
width:400px;
padding:10px;
margin-left:100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
}
#steps form p label{
width:160px;
float:left;
text-align:right;
margin-right:15px;
line-height:26px;
color:#666;
text-shadow:1px 1px 1px #fff;
font-weight:bold;
}
#steps form input:not([type=radio]),
#steps form textarea,
#steps form select{
background: #ffffff;
border: 1px solid #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
outline: none;
padding: 5px;
width: 200px;
float:left;
}
#steps form input:focus{
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
background-color:#FFFEEF;
}
#steps form p.submit{
background:none;
border:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}
#steps form button {
border:none;
outline:none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #ffffff;
display: block;
cursor:pointer;
margin: 0px auto;
clear:both;
padding: 7px 25px;
text-shadow: 0 1px 1px #777;
font-weight:bold;
font-family:"Century Gothic", Helvetica, sans-serif;
font-size:22px;
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
background:#4797ED;
}
#steps form button:hover {
background:#d8d8d8;
color:#666;
text-shadow:1px 1px 1px #fff;
ul{ border:0; margin:0; padding:0; }
#pagination-clean li
{
border:0;
margin:0;
padding:0;
font-size:11px;
list-style:none;
}
#pagination-clean li, #pagination-clean a
{
border:solid 1px #DEDEDE
margin-right:2px;
}
#pagination-clean .previous-off, #pagination-clean .next-off
{
color:#888888
display:block;
float:left;
font-weight:bold;
padding:3px 4px;
}
#pagination-clean .next a, #pagination-clean .previous a
{
font-weight:bold;
border:solid 1px #FFFFFF;
}
#pagination-clean .active
{
color:#00000
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
#pagination-clean a:link, #pagination-clean a:visited
{
color:#0033CC
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
#pagination-clean a:hover
{
text-decoration:none;
}
p.prev::before {
content:"";
position:absolute;left:-25px;top:0;
/* taille */
height:0;width:0;
/* les bordures */
border-right:36px solid #AAAAAA;
border-bottom:18px solid transparent;
border-top:18px solid transparent;
}
p.prev::after {
content:"";
position:absolute;left:-25px;top:0;
/* taille */
height:0;width:0;
/* les bordures */
border-right:36px solid #AAAAAA;
border-bottom:18px solid transparent;
border-top:18px solid transparent;
}
span.reference {
position: fixed;
left: 5px;
top: 5px;
font-size: 10px;
text-shadow: 1px 1px 1px #fff;
}
span.reference a {
color: #555;
text-decoration: none;
text-transform: uppercase;
}
span.reference a:hover {
color: #000;
}
h1 {
color: #ccc;
font-size: 40px;
text-shadow: 5px 1px 1px #fff;
padding: 30px;
}
#slider ul, #slider li
{
margin:0;
padding:0;
list-style:none;
}
#slider, #slider li
{
width:500px;
height:200px;
overflow:hidden;
}
span#prevBtn{}
span#nextBtn{}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HPS REGISTER</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="HPS REGISTER " />
<meta name="keywords"
content="jquery, form, sliding, usability, css3, validation, javascript" />
<link rel="stylesheet" href="inc/style.css" type="text/css"
media="screen" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/sliding.form.js"></script>
<script type="text/javascript" >
</script>
</head>
<body>
<img class="left" src="img/hps.png" width="150" height="100" alt=""
title="" style="float: left; margin: 0 180px 0 30px;" />
</body>
<div id="content">
<h1>HPS REGISTER</h1>
<div id="wrapper">
<div id="steps">
<form method="post" action="createbank">
<fieldset class="step">
<legend>Account</legend>
<p>
<label for="clientname">Client name<span class="requis">*</span></label>
<input id="clientname" name="clientname" />
</p>
<p>
<label for="email">Email</label> <input id="email" name="email"
placeholder="info#hps.net" type="email" AUTOCOMPLETE=off />
</p>
<p>
<label for="password">Password<span class="requis">*</span></label>
<input id="password" name="password" type="password"
AUTOCOMPLETE=off />
</p>
</fieldset>
<fieldset class="step">
<legend>Personal Details</legend>
<p>
<label for="name">Full Name</label> <input id="name" name="name"
type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="country">Country</label> <input id="country"
name="country" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="phone">Phone</label> <input id="phone" name="phone"
placeholder="e.g. +212622222222" type="tel" AUTOCOMPLETE=off />
</p>
<p>
<label for="website">Website</label> <input id="website"
name="website"
placeholder="e.g. http://www.hps.com
type="
AUTOCOMPLETE=off />
</p>
</fieldset>
<fieldset class="step">
<legend>client bank information</legend>
<p>
<label for="banktag">Bank tag <span class="requis">*</span></label>
<input id="banktag" name="banktag" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="currency">Currency<span class="requis">*</span></label>
<input id="currency" name="currency" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="datesystem">Date system <span class="requis">*</span></label>
<input id="datesystem" name="datesystem" type="text"
AUTOCOMPLETE=off />
</p>
<p>
<label for="bankname">Bank name<span class="requis">*</span></label>
<input id="bankname" name="bankname" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="schemaname">Schema name <span class="requis">*</span>
</label> <input id="schemaname" name="schemaname" type="text"
AUTOCOMPLETE=off />
</p>
</fieldset>
<fieldset class="step">
<legend>Confirm</legend>
<p>IF Everything in the form is correctly filled your
registration will be made . Otherwise an error message will be
generate .In this last step the user can confirm the submission of
the form.</p>
<p class="submit">
<button id="registerButton" type="submit">generate</button>
</p>
</fieldset>
</form>
</div>
<div id="result">
<button id="prev">Prev</button>
<button id="next">Next</button>
</div>
<div id="navigation" style="display: none;">
<ul>
<li class="selected">Account</li>
<li>Personal Details</li>
<li>Bank information</li>
<li>Confirm</li>
</ul>
</div>
</div>
</body></html>

You could try to do something like this.
$("#next").click(function() {
var v = $("#navigation ul li.selected");
var n = $(v).next("li").length;
if (n == 1){
v.removeClass("selected").next("li").find("a").trigger("click")
}
});
$("#prev").click(function() {
var v = $("#navigation ul li.selected");
var n = $(v).prev("li").length;
if (n == 1){
v.removeClass("selected").prev("li").find("a").trigger("click")
}
});
This will check if there is a next/prev li when you click on a `button.
$(function() {
/*
number of fieldsets
*/
var fieldsetCount = $('#formElem').children().length;
/*
current position of fieldset / navigation link
*/
var current = 1;
/*
sum and save the widths of each one of the fieldsets
set the final sum as the total width of the steps element
*/
var stepsWidth = 0;
var widths = new Array();
$('#steps .step').each(function(i) {
var $step = $(this);
widths[i] = stepsWidth;
stepsWidth += $step.width();
});
$('#steps').width(stepsWidth);
/*
to avoid problems in IE, focus the first input of the form
*/
$('#formElem').children(':first').find(':input:first').focus();
/*
show the navigation bar
*/
$('#navigation').show();
/*
when clicking on a navigation link
the form slides to the corresponding fieldset
*/
$('#navigation a').bind('click', function(e) {
var $this = $(this);
var prev = current;
$this.closest('ul').find('li').removeClass('selected');
$this.parent().addClass('selected');
/*
we store the position of the link
in the current variable
*/
current = $this.parent().index() + 1;
/*
animate / slide to the next or to the corresponding
fieldset. The order of the links in the navigation
is the order of the fieldsets.
Also, after sliding, we trigger the focus on the first
input element of the new fieldset
If we clicked on the last link (confirmation), then we validate
all the fieldsets, otherwise we validate the previous one
before the form slided
*/
$('#steps').stop().animate({
marginLeft: '-' + widths[current - 1] + 'px'
}, 500, function() {
if (current == fieldsetCount)
validateSteps();
else
validateStep(prev);
$('#formElem').children(':nth-child(' + parseInt(current) + ')').find(':input:first').focus();
});
e.preventDefault();
});
/*
clicking on the tab (on the last input of each fieldset), makes the form
slide to the next step
*/
$('#formElem > fieldset').each(function() {
var $fieldset = $(this);
$fieldset.children(':last').find(':input').keydown(function(e) {
if (e.which == 9) {
$('#navigation li:nth-child(' + (parseInt(current) + 1) + ') a').click();
/* force the blur for validation */
$(this).blur();
e.preventDefault();
}
});
});
/*
validates errors on all the fieldsets
records if the Form has errors in $('#formElem').data()
*/
function validateSteps() {
var FormErrors = false;
for (var i = 1; i < fieldsetCount; ++i) {
var error = validateStep(i);
if (error == -1)
FormErrors = true;
}
$('#formElem').data('errors', FormErrors);
}
/*
validates one fieldset
and returns -1 if errors found, or 1 if not
*/
function validateStep(step) {
if (step == fieldsetCount) return;
var error = 1;
var hasError = false;
$('#formElem').children(':nth-child(' + parseInt(step) + ')').find(':input:not(button)').each(function() {
var $this = $(this);
var valueLength = jQuery.trim($this.val()).length;
if (valueLength == '') {
hasError = true;
$this.css('background-color', '#FFEDEF');
} else
$this.css('background-color', '#FFFFFF');
});
var $link = $('#navigation li:nth-child(' + parseInt(step) + ') a');
$link.parent().find('.error,.checked').remove();
var valclass = 'checked';
if (hasError) {
error = -1;
valclass = 'error';
}
$('<span class="' + valclass + '"></span>').insertAfter($link);
return error;
}
/*
if there are errors don't allow the user to submit
*/
$('#registerButton').bind('click', function() {
if ($('#formElem').data('errors')) {
alert('Please correct the errors in the Form');
return false;
}
});
$("#next").click(function() {
var v = $("#navigation ul li.selected");
var n = $(v).next("li").length;
if (n == 1){
v.removeClass("selected").next("li").find("a").trigger("click")
}
});
$("#prev").click(function() {
var v = $("#navigation ul li.selected");
var n = $(v).prev("li").length;
if (n == 1){
v.removeClass("selected").prev("li").find("a").trigger("click")
}
});
});
* {
margin: 0px;
padding: 0px;
}
body {
color: #444444;
font-size: 13px;
background: #f2f2f2;
font-family: "Century Gothic", Helvetica, sans-serif;
}
#content {
margin: 15px auto;
text-align: center;
width: 600px;
position: relative;
height: 100%;
}
#wrapper {
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 2px solid #fff;
background-color: #f9f9f9;
width: 600px;
overflow: hidden;
}
#steps {
width: 600px;
/*height:320px;*/
overflow: hidden;
}
.step {
float: left;
width: 600px;
/*height:320px;*/
}
#navigation {
height: 45px;
background-color: #e9e9e9;
border-top: 1px solid #fff;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#navigation ul {
list-style: none;
float: left;
margin-left: 22px;
}
#navigation ul li {
float: left;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
position: relative;
margin: 0px 2px;
}
#navigation ul li a {
display: block;
height: 45px;
background-color: #444;
color: #777;
outline: none;
font-weight: bold;
text-decoration: none;
line-height: 45px;
padding: 0px 20px;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
background: #f0f0f0;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(240, 240, 240)), color-stop(0.55, rgb(227, 227, 227)), color-stop(0.78, rgb(240, 240, 240)));
background: -moz-linear-gradient( center bottom, rgb(240, 240, 240) 9%, rgb(227, 227, 227) 55%, rgb(240, 240, 240) 78%)
}
#navigation ul li a:hover,
#navigation ul li. ted a {
background: #d8d8d8;
color: #666;
text-shadow: 1px 1px 1px #fff;
}
span.checked {
background: transparent url(../img/checked.png) no-repeat top left;
position: absolute;
top: 0px;
left: 1px;
width: 20px;
height: 20px;
}
span.error {
background: transparent url(img/error.png) no-repeat top left;
position: absolute;
top: 0px;
left: 1px;
width: 20px;
height: 20px;
}
#steps form fieldset {
border: none;
padding-bottom: 20px;
}
#steps form legend {
text-align: left;
background-color: #f0f0f0;
color: #666;
font-size: 24px;
text-shadow: 1px 1px 1px #fff;
font-weight: bold;
float: left;
width: 590px;
padding: 5px 0px 5px 10px;
margin: 10px 0px;
border-bottom: 1px solid #fff;
border-top: 1px solid #d9d9d9;
}
#steps form p {
float: left;
clear: both;
margin: 5px 0px;
background-color: #f4f4f4;
border: 1px solid #fff;
width: 400px;
padding: 10px;
margin-left: 100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
}
#steps form p label {
width: 160px;
float: left;
text-align: right;
margin-right: 15px;
line-height: 26px;
color: #666;
text-shadow: 1px 1px 1px #fff;
font-weight: bold;
}
#steps form input:not([type=radio]),
#steps form textarea,
#steps form select {
background: #ffffff;
border: 1px solid #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
outline: none;
padding: 5px;
width: 200px;
float: left;
}
#steps form input:focus {
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
background-color: #FFFEEF;
}
#steps form p.submit {
background: none;
border: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#steps form button {
border: none;
outline: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #ffffff;
display: block;
cursor: pointer;
margin: 0px auto;
clear: both;
padding: 7px 25px;
text-shadow: 0 1px 1px #777;
font-weight: bold;
font-family: "Century Gothic", Helvetica, sans-serif;
font-size: 22px;
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
background: #4797ED;
}
#steps form button:hover {
background: #d8d8d8;
color: #666;
text-shadow: 1px 1px 1px #fff;
ul {
border: 0;
margin: 0;
padding: 0;
}
#pagination-clean li {
border: 0;
margin: 0;
padding: 0;
font-size: 11px;
list-style: none;
}
#pagination-clean li,
#pagination-clean a {
border: solid 1px #DEDEDE margin-right:2px;
}
#pagination-clean .previous-off,
#pagination-clean .next-off {
color: #888888 display:block;
float: left;
font-weight: bold;
padding: 3px 4px;
}
#pagination-clean .next a,
#pagination-clean .previous a {
font-weight: bold;
border: solid 1px #FFFFFF;
}
#pagination-clean .active {
color: #00000 font-weight:bold;
display: block;
float: left;
padding: 4px 6px;
}
#pagination-clean a:link,
#pagination-clean a:visited {
color: #0033CC display:block;
float: left;
padding: 3px 6px;
text-decoration: none;
}
#pagination-clean a:hover {
text-decoration: none;
}
p.prev::before {
content: "";
position: absolute;
left: -25px;
top: 0;
/* taille */
height: 0;
width: 0;
/* les bordures */
border-right: 36px solid #AAAAAA;
border-bottom: 18px solid transparent;
border-top: 18px solid transparent;
}
p.prev::after {
content: "";
position: absolute;
left: -25px;
top: 0;
/* taille */
height: 0;
width: 0;
/* les bordures */
border-right: 36px solid #AAAAAA;
border-bottom: 18px solid transparent;
border-top: 18px solid transparent;
}
span.reference {
position: fixed;
left: 5px;
top: 5px;
font-size: 10px;
text-shadow: 1px 1px 1px #fff;
}
span.reference a {
color: #555;
text-decoration: none;
text-transform: uppercase;
}
span.reference a:hover {
color: #000;
}
h1 {
color: #ccc;
font-size: 40px;
text-shadow: 5px 1px 1px #fff;
padding: 30px;
}
#slider ul,
#slider li {
margin: 0;
padding: 0;
list-style: none;
}
#slider,
#slider li {
width: 500px;
height: 200px;
overflow: hidden;
}
span#prevBtn {}
span#nextBtn {}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HPS REGISTER</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="HPS REGISTER " />
<meta name="keywords" content="jquery, form, sliding, usability, css3, validation, javascript" />
<link rel="stylesheet" href="inc/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/sliding.form.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<img class="left" src="img/hps.png" width="150" height="100" alt="" title="" style="float: left; margin: 0 180px 0 30px;" />
</body>
<div id="content">
<h1>HPS REGISTER</h1>
<div id="wrapper">
<div id="steps">
<form method="post" action="createbank">
<fieldset class="step">
<legend>Account</legend>
<p>
<label for="clientname">Client name<span class="requis">*</span></label>
<input id="clientname" name="clientname" />
</p>
<p>
<label for="email">Email</label> <input id="email" name="email" placeholder="info#hps.net" type="email" AUTOCOMPLETE=off />
</p>
<p>
<label for="password">Password<span class="requis">*</span></label>
<input id="password" name="password" type="password" AUTOCOMPLETE=off />
</p>
</fieldset>
<fieldset class="step">
<legend>Personal Details</legend>
<p>
<label for="name">Full Name</label> <input id="name" name="name" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="country">Country</label> <input id="country" name="country" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="phone">Phone</label> <input id="phone" name="phone" placeholder="e.g. +212622222222" type="tel" AUTOCOMPLETE=off />
</p>
<p>
<label for="website">Website</label> <input id="website" name="website" placeholder="e.g. http://www.hps.com
type=" AUTOCOMPLETE=off />
</p>
</fieldset>
<fieldset class="step">
<legend>client bank information</legend>
<p>
<label for="banktag">Bank tag <span class="requis">*</span></label>
<input id="banktag" name="banktag" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="currency">Currency<span class="requis">*</span></label>
<input id="currency" name="currency" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="datesystem">Date system <span class="requis">*</span></label>
<input id="datesystem" name="datesystem" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="bankname">Bank name<span class="requis">*</span></label>
<input id="bankname" name="bankname" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="schemaname">Schema name <span class="requis">*</span>
</label> <input id="schemaname" name="schemaname" type="text" AUTOCOMPLETE=off />
</p>
</fieldset>
<fieldset class="step">
<legend>Confirm</legend>
<p>IF Everything in the form is correctly filled your registration will be made . Otherwise an error message will be generate .In this last step the user can confirm the submission of the form.</p>
<p class="submit">
<button id="registerButton" type="submit">generate</button>
</p>
</fieldset>
</form>
</div>
<div id="result">
<button id="prev">Prev</button>
<button id="next">Next</button>
</div>
<div id="navigation" style="display: none;">
<ul>
<li class="selected">Account</li>
<li>Personal Details</li>
<li>Bank information</li>
<li>Confirm</li>
</ul>
</div>
</div>
</body>
</html>

Can't get to fix the headers already sent issue with using cookies while developing a WordPress Plugin?

I am trying to write a plugin for to register a widget form for some special purpose in order to pay the due payments in CiviCRM but I can't get to work the cookies in the plugin code.As I can see that my cookies are placed before the plugin form html code but still I am getting header already sent error so I am wondering how to fix it?
So I will be grateful if anyone can please help me out with this issue.
Here is my full Plugin Code :
<?php
/*
Plugin Name: CiviCRM Contribution Later Payment
Plugin URI: http://www.stackoverflow.com/cv/nicefellow1234
Description: This plugin helps in paying due contribution payments through a web form by entering Contribution ID.
Author: Umair Shah Yousafzai
Version: 1.0
Author URI: http://www.huntedhunter.com/mycv/
*/
function my_plugin_activate()
{
// DO your activation task.
/* $post_id = wp_insert_post( array(
'post_status' => 'publish',
'post_type' => 'page',
'post_title' => 'Contribution Later Payment Page',
'post_content' => 'Pay Your Contribution Payment Now.'
) );
if ($post_id)
{
error_log("New Page Added.");
} */
}
register_activation_hook(__FILE__,"my_plugin_activate");
function cl_pay() {
if ($_POST) {
if ($_POST['cl_check_email']) {
$contact_email = $_POST["contact_email"];
global $wpdb;
$sql = $wpdb->prepare("SELECT * FROM civicrm_contact WHERE sort_name = %s", $contact_email);
$results = $wpdb->get_results($sql);
$count = count($results);
$contact_id = $results[0]->id;
if (!$count > 0 ) {
$sql = $wpdb->prepare("SELECT * FROM civicrm_email WHERE email = %s", $contact_email);
$results = $wpdb->get_results($sql);
$count = count($results);
$contact_id = $results[0]->contact_id;
}
}
if ($_POST['cl_check_phone']) {
$contact_phone = $_POST["contact_phone"];
global $wpdb;
$sql = $wpdb->prepare("SELECT * FROM civicrm_phone WHERE phone = %s", $contact_phone);
$results = $wpdb->get_results($sql);
$count = count($results);
$contact_id = $results[0]->contact_id;
}
if ($_POST['cl_check_full_name']) {
$first_name = $_POST["first_name"];
$last_name = $_POST["last_name"];
$full_name = $first_name." ".$last_name;
global $wpdb;
$sql = $wpdb->prepare("SELECT * FROM civicrm_contact WHERE display_name = %s", $full_name);
$results = $wpdb->get_results($sql);
$count = count($results);
$contact_id = $results[0]->id;
//echo "<pre>";
//print_r($results);
//echo "</pre>";
}
$sql = $wpdb->prepare("SELECT * FROM civicrm_contribution WHERE contact_id = %s", $contact_id);
$results = $wpdb->get_results($sql);
$count = count($results);
$amount = $results[0]->total_amount;
if ($count > 0) {
setcookie("display_check", "none", time()+5);
}
if (isset($amount)) { setcookie("display_amount", "block", time()+5); }
}
?>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#choice').change(function () {
if ( this.value === 'option_1' ) {
$("#option_1").show("slow");
$("#option_2").hide("slow");
$("#option_3").hide("slow");
}
else if ( this.value === 'option_2' ) {
$("#option_2").show("slow");
$("#option_1").hide("slow");
$("#option_3").hide("slow");
}
else if ( this.value === 'option_3' ) {
$("#option_3").show("slow");
$("#option_1").hide("slow");
$("#option_2").hide("slow");
} else if ( this.value === 'not_specified' ) {
$("#option_1").hide("slow");
$("#option_2").hide("slow");
$("#option_3").hide("slow");
}
});
});
</script>
<style>
html {
height: 100%;
/*Image only BG fallback*/
background: url('http://thecodeplayer.com/uploads/media/gs.png');
/*background = gradient + image pattern combo*/
background:
linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)),
url('http://thecodeplayer.com/uploads/media/gs.png');
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td {
padding:0;
margin:0;}
fieldset, img {border:0}
ol, ul, li {list-style:none}
:focus {outline:none}
body,
input,
textarea,
select {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: #4c4c4c;
}
p {
font-size: 12px;
width: 150px;
display: inline-block;
margin-left: 18px;
}
h1.testboxh1 {
font-size: 32px;
font-weight: 300;
color: #4c4c4c;
text-align: center;
padding-top: 10px;
margin-bottom: 10px;
}
html{
background-color: #ffffff;
}
.testbox {
margin: 20px auto;
width: 455px;
-webkit-border-radius: 8px/7px;
-moz-border-radius: 8px/7px;
border-radius: 8px/7px;
background-color: #ebebeb;
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.31);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.31);
box-shadow: 1px 2px 5px rgba(0,0,0,.31);
border: solid 1px #cbc9c9;
}
input[type=radio] {
visibility: hidden;
}
form{
margin: 0 30px;
text-align:center;
}
label.radio {
cursor: pointer;
text-indent: 35px;
overflow: visible;
display: inline-block;
position: relative;
margin-bottom: 15px;
}
label.radio:before {
background: #3a57af;
content:'';
position: absolute;
top:2px;
left: 0;
width: 20px;
height: 20px;
border-radius: 100%;
}
label.radio:after {
opacity: 0;
content: '';
position: absolute;
width: 0.5em;
height: 0.30em;
background: transparent;
top: 7.5px;
left: 4.5px;
border: 3px solid #ffffff;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
input[type=radio]:checked + label:after {
opacity: 1;
}
hr{
color: #a9a9a9;
}
input[type=text],input[type=password],select {
text-align:center;
width: 200px;
height: 39px;
-webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
-moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
background-color: #fff;
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
box-shadow: 1px 2px 5px rgba(0,0,0,.09);
border: solid 1px #cbc9c9;
margin-left: -5px;
margin-top: 13px;
padding-left: 10px;
}
input[type=password]{
margin-bottom: 25px;
}
#icon {
width: 30px;
height:20px;
background-color: #3a57af;
padding: 8px 0px 8px 15px;
margin-left: 15px;
margin-top: -10px;
-webkit-border-radius: 4px 0px 0px 4px;
-moz-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
color: white;
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
box-shadow: 1px 2px 5px rgba(0,0,0,.09);
border: solid 0px #cbc9c9;
}
.gender {
margin-left: 30px;
margin-bottom: 30px;
}
.accounttype{
margin-left: 8px;
margin-top: 20px;
}
input.button {
text-align:center;
font-size: 14px;
font-weight: 600;
color: white;
padding : 8px 30px 8px 30px;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #3a57af;
-webkit-box-shadow: 0 3px rgba(58,87,175,.75);
-moz-box-shadow: 0 3px rgba(58,87,175,.75);
box-shadow: 0 3px rgba(58,87,175,.75);
transition: all 0.1s linear 0s;
}
input.button:hover {
top: 3px;
background-color:#2e458b;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
</style>
</br></br></br></br>
<div class="testbox">
<h1 class="testboxh1">Pay Due Contribution Pay</h1>
<div class="pay_check" style="display:<?php if (!isset($_COOKIE['display_check'])) {echo "block";} else {echo $_COOKIE['display_check']; }?>;">
<form action="" method="post" >
<hr>
<!---<div class="accounttype">
<input type="radio" value="None" id="radioOne" name="account" checked/>
<label for="radioOne" class="radio" chec>Personal</label>
<input type="radio" value="None" id="radioTwo" name="account" />
<label for="radioTwo" class="radio">Company</label>
</div> --->
<center><h3>::Search By::</h3></center>
<select name="choice" id="choice">
</br>
<option value="not_specified">Not Specified</option>
<option value="option_1">Contact Email</option>
<option value="option_2">Contact Phone</option>
<option value="option_3">Full Name</option>
</select>
<div id="option_1" style="display:none;">
<hr>
<center><h3 style="padding-top: 10px;">::Enter Contact Email::</h3></center>
<form action="" method="post" >
<input type="text" name="contact_email" placeholder="Contact Email" style="width:250px;"></br>
</br> <input type="submit" name="cl_check_email" class="button" value="Check">
</form>
</br><hr>
</div>
<div id="option_2" style="display:none;">
<hr>
<center><h3 style="padding-top: 10px;">::Enter Contact Phone No::</h3></center>
<form action="" method="post" >
<input type="text" name="contact_phone" placeholder="Contact Phone No" style="width:250px;"> </br>
</br> <input type="submit" name="cl_check_phone" class="button" value="Check">
</form>
</br><hr>
</div>
<div id="option_3" style="display:none;">
<hr>
<form action="" method="post" >
<center><h3 style="padding-top: 10px;">::Enter Full Name::</h3></center>
<input type="text" name="first_name" placeholder="First Name">
<input type="text" name="last_name" placeholder="Last Name"></br>
</br> <input type="submit" name="cl_check_full_name" class="button" value="Check">
</form>
</br><hr>
</div>
</br>
<!-- <label id="icon" for="cl_id"><i class="fa fa-tag " style="padding-right: 13px;"></i></label>
<input type="text" name="cl_id" id="cl_id" placeholder="Contribution ID" required/></br> -->
</br></br>
</div>
<div class="cl_pay" style="display:<?php if (!isset($_COOKIE['display_amount'])) {echo "none";} else {echo $_COOKIE['display_amount']; }?>;">
<form action="" method="post" >
<hr>
<label id="icon" for="cl_pay" style="border-radius:4px;padding-right: 100px;padding-left: 100px;background-color:#422252;"><i class="fa fa-usd " style="">
<strong><?php echo $amount; ?></strong></i></label>
</br>
<hr> <input type="submit" name="cl_pay" class="button" value="Pay">
</br></br>
</form>
</div>
</div>
<?php
}
add_shortcode("cl-pay", "cl_pay");
function my_plugin_deactivate()
{
// DO your activation task.
error_log("My Plugin Got Deactivated.");
}
register_deactivation_hook(__FILE__,"my_plugin_deactivate");
?>
The Error which I am getting is :
Warning: Cannot modify header information - headers already sent by (output started at D:\xampp\htdocs\civicrm_development\wp-includes\class.wp-scripts.php:180) in D:\xampp\htdocs\civicrm_development\wp-content\plugins\civicrm_later_contribution_pay.php on line 97
Warning: Cannot modify header information - headers already sent by (output started at D:\xampp\htdocs\civicrm_development\wp-includes\class.wp-scripts.php:180) in D:\xampp\htdocs\civicrm_development\wp-content\plugins\civicrm_later_contribution_pay.php on line 100
Besides on Line 97 & 100 I have following code :
97 :
if ($count > 0) {
setcookie("display_check", "none", time()+5);
}
100 :
if (isset($amount)) { setcookie("display_amount", "block", time()+5); }
}

I faced the same thing when I was working with my new PHP Server. You need to do two things to tackle this issue.
Never ever allow any HTML to escape before the headers are sent. (Very Tough)
Turn on Output Buffering. (Best and Easy way)
To turn on Output Buffering, you need to set in your php.ini:
output_buffering On
Or in your program:
ini_set("output_buffering", 1); // OR
ob_start();

Popup boxes show up at the beginning, but should be hidden

I am trying to write a short html / javascript that shows popup boxes that I defined. IMPORTANT: They should not show up at the beginning.
However, they are also shown at the beginning (and not hidden). Do you have any idea what I'm doing wrong?
Here the code:
<script>
$(document).ready(function(){
setTimeout(function(event){ // Öffnet 1.Box nach x Sekungen
loadPopupBox(); -maxSpeed/0.1
}, 7000);
$("#popupclose").click(function(event){
unloadPopupBox(); // Schliesst 1. Box mit Click
setTimeout(function(event2) { // Öffnet 2. Box nach x Sekunden
loadPopupBox2(); -maxSpeed/0.1
}, 500);
setTimeout(function(event2) { // Schliesst 2. Box nach x Sekunden
unloadPopupBox2()
}, 3500);
setTimeout(function(event3){
loadPopupBox3(); -maxSpeed/0.1 //Öffnet 3. Box nach x Sekunden
}, 15000);
});
$("#popupclose3").click(function(event4)
{
unloadPopupBox3();
setTimeout(function(event4) {
loadPopupBox4(); -maxSpeed/0.1}, 500);
setTimeout(function(event4) { // Schliesst 4. Box nach x Sekunden
unloadPopupBox4()}, 3500);
setTimeout(function(event5) {
loadPopupBox5(); -maxSpeed/0.1 }, 15000);
});
$("#popupclose5").click(function(event6)
{
unloadPopupBox5();
setTimeout(function() { loadPopupBox6(); -maxSpeed/0.1}, 500);
setTimeout(function(event6) { // Schliesst 5. Box nach x Sekunden
unloadPopupBox6()}, 4500);
});
function loadPopupBox()
{
$("#popupbox").fadeIn("slow");
}
function loadPopupBox2()
{
$("#popupbox2").fadeIn("slow");
}
function loadPopupBox3()
{
$("#popupbox3").fadeIn("slow");
}
function loadPopupBox4()
{
$("#popupbox4").fadeIn("slow");
}
function loadPopupBox5()
{
$("#popupbox5").fadeIn("slow");
}
function loadPopupBox6()
{
$("#popupbox6").fadeIn("slow");
}
function unloadPopupBox()
{
$("#popupbox").fadeOut("normal");
}
function unloadPopupBox2()
{
$("#popupbox2").fadeOut("normal");
}
function unloadPopupBox3()
{
$("#popupbox3").fadeOut("normal");
}
function unloadPopupBox4()
{
$("#popupbox4").fadeOut("normal");
}
function unloadPopupBox5()
{
$("#popupbox5").fadeOut("normal");
}
function unloadPopupBox6()
{
$("#popupbox6").fadeOut("normal");
}
$("#popupbox").hide();
$("#popupbox2").hide();
$("#popupbox3").hide();
$("#popupbox4").hide();
$("#popupbox5").hide();
$("#popupbox6").hide();
});
</script>
<style>
#wings { margin-top:100px; margin-left:150px; font:bold 13px sans-serif; background:orange;
float:left; padding:6px; }
#popupbox { position:fixed; _position:absolute; /*hack for IE6*/ background:#81DAF5;
top:170px; border:2px solid lightblue; padding:15px; z-index:100px;opacity: .8;
font-size:15px; -moz-box-shadow: 0px 0px 5px lightgray; -webkit-box-shadow:0px 0px 5px lightblue;
box-shadow:0px 0px 5px lightblue; }
#popupclose { border:0px solid lightgray; color:#33CC33; font-family:sans-serif; font-weight:bold;
line-height:15px; float:left; cursor:pointer; text-decoration:none; }
#popupbox2 { position:fixed; _position:absolute; /*hack for IE6*/ background:#81DAF5;
top:190px; border:2px solid lightblue; padding:15px; z-index:100px;opacity: .8;
font-size:15px; -moz-box-shadow: 0px 0px 5px lightgray; -webkit-box-shadow:0px 0px 5px lightblue;
box-shadow:0px 0px 5px lightblue; }
#popupclose2 { border:0px solid lightgray; color:#33CC33; font-family:sans-serif; font-weight:bold;
line-height:15px; float:left; cursor:pointer; text-decoration:none; }
#popupbox3 { position:fixed; _position:absolute; /*hack for IE6*/ background:#81DAF5;
top:175px; border:2px solid lightblue; padding:15px; z-index:100px;opacity: .8;
font-size:15px; -moz-box-shadow: 0px 0px 5px lightgray; -webkit-box-shadow:0px 0px 5px lightblue;
box-shadow:0px 0px 5px lightblue; }
#popupclose3 { border:0px solid lightgray; color:#33CC33; font-family:sans-serif; font-weight:bold;
line-height:15px; float:left; cursor:pointer; text-decoration:none; }
#popupbox4 { position:fixed; _position:absolute; /*hack for IE6*/ background:#81DAF5;
top:165px; border:2px solid lightblue; padding:15px; z-index:100px;opacity: .8;
font-size:15px; -moz-box-shadow: 0px 0px 5px lightgray; -webkit-box-shadow:0px 0px 5px lightblue;
box-shadow:0px 0px 5px lightblue; }
#popupclose4 { border:0px solid lightgray; color:#33CC33; font-family:sans-serif; font-weight:bold;
line-height:15px; float:left; cursor:pointer; text-decoration:none; }
#popupbox5 { position:fixed; _position:absolute; /*hack for IE6*/ background:#81DAF5;
top:200px; border:2px solid lightblue; padding:15px; z-index:100px;opacity: .8;
font-size:15px; -moz-box-shadow: 0px 0px 5px lightgray; -webkit-box-shadow:0px 0px 5px lightblue;
box-shadow:0px 0px 5px lightblue; }
#popupclose5 { border:0px solid lightgray; color:#33CC33; font-family:sans-serif; font-weight:bold;
line-height:15px; float:left; cursor:pointer; text-decoration:none; }
#popupbox6 { position:fixed; _position:absolute; /*hack for IE6*/ background:#81DAF5;
top:150px; border:2px solid lightblue; padding:15px; z-index:100px;opacity: .8;
font-size:15px; -moz-box-shadow: 0px 0px 5px lightgray; -webkit-box-shadow:0px 0px 5px lightblue;
box-shadow:0px 0px 5px lightblue; }
#popupclose6 { border:0px solid lightgray; color:#33CC33; font-family:sans-serif; font-weight:bold;
line-height:15px; float:left; cursor:pointer; text-decoration:none; }
</style>
<div id="popupbox">
<div style="height:75px; margin-left: 70px"><img id="popupclose" src="images/Picturenavigation.png" width="300" height="150" alt="Picturenavigation" title="Picturenavigation" border="0"></div>
</br></br>
<table>
</br></br></br>
<tr><td><center>Picturebook Navigation uses the coordinates of photos to navigate. </center></td></tr>
<tr><td><b><center>Click on the picture to start your journey.</center></b></td></tr>
</table>
</div>
<div id="popupbox2">
<div style="height:120px; margin-left: 60px"><img id="popupclose2" src="images/Naviroute3.jpg" width="300" height="150" alt="Naviroute3" title="Naviroute3" border="0"></div>
<table>
</br> </br>
<tr><td><center>Navigation with connect is that easy: You are on your way now!</center></td></tr>
</table>
</div>
<div id="popupbox3">
<div style="height:120px; margin-left:90px;"><img id="popupclose3" src="images/Connect_Menu.jpg" width="300" height="150" alt="Connect_Menu" title="Connect_Menu" border="0"></div>
<table>
</br></br>
<tr><td>Have you ever wondered about the latest news on your favorite team </br>or what the weather will look like at your travel destination?</td></tr>
<tr><td><b>Click on the connect menu to continue your drive and stay informed.</b></td></tr>
</table>
</div>
<div id="popupbox4">
<div style="height:120px; margin-left:60px;"><img id="popupclose4" src="images/Weather.jpg" width="300" height="150" alt="Weather" title="Weather" border="0"></div>
</br>
<table>
</br></br>
<tr><td><center>The weather is going to be nice tomorrow: No need for an umbrella.</center></td></tr>
</table>
</div>
<div id="popupbox5">
<div style="height:60px;"><img id="popupclose5" src="images/Bild1.png" width="80" height="76" alt="Bild1" title="Bild1" border="0"style="float:right;"></div>
</br>
<table>
<tr><td>Send a friend a message: <i>"Hi, it's me. I am on the way." </i></td></tr>
<tr><td></tr></td>
<tr><td>Type in this phone number in the space below: +1425637089.</td></tr>
<tr><td>Phone Number : <input type="text" size="30%"></td></tr>
<tr><td><b>Click on the picture to send the message.</b></td></tr>
</table>
</div>
<div id="popupbox6">
<div style="height:180px; margin-left:155px;"><img id="popupclose6" src="images/Message_received.png" width="125" height="190" alt="Message Received" title="Message Received" border="0"></div>
<table>
</br>
<tr><td>Look how easy this was! Your message already has been received.</td></tr>
</table>
</div>

My first recommendation would be to work on formatting your code a little more cleanly. It's much easier to find mistakes when everything is readable. In addition, your js contains a lot of repeat code, and is probably why this question is so heavily downvoted.
To the actual answer, you never actually hide your pop up boxes. In the css, you need to set #popupbox1 { display: none; } for each box on the page. Even better would be to use a class, but you don't really have that set up here.

click inside anywhere in the box,getting closed

input[type=checkbox] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
.ds-drop-down {
background: url('../../images/light-grey-disclosure-arrow-down.png')no-repeat scroll center center transparent;
padding: 10px 5px;
height: 0px;
width: 8px;
position: absolute;
top: 63px;
border: 1px solid blue;
}
div#span-advanced-search {
border: 1px solid grey;
display: none;
left: 20px;
width: 600px;
padding: 10px;
}
div#span-advanced-search label{
width: 100px;
}
input[type=checkbox]:checked ~ div#span-advanced-search {
background: white;
display: block;
position: relative;
width: 564px;
padding: 10px;
visibility: visible;
left: -573px;
top: 11px;
}
<input class="ds-text-field " type="text">
<xsl:attribute name="name">
<xsl:value-of
select="/dri:document/dri:meta/dri:pageMeta/dri:metadata[#element='search'][#qualifier='queryField']"/>
</xsl:attribute>
</input>
<label for="toggle-1" class="ds-drop-down" role="button" data-tooltip="Show search options"/>
<input type="checkbox" id="toggle-1">
<div id="span-advanced-search">
<label>Education Level:</label> <input id="text_edulvl" type="text"/><br></br>
<label>Type of Learning Material:</label> <input id="text_lm" type="text"/><br></br>
<label>Difficulty Level:</label> <input id="text_difflvl" type="text"/><br></br>
<label>Author:</label> <input id="text_author" type="text"/><br></br>
</div>
This is my code snippet. When I click on the checkbox "toggle-1", the div "span-advanced-search" will open,it's right. But after open the div,when i am clicking anywhere inside the div,it's getting closed. So,i can't give any input to those inputs(i.e. Education Level,Author etc.). I want the div will be closed only when the checkbox will be unchecked.

Solution must be as I thought. I hope you are looking for this: http://jsfiddle.net/vhoeamcq/
function srchMoreActive(t){
if(t){
document.getElementById('srchMoreOpt').classList.remove('hid');
document.getElementById('srchMore').classList.add('hid');
}else{
document.getElementById('srchMoreOpt').classList.add('hid');
document.getElementById('srchMore').classList.remove('hid');
}
}
function form1Sub(){
}
function srch(){
}
#form1 #s00{padding: 5px 25px 5px 5px; width:300px; border:1px solid rgba(0,0,0,0.2);}
#form1 #srchMore{margin-left:-27px; cursor:pointer; color:#ccc;}
#form1 #srchMore:hover{color:#0ac;}
#form1 .srchMoreAct{color:#333;}
#form1 #srchMoreOpt{width:320px; height:350px; padding:5px; box-shadow:0 2px 4px rgba(0,0,0,0.2); border:1px solid rgba(0,0,0,0.2);}
#form1 .hid{display:none;}
#form1 #srchMoreOpt .exi{float:right; padding:5px 10px 5px 10px; font-family:'Arial'; cursor:pointer; background:#ccc; color:#666;}
#form1 #srchMoreOpt .exi:hover{background:#0ac; color:#fff;}
<form id="form1" action="" method="post" onSubmit="form1Sub()">
<input id="s00" name="s" type="text" value="" placeholder="Type to serach" onChange="srch()" />
<span id="srchMore" onClick="srchMoreActive(true)">▼</span>
<div id="srchMoreOpt" class="hid">
<span class="exi" onClick="srchMoreActive(false)">x</span>
<p>Form Details</p>
<p><input type="text" /></p>
</div>
</form>

try this Jquery:
$('#toggle-1').click(function(){
var a = $(this).is(":checked");
if(a){
$('#span-advanced-search').css("display","block")
}
else{
$('#span-advanced-search').css("display","none")
}
});

.slideToggle() Runs With a Lagging/Jerky Animation

So I have read a lot of the other posts and none of them seem to be of any help.
Whenever I toggle up the animation jumps and shows some lag.
Here is my CSS:
<style>
margin:0 auto;
padding:0;
width:200px;
text-align:center;
}
.pull-me {
-webkit-box-shadow: 0 0 8px #FFD700;
-moz-box-shadow: 0 0 8px #FFD700;
box-shadow: 0 0 8px #FFD700;
cursor:pointer;
}
.panel {
background: #white;
background-size:90% 90%;
height:300px;
display:none;
font-family:garamond, times-new-roman, serif;
}
.panel p {
text-align:center;
}
.slide {
margin:0;
padding:0;
border-top:solid 2px #a10808;
}
.pull-me {
display:block;
position:relative;
border: 1px;
right:-25px;
width:150px;
height:20px;
font-family:arial, sans-serif;
font-size:14px;
color:#ffffff;
background:#a10808;
text-decoration:none;
-moz-border-bottom-left-radius:5px;
-moz-border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.pull-me p {
text-align:center;
}
</style>
Below is my HTML:
<div class="panel" style="width: 100%; overflow: hidden;">
<div style="width: 100px; float: left;"></div>
</div>
<p class="slide">
<div class="pull-me">Directory</div>
</p>
Below is my jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('.pull-me').click(function () {
$('.panel').slideToggle('slow');
});
});
</script>
I am using IE9 and I have not been able to use any other browser.
Any help would be greatly appreciated.

I supouse you have missed a line in your css it should start like this:
<style>
div {
margin:0 auto;
...
or just delete these lines
margin:0 auto;
padding:0;
width:200px;
text-align:center;
}