How to Use jQuery Steps Form in asp.net

aditya kumar Patel

Post:281

Points:2003

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

Posted on 2 years ago

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.

How to Use jQuery Steps Form in asp.net

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

Answer

Login