How to Use jQuery Steps Form in asp.net

Anonymous User 9566 01 Jan 2016

I want to use jQuery Steps Form in asp.net. how to do this please give me small demo.

Anonymous User

Other

I am a content writter !

2 Answers

Aryan Kumar 03 Jul 2023

Sure, here are the steps on how to use jQuery steps form in ASP.NET:

Create a steps form in your HTML page.
Add a jQuery library to your HTML page.
Write jQuery code to control the steps form.
Bind the jQuery code to the steps form.

Here is an example of the code:

HTML

<div id="steps-form">
    <ul>
        <li>Step 1</li>
        <li>Step 2</li>
        <li>Step 3</li>
    </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    // Get the steps form
    var stepsForm = $("#steps-form");

    // Get the steps list
    var stepsList = stepsForm.find("ul");

    // Get the current step
    var currentStep = 0;

    // Click handler for the next button
    $(".next-button").click(function() {
        // Increase the current step
        currentStep++;

        // Show the current step
        stepsList.children().eq(currentStep).show();

        // Hide the previous step
        stepsList.children().eq(currentStep - 1).hide();
    });

    // Click handler for the previous button
    $(".previous-button").click(function() {
        // Decrease the current step
        currentStep--;

        // Show the current step
        stepsList.children().eq(currentStep).show();

        // Hide the previous step
        stepsList.children().eq(currentStep + 1).hide();
    });
});
</script>

This code will create a steps form in your HTML page. The jQuery library will be loaded from Google CDN. The jQuery code will control the steps form by showing and hiding the steps based on the current step. The jQuery code will be bound to the steps form using the click event handler.

Anonymous User 01 Jan 2016

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.

forum

How to Use jQuery Steps Form in asp.net

Can you answer this question?

2 Answers