using javascript can we hide controls in one usercontrol based on the radiobutton selection in another user control in asp.net

Question

0.00/5 (No votes)

See more:

Using JavaScript can we hide controls in one .ascx based on the RadioButton selection in another .ascx in Asp.Net?

JavaScript

function hideBusActivityECommerce()
{
    myActivity = getActivity(); // ECommerce?
    if(myActivity =="ECommerce")
    {
       document.getElementById('<%=ECommerceSection.ClientID%>').style.display = 'inline';
       document.getElementById('<%=ddl_submission.ClientID%>').value = "";
       document.getElementById('<%=ddl_submission.ClientID%>').disabled = true;
    }
    else
    {
       document.getElementById('<%=ECommerceSection.ClientID%>').style.display = 'none';
       document.getElementById('<%=ddl_submission.ClientID%>').disabled = false;
    }
    
    if(myActivity=="ECommerce" || myActivity=="Retailer Owned")
    {       
        document.getElementById('<%ctl00_ContentPlaceHolder1_Tab2b_cb_Non%>').disable = false;
      document.getElementById('<%ctl00_ContentPlaceHolder1_Tab2b_txt_NonMerchantNo%>').disable = false;
                       document.getElementById('<%ctl00_ContentPlaceHolder1_Tab2b_txt_rate%>').disable = false;
   }
}

Posted 29-Sep-13 20:07pm

Naresh1277

Updated 29-Sep-13 22:02pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

v3

Add a Solution

Comments

OmniSource 30-Sep-13 2:43am

asp.net files get redered as HTML files, so they follow the same rules as any html files within browser. you can do the following to meet your needs.

1) Create a js function which accepts a bool value, and within the function find your element and add to it's style visibility: none
2) On check/uncheck of your radio button, call above function with your bool values.

this should do the job.

Naresh1277 30-Sep-13 3:46am

document.getElementById('<%ctl00_ContentPlaceHolder1_Tab2b_cb_Non%>').disable=true;
document.getElementById('<%ctl00_ContentPlaceHolder1_Tab2b_txt_NonMerchantNo%>').disable=true;
document.getElementById('<%ctl00_ContentPlaceHolder1_Tab2b_txt_rate%>').disable=true;
above three controls are in different .ascx tab, so when i choose a radio button option in one tab i need to hide these controls in another tab,

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 30-Sep-13 4:04am

What is the problem with this code? Have you debugged?
Did you check if there are any errors listed in FireBug console window?

Naresh1277 30-Sep-13 5:25am

how can I know the targatInout Id for those controls in another .ascx tab,

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 30-Sep-13 5:31am

If you want to know the IDs of controls, then View the Source of the Web Page in Browser and locate the control's html.

Naresh1277 30-Sep-13 6:37am

I got the Ids for the controls!!

Naresh1277 30-Sep-13 5:26am

It show following error while loading the tabwizard " The server is experiencing a problem with the /TabWizard.aspx page you requested. Please restart the application and retry your request, if the problem persists contact your application administrator".

Naresh1277 30-Sep-13 6:37am

The following error is displayed ----" Microsoft JScript runtime error: 'document.getElementById(...)' is null or not an object

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 30-Sep-13 7:35am

As you are getting this error, that means you are referring to wrong Ids.

Naresh1277 30-Sep-13 6:41am

if(myActivity=="ECommerce" || myActivity=="Retailer Owned")
{
document.getElementById('ctl00_ContentPlaceHolder1_Tab2b_cb_Non').disable=true;
document.getElementById('ctl00_ContentPlaceHolder1_Tab2b_txt_NonMerchantNo').disable=true;
document.getElementById('ctl00_ContentPlaceHolder1_Tab2b_lbl_NonClearanceInd').disable=true;
document.getElementById('ctl00_ContentPlaceHolder1_Tab2b_txt_Rate').disable=true;
}

the above controls are in different .ascx file and am calling them in different .ascx file ... is this the correct way??

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 30-Sep-13 7:36am

Yes, it should work as per this code. When you have the exact Id, you should not use the <%= %> directives. So, it must work.

Naresh1277 30-Sep-13 9:10am

is there any alternative way.. like wihtout using the method GetelementbyID ?? if yes letmeknow, like i am already trying alternatives but if could suggest me that would be helpful

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 30-Sep-13 9:58am

Always click on Reply button to directly reply to me.

Coming to your issue, there is alternate to use jQuery, where you can replace document.getElementById by $, but you have to read the ClientID if it is not static.

Why it is not working in javaScript? What is the problem now?

If you don't want that these Ids change dynamically, then set ClientIDMode="static" inside that control so that you can directly read by ID.

Please let me know and hit reply button. Also make sure you don't have any issues on Console window of FireBug.

Naresh1277 1-Oct-13 0:25am

Thanks man!! Its working now, the controls were getting disabled, but i want them to hide,, we found the solution.. Thanks allot.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 1-Oct-13 2:17am

Most welcome. My pleasure.
I see that you have added one solution. That's really great.

Good job, keep it up.

Thanks,
Tadit

2 solutions

Solution 1

in the first i prefer using Jquery ,
you must add jquery library befor <script> tag that contain on this code.

JavaScript

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>

JavaScript

function hideBusActivityECommerce()
{
    myActivity = getActivity(); // ECommerce?
    if(myActivity =="ECommerce")
    {
       $("#"+document.getElementById('<%=ECommerceSection.ClientID%>).style.display = 'inline';
       $("#"+<%=ddl_submission.ClientID%>).val("");
       $("#"+<%=ddl_submission.ClientID%>).attr("disabled","true");
    }
    else
    {
       $("#"+<%=ECommerceSection.ClientID%>).css("display","none");
       $("#"+<%=ddl_submission.ClientID%>).attr("disabled","false");
    }
    
    if(myActivity=="ECommerce" || myActivity=="Retailer Owned")
    {       
        $("#"+<%ctl00_ContentPlaceHolder1_Tab2b_cb_Non%>).attr("disabled","false");
      $("#"+<%ctl00_ContentPlaceHolder1_Tab2b_txt_NonMerchantNo%>).attr("disabled","false");
      $("#"+<%ctl00_ContentPlaceHolder1_Tab2b_txt_rate%>).attr("disabled","false");
   }
}

Posted 30-Sep-13 12:20pm

mahmoud mohammed mansour

Updated 30-Sep-13 14:49pm

v2

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)

Naresh1277 · Accepted Answer · 2013-09-30T18:35:00

C#

if(myActivity=="ECommerce" || myActivity=="Retailer Owned")
          {

              document.getElementById('ctl00_ContentPlaceHolder1_Tab2b_cb_NonDiscoverGlobalNetworkGP').style.visibility='hidden';
              document.getElementById('ctl00_ContentPlaceHolder1_Tab2b_txt_NonMerchantNoDiscoverGlobalNetworkGP').style.visibility='hidden';
              document.getElementById('ctl00_ContentPlaceHolder1_Tab2b_ddl_NonClearanceIndDiscoverGlobalNetworkGP').style.visibility='hidden';
              document.getElementById('ctl00_ContentPlaceHolder1_Tab2b_txt_RateDiscoverGlobalNetworkGP').style.visibility='hidden';

          }
          else
          {
              document.getElementById('ctl00_ContentPlaceHolder1_Tab2b_cb_NonDiscoverGlobalNetworkGP').style.visibility='visible';
              document.getElementById('ctl00_ContentPlaceHolder1_Tab2b_txt_NonMerchantNoDiscoverGlobalNetworkGP').style.visibility='visible';
              document.getElementById('ctl00_ContentPlaceHolder1_Tab2b_ddl_NonClearanceIndDiscoverGlobalNetworkGP').style.visibility='visible';
              document.getElementById('ctl00_ContentPlaceHolder1_Tab2b_txt_RateDiscoverGlobalNetworkGP').style.visibility='visible';
          }

with this it is hiding the controls based on the radio button activity

using javascript can we hide controls in one usercontrol based on the radiobutton selection in another user control in asp.net

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us