forum

home / developersection / forums / how to use jquery steps form in asp.net

Ask Question

How to Use jQuery Steps Form in asp.net

Anonymous User 9365 01-Jan-2016
I want to use  jQuery Steps Form in asp.net. how to do this please  give me small demo.
.net asp.net  jquery 
Updated on 03-Jul-2023
Anonymous User

Other

I am a content writter !

Follow
Can you answer this question?
Answer

2 Answers

Aryan Kumar

Aryan Kumar

03-Jul-2023

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

  1. Create a steps form in your HTML page.
  2. Add a jQuery library to your HTML page.
  3. Write jQuery code to control the steps form.
  4. 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

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/ 

How to Use jQuery Steps Form in asp.net

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

How to Use jQuery Steps Form in asp.net

click next button

How to Use jQuery Steps Form in asp.net

now click to finish button  complete your three steps form.

How to Use jQuery Steps Form in asp.net
MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy