Javascript with string from textbox not working

Question

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>

VadimB · Accepted Answer · 2016-12-20 10:00:39Z

1

<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>

edited Dec 20, 2016 at 10:00

answered Dec 20, 2016 at 9:59

VadimB

5,7213 gold badges39 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mairaj Ahmad Over a year ago

It happens if textbox is inside ContentPlaceHolder herei it is simple page.

Robba · Accepted Answer · 2016-12-20 10:01:39Z

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>

Genish Parvadia · Accepted Answer · 2016-12-20 10:01:07Z

0

try this getElementById

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

i think your problem is solved this solution

answered Dec 20, 2016 at 10:01

Genish Parvadia

1,4553 gold badges17 silver badges31 bronze badges

Collectives™ on Stack Overflow

Javascript with string from textbox not working

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related