基于webform填写的必填字段的进度条 [英] Progress bar based on Mandatory fields filled in webform
本文介绍了基于webform填写的必填字段的进度条的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
大家好,
i遇到一个问题。
Hi Guys,
i am facing one problem.
<head runat="server">
<title></title>
<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 id="form1" action="Temp1.aspx" runat="server">
<div>
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" />
</div>
</form>
</body>
</html>
以上html代码工作正常且显示进度条,但对于asp.net代码它无效,请帮忙我。
above html code working fine and showing progress bar,but for asp.net code it is not working,please help me.
<head runat="server">
<title></title>
<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 id="form1" action="Temp.aspx" runat="server">
<div>
<table style="width: 100%;">
<tr>
<td>
</td>
<td>
<asp:TextBox ID="field1" runat="server" OnTextChanged="check()" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:TextBox ID="field2" runat="server" OnTextChanged="check()"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:TextBox ID="field3" runat="server" OnTextChanged="check()"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:TextBox ID="field4" runat="server" OnLoad="check()"></asp:TextBox>
</td>
</tr>
<tr>
<td>
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" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
推荐答案
您需要为asp:TextBox添加客户端处理程序
控件。OnTextChanged
处理程序运行服务器端。
换句话说。代码将尝试在您的代码中执行检查功能。
You need to add a client-side handler for yourasp:TextBox
controls. TheOnTextChanged
handler runs server side.
In other words. the code will try to perform a check function in your code behind.
这篇关于基于webform填写的必填字段的进度条的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文