基于webform填写的必填字段的进度条 [英] Progress bar based on Mandatory fields filled in webform

查看:82
本文介绍了基于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">&nbsp;</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>
                    &nbsp;
                </td>
                <td>
                    <asp:TextBox ID="field1" runat="server" OnTextChanged="check()" ></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    <asp:TextBox ID="field2" runat="server" OnTextChanged="check()"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    <asp:TextBox ID="field3" runat="server" OnTextChanged="check()"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </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">
                            &nbsp;</div>
                    </div>
                    <input type="submit" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

推荐答案

您需要为 asp:TextBox添加客户端处理程序控件。 OnTextChanged 处理程序运行服务器端。



换句话说。代码将尝试在您的代码中执行检查功能。
You need to add a client-side handler for your asp:TextBox controls. The OnTextChanged handler runs server side.

In other words. the code will try to perform a check function in your code behind.


这篇关于基于webform填写的必填字段的进度条的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆