HOW TO USE JQUERY STEPS FORM IN ASP.NET

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
 3652  View(s)
Ratings:
Rate this:
I want to use  jQuery Steps Form in asp.net. how to do this please  give me small demo.
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: How to Use jQuery Steps Form in asp.net

    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.

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!