Home > DeveloperSection > Forums > How to Use jQuery Steps Form in asp.net
Ankit Singh

Total Post:341

Points:2389
Posted on    January-01-2016 10:34 PM

 .NET ASP.Net  JQuery 
Ratings:


 1 Reply(s)
 1357  View(s)
Rate this:
I want to use  jQuery Steps Form in asp.net. how to do this please  give me small demo.


aditya kumar Patel

Total Post:246

Points:1752
Posted on    January-01-2016 10:58 PM

when we need to use steps form in html using  asp.net , mvc , etc. we have to download jquery steps library from http://www.jquery-steps.com/ 

Now We write code below

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
  
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/jquery.steps.css">
    <script src="../lib/jquery-1.9.1.min.js"></script> 
    <script src="../build/jquery.steps.js"></script>
</head>
<body>
    <div style="width: 800px;">
        <div class="content">
            <script>
                $(function () {
                    $("#wizard").steps({
                        headerTag: "h2",
                        bodyTag: "section",
                        transitionEffect: "slideLeft"
                    });
                });
            </script>

            <div id="wizard">
                <h2>First Step</h2>
                <section>
                    <fieldset>
                        <legend>Personal  Information</legend>
                        <label for="userName-2">User name </label>
                        <input id="userName-2" name="userName" type="text" class="required">
                        <label for="address-2">address </label>
                        <input id="address-2" name="Address" type="text" class="required">
                        <label for="Password-2">Password </label>
                        <input id="Password-2" name="Password" type="Password" class="required">
                    </fieldset>

                </section>

                <h2>Second Step</h2>
                <section>
                    <fieldset>
                        <legend>Contact Information</legend>

                        <label for="Phone-2">Phone Number </label>
                        <input id="Text6" name="Phone" type="text" class="required">
                        <label for="Mobile-2">Mobile Number </label>
                        <input id="Text4" name="Mobile" type="text" class="required">
                        <label for="EmailID-2">EmailID Number </label>
                        <input id="Text5" name="EmailID" type="text" class="required">
                    </fieldset>

                </section>

                <h2>Third Step</h2>
                <section>
                    <fieldset>
                        <legend>Account Information</legend>
                        <label for="accountName-2">Account Number </label>
                        <input id="Text1" name="accountName" type="text" class="required">
                        <label for="bankname-2">Bank Name </label>
                        <input id="Text2" name="bankName" type="text" class="required">
                        <label for="ifsccode-2">IFSC CODE </label>
                        <input id="Text3" name="ifscName" type="text" class="required">
                    </fieldset>

                </section>

            </div>
        </div>
    </div>
    <style>
        .wizard > .content > .body input {
            display: block;
            border: 1px solid #ccc;
            width: 100%;
            height: 30px;
            margin-bottom: 20px;
        }

        .wizard > .content > .body {
            background-color: rgba(105, 182, 199, 0.72);
        }
    </style>
</body>
</html>

Now  fill form and click to next button

click next button

now click to finish button  complete your three steps form.


Don't want to miss updates? Please click the below button!

Follow MindStick