asp with javascript

Question

I have an asp.net page, and I want to hide a div on the page when the index of the asp:DropDownList is 0 using javascript.

I know how to hide the div but I do need help on how to get the selected index of the asp:DropDownLists using javascript.

This is what I have in the javascript:

 function hideDiv() {
      var drpCampDock = document.getElementById('drpListCampaignDocketTemplate');
      var drpCampType = document.getElementById('drpCampaignType');

when it gets to this check it gives an error.

        if (drpCampDock.selectedIndex == 0) {
           document.getElementById('divBuilderMain').style.visibility = 'hidden';
        }
    }

The error I get is

Microsoft JScript runtime error: Object required

What error does it give? It helps if you include as much relevant information as possible. — Oded
– Oded, Commented Jun 6, 2011 at 9:09
Sorry. The erorr is: Microsoft JScript runtime error: Object required — johnnie
– johnnie, Commented Jun 6, 2011 at 9:11
Can you bind the asp:DropDownList like doc.getEleById("<%= drpListCampaignDocketTemplate.ClientID %>") and give it a try? — painotpi
– painotpi, Commented Jun 6, 2011 at 9:27

M4N · Accepted Answer · 2011-06-06 09:36:48Z

3

I guess your problem is that the (client-side) ID of the rendered select element is not the same as the server-side ID of the asp:DropDownList (have a look at the HTML source code rendered in the browser to confirm this).

To get the correct client-side element, you'll have to use the following code:

var drpCampType = document.getElementById('<%= drpCampaignType.ClientID %>');

Alternatively you can change the ASP.NET markup to this and pass the div's ID and the dropdownlist's current selection to the javascript function:

<asp:DropDownList ... onchange="hideDiv('divBuilderMain', this.value)" />
...
function hideDiv(divId, ddlIndex)
{
  if (ddlIndex == 0) document.getElementById(divId).style.visibility = 'hidden';
}

edited Jun 6, 2011 at 9:36

answered Jun 6, 2011 at 9:30

M4N

96.8k45 gold badges225 silver badges265 bronze badges

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

2 Comments

M4N Over a year ago

@johnnie: no problem! don't forget to vote for and accept helpful answers (also for your other questions).

johnnie Over a year ago

Hi could you possibly tell me how to call this javascript on my selectedindexchanged of my DropDownList

KriZ · Accepted Answer · 2011-06-06 09:52:41Z

2

are you using .NET masterpages?

Then you will have to find out what the resulted ID will be for your dropdownlist. Debug the page in IE (F12) and look at the ID you are getting, it will contain id's from your masterpage as well, hence why your function is not picking up the right id.

Suppose i've got an update panel with a button in my page (using masterpages)

--snip--

       <ContentTemplate>
            <asp:Button ID="Hiddenbutton" runat="server" Text="" />
        </ContentTemplate>

--snip--

One way of gettting the ID to remain unchanged is to use an Input field

 <input type="hidden" id="unchangedHidden" value="<%=Hiddenbutton.ClientID%>" />

If i want to click this button from within Java

function TestcodeBehind2()
{
 var o =document.getElementById('unchangedHidden').getAttribute('value');
 document.getElementById(o).click();
 }

by reading the value of the hidden input field, i'm sure i'll get the correct ID, wether i'm using masterpages or not .

I found out that using

 var o =document.getElementById('<%=Hiddenbutton%>');

not always resulted in a succesful retrieval of the ID with my masterpages.

edited Jun 6, 2011 at 9:52

answered Jun 6, 2011 at 9:27

KriZ

6821 gold badge7 silver badges17 bronze badges

2 Comments

M4N Over a year ago

@Tarun: This should be a comment on the question. Unfortunately, users with a reputation < 50 can't add comments to questions.

KriZ Over a year ago

exactly, i was too quick to just put the hint out. I'm now even further away from the 50 :(

Muhammad Akhtar · Accepted Answer · 2011-06-06 09:16:03Z

0

I do this when I need selectedIndex:

var collx = document.getElementsByName("zmembertype");  
  for (ix = 0 ; ix < collx.length; ix++ ) {  
  if (collx[ix].checked)  
    temp = collx[ix].value;  
  }

I think you need a loop ?

edited Jun 6, 2011 at 9:16

Muhammad Akhtar

52.2k37 gold badges142 silver badges191 bronze badges

answered Jun 6, 2011 at 9:13

MikeyKennethR

6084 silver badges16 bronze badges

Comments

Darren Reid · Accepted Answer · 2011-06-06 09:19:31Z

For future reference, a good way to approach these problems is by looking at the source of the page this script is running on. For eg, an asp:dropdownlist gets rendered in html that will generally look something like this.

<select>
    <option value=""></option>
    <option value="FirstOption">First option</option>
    <option value="SecondOption">Second option</option>
</select>

So base on that, you can do the following in script in hideDiv

function hideDiv() {
    var drpCampDock = document.getElementById('drpListCampaignDocketTemplate');
    var drpCampType = document.getElementById('drpCampaignType');

    var drpCampTypeValue = drpCampType.options[drpCampType.selectedIndex].value;

The last line is assuming that you 'drpCampaignType' is actually the name of the 'select' element. If 'drpCampaignType' is the name of a surrounding element, try something like

var drpCampType = document.getElementById('drpCampaignType').getElementsByTagName('select')[0];

continue with the same line of code as above as it will assign drpCampType to the correct select element.

As I said, it's always good to have a look at the source to help you out.

HTH

Pankaj Agarwal · Accepted Answer · 2011-06-06 09:20:42Z

0

Call JS function on Drop down on change event

for ex like as

<asp:DropDownList ID="ddl" onchange="linkURL(this)" runat="server">
 </asp:DropDownList>

// JS function

function linkURL(URL) 
    {
        alert (URL.options[URL.selectedIndex].value);
    }

answered Jun 6, 2011 at 9:20

Pankaj Agarwal

11.4k12 gold badges46 silver badges59 bronze badges

Collectives™ on Stack Overflow

asp with javascript

5 Answers 5

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related