javascript - add previous ans next button -
i wanna add next , previous button page jsp , have multiple form can reach menu pass form clicking both on next or previous , menu thank you attention , i've seen lot of topic none of them me
$(function() { /* number of fieldsets */ var fieldsetcount = $('#formelem').children().length; /* current position of fieldset / navigation link */ var current = 1; /* sum , save widths of each 1 of fieldsets set final sum total width of 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 first input of form */ $('#formelem').children(':first').find(':input:first').focus(); /* show navigation bar */ $('#navigation').show(); /* when clicking on navigation link the form slides 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 position of link in current variable */ current = $this.parent().index() + 1; /* animate / slide next or corresponding fieldset. order of links in navigation is order of fieldsets. also, after sliding, trigger focus on first input element of new fieldset if clicked on last link (confirmation), validate all fieldsets, otherwise validate previous 1 before 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 tab (on last input of each fieldset), makes form slide 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 blur validation */ $(this).blur(); e.preventdefault(); } }); }); /* validates errors on fieldsets records if form has errors in $('#formelem').data() */ function validatesteps(){ var formerrors = false; for(var = 1; < fieldsetcount; ++i){ var error = validatestep(i); if(error == -1) formerrors = true; } $('#formelem').data('errors',formerrors); } /* validates 1 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 errors don't allow user submit */ $('#registerbutton').bind('click',function(){ if($('#formelem').data('errors')){ alert('please correct errors in 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 { 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 { 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 { 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 in form correctly filled registration made . otherwise error message generate .in last step user can confirm 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"><a href="#">account</a></li> <li><a href="#">personal details</a></li> <li><a href="#">bank information</a></li> <li><a href="#">confirm</a></li> </ul> </div> </div> </body></html>
you try 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 check if there next/prev li when click on `button.
$(function() { /* number of fieldsets */ var fieldsetcount = $('#formelem').children().length; /* current position of fieldset / navigation link */ var current = 1; /* sum , save widths of each 1 of fieldsets set final sum total width of 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); /* avoid problems in ie, focus first input of form */ $('#formelem').children(':first').find(':input:first').focus(); /* show navigation bar */ $('#navigation').show(); /* when clicking on navigation link form slides 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'); /* store position of link in current variable */ current = $this.parent().index() + 1; /* animate / slide next or corresponding fieldset. order of links in navigation order of fieldsets. also, after sliding, trigger focus on first input element of new fieldset if clicked on last link (confirmation), validate fieldsets, otherwise validate previous 1 before 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 tab (on last input of each fieldset), makes form slide 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 blur validation */ $(this).blur(); e.preventdefault(); } }); }); /* validates errors on fieldsets records if form has errors in $('#formelem').data() */ function validatesteps() { var formerrors = false; (var = 1; < fieldsetcount; ++i) { var error = validatestep(i); if (error == -1) formerrors = true; } $('#formelem').data('errors', formerrors); } /* validates 1 fieldset , 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 errors don't allow user submit */ $('#registerbutton').bind('click', function() { if ($('#formelem').data('errors')) { alert('please correct errors in 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 { 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 { 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 { 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 { 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 { 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 in form correctly filled registration made . otherwise error message generate .in last step user can confirm submission of 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"><a href="#">account</a></li> <li><a href="#">personal details</a></li> <li><a href="#">bank information</a></li> <li><a href="#">confirm</a></li> </ul> </div> </div> </body> </html>
Comments
Post a Comment