Webform中的进度栏 [英] Progress bar in webform
问题描述
我正在.net中创建一个Web表单，其中大约有14个字段.我想在网络表单的末尾创建一个进度条，以显示状态表格填写.如果表单的所有字段均已填写，那么它将显示100％进行中栏，否则会根据表单状态显示％.
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.
如何在.Net中完成此操作.这项特定工作是否有任何类型的Ajax扩展器
How can i accomplish this in .Net. Is there any there any kind of ajax extender for this particular work
推荐答案
您可以仅使用两个div，并调整内部div的大小以显示进度，如本例所示.编辑字段后，将调用检查"功能，该功能将检查字段并更新进度条.
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"> </div>
</div>
<input type="submit" />
</form>
</body>
</html>
这篇关于Webform中的进度栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
