my html and javascript code is working correctly. But while I put it in asp, the javascript code isn't working.

My html code is...

 <div class="form-group">
        <label class="col-md-3 col-xs-12 control-label">Work Completed</label>
        <div class="col-md-6 col-xs-12">  
            <div class="input-group">
                <span class="input-group-addon">%</span>
                <input type="text" class="form-control" name="" id="tval" oninput="changeDiv()" runat="server"/>
            </div>
        </div>

    </div>
    <div class="form-group">
        <label class="col-md-3 col-xs-12 control-label"></label>
        <div class="col-md-6 col-xs-12">                                                                                                                                        
            <div class="progress progress-thick progress-striped active">
                <div id="p_bar" class="progress-bar progress-bar-success" role="progressbar" ></div>
            </div>
        </div>
    </div>

and the javascript code is

<script type="text/javascript">
    function changeDiv() {
        tval = document.getElementById('tval').value;
        document.getElementById('p_bar').setAttribute("style", "width:" + tval + "%");
    }
</script>

This works perfectly. The code above is to change the progressbar (id="p_bar") value with textbox (id="tval") input and the progressbar range increases or decreases with the value.

But when I put runat="server" in <input type="text">, the code is not working.

I am unable to find the solution.

Please help me.

my html and javascript code is working correctly. But while I put it in asp, the javascript code isn't working.

My html code is...

 <div class="form-group">
        <label class="col-md-3 col-xs-12 control-label">Work Completed</label>
        <div class="col-md-6 col-xs-12">  
            <div class="input-group">
                <span class="input-group-addon">%</span>
                <input type="text" class="form-control" name="" id="tval" oninput="changeDiv()" runat="server"/>
            </div>
        </div>

    </div>
    <div class="form-group">
        <label class="col-md-3 col-xs-12 control-label"></label>
        <div class="col-md-6 col-xs-12">                                                                                                                                        
            <div class="progress progress-thick progress-striped active">
                <div id="p_bar" class="progress-bar progress-bar-success" role="progressbar" ></div>
            </div>
        </div>
    </div>

and the javascript code is

<script type="text/javascript">
    function changeDiv() {
        tval = document.getElementById('tval').value;
        document.getElementById('p_bar').setAttribute("style", "width:" + tval + "%");
    }
</script>

This works perfectly. The code above is to change the progressbar (id="p_bar") value with textbox (id="tval") input and the progressbar range increases or decreases with the value.

But when I put runat="server" in <input type="text">, the code is not working.

I am unable to find the solution.

Please help me.

• javascript
• html
• asp

• also add this ClientIDMode="Static" – Sharique Ansari Commented Apr 17, 2015 at 11:20

4 Answers 4

By using ClientIDMode="Static" in your server control it will not change ID of that element on Page Render & hence your existing javascript/jquery will work.

So Replace this:-

<input type="text" class="form-control" name="" id="tval" oninput="changeDiv()" runat="server"/>

with

<input type="text" class="form-control" name="" id="tval" oninput="changeDiv()" runat="server" ClientIDMode="Static"/>

or

if you don't want to use ClientIDMode="Static"

please replace your ID wherever you used runat="server", like this:-

tval = document.getElementById('<%=tval.ClientID%>').value;

you have to add ClientID when you create your textbox as server control.

so try this,

<script type="text/javascript">
    function changeDiv() {
        tval = document.getElementById('<%=tval.ClientID%>').value;
        document.getElementById('p_bar').setAttribute("style", "width:" + tval + "%");
    }
</script>

As input tag is a html tag (markup language) you cannot use an asp runat attribute,instead you can use

Example:<asp:Label runat="server"> if it is suitable.

Try to call it with class name instead of id if you need to use runat="server".
Such as:

$('.classname').val();

or :

document.getElementsByClassName("classname");