Home/ Questions/Q 4620376
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T02:33:09+00:00

I am creating a webform in .net in which approximate 14 fields are there

  • 0

I am creating a webform in .net in which approximate 14 fields are there .
I want to create a progress bar in the end of webform which will show the status of
form completion. if all the fields of form are filled than it will show 100% in progress
bar otherwise it will show some % according to the form status.

How can i accomplish this in .Net. Is there any there any kind of ajax extender for this particular work

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can just use two divs, and adjust the size of the inner div to show progress, as in this example.
    When a field is edited, the “check” function is called, which checks the fields and updates the progress bar.

    <html>
<head>
<script type="text/javascript">
    function check() {
        var completion = 0;
        if (document.getElementById("field1").value != "") {
            completion++;
        }
        if (document.getElementById("field2").value != "") {
            completion++;
        }
        if (document.getElementById("field3").value != "") {
            completion++;
        }
        document.getElementById("progressbar").style.width = completion*20+"px";
    }
</script>
</head>
<body>
<form action="script.aspx" method="GET">
    Name: <input type="text" id="field1" onchange="check()" /><br />
    Tel No.: <input type="text" id="field2" onchange="check()" /><br />
    Email: <input type="text" id="field3" onchange="check()" /><br />
    Completion: <div style="width: 60px; height: 10px; border: 1px solid black;">
        <div style="width: 0px; height: 10px; background-color: green;" id="progressbar">&nbsp;</div>
    </div>
    <input type="submit" />
</form>
</body>
</html>
    • 0