Best Jquery ,javascript, HTML5 CSS3 tutorial with jquery examples, php script , demos for beginners, web designers and web developers.

Jquery

Jquery Training

Jquery training blog

Multi step form using HTML and JavaScript

Form is the important part in web design. Form is the primary interface to the user by which user is used to interact with the data in terms of fetching or submitting. A good look of the form is the essential part of web page. Good look in terms of of usability and functionality. The Continue Reading


Form is the important part in web design. Form is the primary interface to the user by which user is used to interact with the data in terms of fetching or submitting. A good look of the form is the essential part of web page. Good look in terms of of usability and functionality. The below code represents a multi step form using HTML and Java Script.Multi step form are found now a days in various websites.

We have done multi step form using HTML and java script

Multi step form example

<pre><script>// <![CDATA[
var count = 0; function validation(event) { var radio_check = document.getElementsByName(‘gender’); var input_field = document.getElementsByClassName(‘text_field’); var text_area = document.getElementsByTagName(‘textarea’); // Validating radio button. if (radio_check[0].checked == false && radio_check[1].checked == false) { var y = 0; } else { var y = 1; } // For loop to count blank inputs. for (var i = input_field.length; i > count; i–) {
if (input_field[i – 1].value == ” || text_area.value == ”) {
count = count + 1;
} else {
count = 0;
}
}
if (count != 0 || y == 0) {
alert(“*All Fields are mandatory*”); // Notifying validation
event.preventDefault();
} else {
return true;
}
}
/*———————————————————*/
// Function that executes on click of first next button.
function next_step1() {
document.getElementById(“first”).style.display = “none”;
document.getElementById(“second”).style.display = “block”;
document.getElementById(“active2”).style.color = “#f16000”;
}
// Function that executes on click of first previous button.
function prev_step1() {
document.getElementById(“first”).style.display = “block”;
document.getElementById(“second”).style.display = “none”;
document.getElementById(“active1”).style.color = “#f16000”;
document.getElementById(“active2”).style.color = “gray”;
}
// Function that executes on click of second next button.
function next_step2() {
document.getElementById(“second”).style.display = “none”;
document.getElementById(“third”).style.display = “block”;
document.getElementById(“active3”).style.color = “#f16000”;
}
// Function that executes on click of second previous button.
function prev_step2() {
document.getElementById(“third”).style.display = “none”;
document.getElementById(“second”).style.display = “block”;
document.getElementById(“active2”).style.color = “#f16000”;
document.getElementById(“active3”).style.color = “gray”;
}\
// ]]></script></pre>
<div><form class=””regform”” action=””#”” method=””get””>&lt;!– Progressbar –&gt;
<ul>
<ul>
<li id=””active1″”>Create Account</li>
</ul>
</ul>
&nbsp;
<ul>
<li id=””active2″”>Educational Profiles</li>
</ul>
&nbsp;

&nbsp;
<ul>
<li id=””active3″”>Personal Details</li>
</ul>
&nbsp;

&nbsp;

&lt;!– Fieldsets –&gt;
<fieldset id=””first””>
<h2 class=””title””>Create your account</h2>
&nbsp;
<p class=””subtitle””>Step 1</p>
<input class=””text_field”” name=””email”” type=””text”” value=”””” placeholder=””Email”” /> <input class=””text_field”” name=””pass”” type=””password”” value=”””” placeholder=””Password”” /> <input class=””text_field”” name=””cpass”” type=””password”” value=”””” placeholder=””Confirm” /> <input id=””next_btn1″” type=””button”” value=””Next”” /></fieldset>
&nbsp;
<fieldset id=””second””>
<h2 class=””title””>Educational Profiles</h2>
&nbsp;
<p class=””subtitle””>Step 2</p>
<select class=””options””>
<option>–Select Education–</option>
<option>Post Graduate</option>
<option>Graduate</option>
<option>HSC</option>
<option>SSC</option>
</select><input class=””text_field”” name=””marks”” type=””text”” value=”””” placeholder=””Marks” /> <input class=””text_field”” name=””pyear”” type=””text”” value=”””” placeholder=””Passing” /> <input class=””text_field”” name=””univ”” type=””text”” placeholder=””University”” /> <input id=””pre_btn1″” type=””button”” value=””Previous”” /> <input id=””next_btn2″” name=””next”” type=””button”” value=””Next”” /></fieldset>
&nbsp;
<fieldset id=””third””>
<h2 class=””title””>Personal Details</h2>
&nbsp;
<p class=””subtitle””>Step 3</p>
<input class=””text_field”” name=””fname”” type=””text”” placeholder=””First” /> <input class=””text_field”” name=””lname”” type=””text”” placeholder=””Last” /> <input class=””text_field”” name=””cont”” type=””text”” placeholder=””Contact”” /> <label>Gender</label> <input name=””gender”” type=””radio”” value=””Male”” />Male <input name=””gender”” type=””radio”” value=””Female”” />Female <textarea name=””address”” placeholder=””Address””>&lt;br /&gt;
</textarea> <input id=””pre_btn2″” type=””button”” value=””Previous”” /> <input class=””submit_btn”” type=””submit”” value=””Submit”” /></fieldset>
</form></div>
&nbsp;

Please follow and like us:






About the author

Joydeb Choudhury holds a Master's degree in Computer Application from I.G.N.O.U. After working as a web developer in various companies he has started bloging in 2016.

Recent Posts of blog

Downalod Free Php Scripts