Html checkbox is not accessible in javascript of aspx page when adding runat attribute

Question

0.00/5 (No votes)

See more:

Please Help me It's Urgent

I am
Making a dotnet page where i am take 4 html checkbox and onclick of every checkbox i display and hide a div box. i am make a function check1 and call the html checkbox. But when i want to this checkbox on aspx.cs C# page for coding so i am adding runat="server" attribute in every html checkbox. After that javascript gives error on click of checkbox is object expected. Please help me.

code is below: --

    function check1() {
			alert("hi");
//        alert(document.getElementById('add_acad'));
        var checkbox1 = document.getElementById('add_acad');
        var panel1=document.getElementById('academicpanel');
        if (checkbox1.checked)
            panel1.style.display = 'block';
        else
            panel1.style.display = 'none';
        var checkbox2 = document.getElementById('add_grade');
        var panel2 = document.getElementById('gradepanel');
        if (checkbox2.checked) {
            panel2.style.display = 'block';
        }
        else
            panel2.style.display = 'none';
        var checkbox3 = document.getElementById('add_health');
        var panel3 = document.getElementById('healthpanel');
        if (checkbox3.checked) {
            panel3.style.display = 'block';
        }
        else
            panel3.style.display = 'none';
        var checkbox4 = document.getElementById('addother');
        var panel4 = document.getElementById('leavepanel');
        if (checkbox4.checked)
            panel4.style.display = 'block';
        else
            panel4.style.display = 'none';
    }


 <table width="100%" border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td><label>
            <input type="checkbox"  runat="server" name="add_acad" id="add_acad" checked="checked"  önclick="check1()"/>
          Add Academic Record</label></td>
          <td><label>
            <input type="checkbox"  runat="server" name="add_grade" id="add_grade"   önclick="check1()"/>
          Add Grade</label></td>
          <td><label>
            <input type="checkbox"  runat="server" name="add_health" id="add_health"   önclick="check1()"/>
          Add Health Record</label></td>
          <td><label>
            <input type="checkbox"  runat="server" name="addother" id="addother"   önclick="check1()"/>
          Add Other Record</label></td>
        </tr>
      </table>

Posted 21-Oct-11 8:16am

Ram Kumar(Webunitech)

Updated 21-Oct-11 8:48am

Not Active

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Not Active · Answer 1 · 2011-10-21T08:57:00

ASP.NET addes a prefix to controls, something like "ctl00_PlaceHolderArea", so when trying to access the is JavaScript as you are...

document.getElementById('add_acad');

...the control no longer has the same name. It would now be something like this

document.getElementById('ctl00_PlaceHolderArea_add_acad');

You should look into using JQuery. You would reference the control as

$("[id$='add_acad']")

This will find any control with an id that contains "add_acad" no matter where on the page it is or what the prefix is.

aidin Tajadod · Answer 2 · 2011-10-21T09:23:00

Solution 2

You need to use Obj.ClientID like this:

JavaScript

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

Just be aware that it doesn't work in js files.

Posted 21-Oct-11 9:23am

aidin Tajadod

Updated 21-Oct-11 9:25am

v2

Comments

[no name] 21-Oct-11 15:25pm

This will only work if the JavaScript is embedded within the aspx markup, which is not a good design choice IMO

aidin Tajadod 21-Oct-11 16:51pm

I have mentioned that: it doesn't work in JS files!

Manfred Rudolf Bihy 21-Oct-11 15:46pm

That was what I wanted to say! :-)

aidin Tajadod 21-Oct-11 16:52pm

I agree, It makes the aspx files look ugly! So what is your suggestion?

[no name] 21-Oct-11 17:53pm

"So what is your suggestion?" See solution 1 :)

aidin Tajadod 24-Oct-11 15:31pm

So what if someone doesn't want to use JQ? In my opinion Solution1 is a recomendation but not a solution.

[no name] 24-Oct-11 15:53pm

Solution 1 explains the problem the OP was having, the corrective action necessary and an alternative.

Your "solution" only shows one way, you offer no explanation or alternative. You also say "You need to use", which is not the case because you don't "need" to use this method, there are other methods. Neither does your method allow for more flexible and extensible design.

You could continue to argue the merits of your method (please do so offline if you truly feel the need) or your could learn a new, and perhaps better, way.

aidin Tajadod 24-Oct-11 17:19pm

OK, you are right, your solution shows many alternatives:) (And I am not defending my method.The reason I asked your suggestion.)
Anyway thank you for your answer.