Home > DeveloperSection > Forums > How to Use jQuery Steps Form in asp.net
 Ask Question

How to Use jQuery Steps Form in asp.net

Total Post:341

Points:2389
 4555  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. Post:279

    Points:1987
    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.

      Modified On Apr-10-2018 06:57:46 AM

Answer

NEWSLETTER

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

© Copyright © 2010 - 2018 MindStick Software Pvt. Ltd. All Rights Reserved