CODEWITHSUNDEEP
javascriptasp.net
Rico Brouwer
Rico Brouwer

Reputation: 81

Javascript with string from textbox not working

My javascript is not working in the way i want it to. I have a textbox and a progresbar. The javascript has to read the string from the textbox (TbProd1) and look which string it is. Every string has a different value in the progresbar (25%, 50% and 100%).

The textbox has 3 different options: 1: Vrijgegeven 2: Gepicked 3: Voltooid

The script wont compare my textbox string. Can somebody find my mistake?

Here is my code:

    <script>
        function move1() {
            var textarea1 = document.getElementById('TbProd1');

            var word1 = "Vrijgegeven";
            var word2 = "Gepicked";
            var word3 = "Voltooid";

            var textValue = textarea1.value; 

              if (textValue == (word1)) {

                var elem = document.getElementById("myBar");
                var width = 10;
                var id = setInterval(frame, 10);
                function frame() {
                    if (width >= 25) {
                        clearInterval(id);
                    } else {
                        width++;
                        elem.style.width = width + '%';
                        document.getElementById("LblProgBar1").innerHTML = width * 1 + '%';
                    }
                }
            }
            else   if (textValue == (word2)) {                
                var elem = document.getElementById("myBar");
                var width = 25;
                var id = setInterval(frame, 10);
                function frame() {
                    if (width >= 50) {
                        clearInterval(id);
                    } else {
                        width++;
                        elem.style.width = width + '%';
                        document.getElementById("LblProgBar1").innerHTML =    width * 1 + '%';
                    }
                }
            }
            else   if (textValue == (word3)) {                
                var elem = document.getElementById("myBar");
                var width = 50;
                var id = setInterval(frame, 10);
                function frame() {
                    if (width >= 100) {
                        clearInterval(id);
                    } else {
                        width++;
                        elem.style.width = width + '%';
                        document.getElementById("LblProgBar1").innerHTML = width * 1 + '%';
                    }
                }
            }
     }
</script>

</head>
<body>
    <form id="form1" runat="server">

        <div id="content">
        <div>
            <asp:TextBox ID="TbProd1" runat="server"></asp:TextBox></div>
            <div id="myProgress">
            <div id="myBar">
            <div id="LblProgBar1">0%</div>
            </div>
            </div>
        </div>

    </form>
</body>
</html>

Upvotes: 2

Views: 59

Answers (3)

Robba
Robba

Reputation: 8324

How do you hook up the event to the textbox? The code itself does work, so I wonder if it isn't either an issue with the ID from the TextBox being different from what you expect or the event just not calling the move1() function.

    function move1() {
            var textarea1 = document.getElementById('TbProd1');

            var word1 = "Vrijgegeven";
            var word2 = "Gepicked";
            var word3 = "Voltooid";

            var textValue = textarea1.value; 

              if (textValue == (word1)) {

                var elem = document.getElementById("myBar");
                var width = 10;
                var id = setInterval(frame, 10);
                function frame() {
                    if (width >= 25) {
                        clearInterval(id);
                    } else {
                        width++;
                        elem.style.width = width + '%';
                        document.getElementById("LblProgBar1").innerHTML = width * 1 + '%';
                    }
                }
            }
            else   if (textValue == (word2)) {                
                var elem = document.getElementById("myBar");
                var width = 25;
                var id = setInterval(frame, 10);
                function frame() {
                    if (width >= 50) {
                        clearInterval(id);
                    } else {
                        width++;
                        elem.style.width = width + '%';
                        document.getElementById("LblProgBar1").innerHTML =    width * 1 + '%';
                    }
                }
            }
            else   if (textValue == (word3)) {                
                var elem = document.getElementById("myBar");
                var width = 50;
                var id = setInterval(frame, 10);
                function frame() {
                    if (width >= 100) {
                        clearInterval(id);
                    } else {
                        width++;
                        elem.style.width = width + '%';
                        document.getElementById("LblProgBar1").innerHTML = width * 1 + '%';
                    }
                }
            }
     }
    <form id="form1" runat="server">

        <div id="content">
        <div>
            <input type="text" onkeyup="move1()" id="TbProd1" />
            <div id="myProgress">
            <div id="myBar">
            <div id="LblProgBar1">0%</div>
            </div>
            </div>
        </div>

    </form>

Upvotes: 1

Genish Parvadia
Genish Parvadia

Reputation: 1455

try this getElementById

var textarea1=document.getElementById('<%=TbProd1.ClientID %>').value;

i think your problem is solved this solution

Upvotes: 0

VadimB
VadimB

Reputation: 5711

<asp:TextBox> after compiling has unique identifier. So seems you can't find this control by 'TbProd1'. Try to use "ClientIDMode"="Static" first.

<asp:TextBox ID="TbProd1" runat="server" ClientIDMode="Static"></asp:TextBox>

Upvotes: 1

Related Questions