getElementById problem

beaniebear · Jan 10, 2011

<asp

ropDownList ID="ddlName runat="server" >

<asp:Button ID="btnConfirm" runat="server" Text="Go" onclientclick="ChangePage()"/>

I have a ddl and a button on a page. When the user clicks the button the javascript needs to check what has been selected in the ddl and redirect to the appropriate page.

The javascript works fine except can't get it to find the drop down.

var ControlName = document.getElementById("ddlName");

The javascript is in the masterpage. Will this cause any issues? Any help much appreciated.

feherke · Jan 10, 2011

Hi

When asking client-side scripting question please post the code as visible on the client side. I mean, the HTML as visible through the browser's View source command, not the ASP code.

beaniebear said:
The javascript is in the masterpage.

What is a "masterpage" ?

Feherke.

http://free.rootshell.be/~feherke/

beaniebear · Jan 10, 2011

Master page - a file in asp.net that you incorporate into your pages usually has menus and page layout in

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="

http://www.w3.org/1999/xhtml">

<head>
<title>Test</title>

<script type="text/javascript">

function ChangePage()

var ControlName = document.getElementById("ddlResort");

switch(ControlName.value)
{
case '1':
//Message="

http://www.salemaapartments.com";

URL="URL1";
location.href=URL;
//ConfirmChange(Message,URL,ddlId)
break
case '2':
//Message="URL2";
URL="

http://www.boavistagolf.com";

location.href=URL;
//ConfirmChange(Message,URL,ddlId)
break
case '3':
//Message="URL3";
URL="

http://www.oasisparqueholidays.com";

location.href=URL;
//ConfirmChange(Message,URL,ddlId)
break
}
}

</script>

</head>
<body style="background-image: url(images/bkgrGrad.gif);">

<form >

<select id="ddlResort" onChange="ChanegPage();">
<option value="0">Choose Sommat</option>
<option value="1">Pink</option>
<option value="2">Green</option>
<option value="3">Yellow</option>

</select>

</form>
</body>
</html>

feherke · Jan 10, 2011

Hi

There is absolutely no problem with the [tt]getElementById()[/tt] there. You missed an opening brace ( { ) before that statement :

Code:

[b]function[/b] [COLOR=darkgoldenrod]ChangePage[/color][teal]()[/teal]
[highlight][teal]{[/teal][/highlight]
  [b]var[/b] ControlName [teal]=[/teal] document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]"ddlResort"[/i][/green][teal]);[/teal]
 
  [b]switch[/b][teal]([/teal]ControlName[teal].[/teal]value[teal])[/teal]
  [teal]{[/teal]
    [b]case[/b] [green][i]'1'[/i][/green][teal]:[/teal]
[gray]//      Message="www.salemaapartments.com";[/gray]
      URL[teal]=[/teal][green][i]"URL1"[/i][/green][teal];[/teal]
      location[teal].[/teal]href[teal]=[/teal]URL[teal];[/teal]
[gray]//      ConfirmChange(Message,URL,ddlId)[/gray]
      [b]break[/b]
    [b]case[/b] [green][i]'2'[/i][/green][teal]:[/teal]
[gray]//      Message="URL2";[/gray]
      URL[teal]=[/teal][green][i]"[URL unfurl="true"]http://www.boavistagolf.com"[/URL][/i][/green][teal];[/teal]
      location[teal].[/teal]href[teal]=[/teal]URL[teal];[/teal]
[gray]//      ConfirmChange(Message,URL,ddlId)[/gray]
      [b]break[/b]
    [b]case[/b] [green][i]'3'[/i][/green][teal]:[/teal]
[gray]//      Message="URL3";[/gray]
      URL[teal]=[/teal][green][i]"[URL unfurl="true"]http://www.oasisparqueholidays.com"[/URL][/i][/green][teal];[/teal]
      location[teal].[/teal]href[teal]=[/teal]URL[teal];[/teal]
[gray]//      ConfirmChange(Message,URL,ddlId)[/gray]
      [b]break[/b]
  [teal]}[/teal]
[teal]}[/teal]

Please invest time in indenting your code. That way such syntax errors are easier to observe.

Feherke.

http://free.rootshell.be/~feherke/

feherke · Jan 10, 2011

Hi

By the way, the [tt]getElementById()[/tt] is not necessary there. Just pass it as parameter :

JavaScript:

[b]function[/b] [COLOR=darkgoldenrod]ChangePage[/color][teal]([/teal][highlight]ControlName[/highlight][teal])[/teal]
[teal]{[/teal]
  [b]switch[/b][teal]([/teal]ControlName[teal].[/teal]value[teal])[/teal]
  [teal]{[/teal]
[gray]// ...[/gray]
  [teal]}[/teal]
[teal]}[/teal]

HTML:

[b]<select[/b] [maroon]onChange[/maroon][teal]=[/teal][green][i]"ChangePage([highlight]this[/highlight]);"[/i][/green][b]>[/b]
[gray]<!-- ... -->[/gray]
[b]</select>[/b]

Feherke.

http://free.rootshell.be/~feherke/

beaniebear · Jan 10, 2011

I have edited my code slightly to make is simpler. It's actually a button that calls the javascript function so I can't use 'this' and the extra '{' is in my code but I accidentally deleted it.

feherke · Jan 10, 2011

Hi

Well, we will help correcting your code when you will post it.

Feherke.

http://free.rootshell.be/~feherke/

jmeckley · Jan 10, 2011

beaniebear, this the javascript forum. javascript is a client side scripting language. it doesn't matter what server side language you are using (vb, c#, ruby, perl, php, java, etc.) concepts like masterpage, webform, viewstate (or any other webforms voodoo) doesn't apply on the client. accept that webforms makes client side development more difficult than it needs to be.

Your problem, besides syntax, is most likely the client ids produced by the webform view engine. the server may see the control as ddlName. but the client will have some horrid monstrosity like [tt]mymaster$content1$mygridview$_1ddlName[/tt]. webforms try to be smarter than the developer and ensure that all ids are unique on the client. it does this by generating the value for the id by appending the parent id onto the value.

the 3 ways to get around this are:
1. pass the object instead of the id.

Code:

onclick="MyFunction(this); return false;"

2. use unique class names and treat them as ids. then select the element(s) based on the class name.

Code:

<input type="button" class="mybutton"/>
<script>
$(function(){$('.mybutton').click(...);});
</script>

3. pass the client id from the server to the client during rendering.

Code:

onclick="MyFunction(document.getElementById('"<%=ddlName.ClientID%>"')); return false;"

I would avoid option 3 as much as possible.

if you are using asp.net 4.0 there is an option to take control of the client ids so you don't have to deal with the auto-generated ids.

Jason Meckley
Programmer

faq855-7190
faq732-7259

beaniebear · Jan 11, 2011

Thanks for your help. I did wonder if this was causing the issue. I still have a lot to learn.

I can't pass the object because the onclick is on a button and the object I need in the function is the dropdownlist.

I will have a look at using unique class names.

Thanks again.

beaniebear · Jan 11, 2011

jmeckley could you please expand on option 2. I'm struggling with this.

Thanks

beaniebear · Jan 11, 2011

I just thought I'd explain what it is I'm trying to do a little more clearly in case it helps with a solution.

I have a drop down on a form, when certain selections are made from the drop down it forces a layer to be displayed informing the user that they are going to be redirected away from the site and there are two buttons to confirm or decline. Where the user is re-directed to is dependent on what has been selected in the drop down. If the user confirms they are happy to be redirected the selected value of the drop down is required to know where to redirect the user to.

jmeckley · Jan 11, 2011

I can't pass the object because the onclick is on a button and the object I need in the function is the dropdownlist.

doesn't matter. you render what ever client markup you need. When you are working with client code (js, css, dom, html) it's doesn't really matter how the server produced the markup, only that it did. by the time webforms is rendering the html you have access to all the server objects.

the scenario you describe doesn't require any server side code. it's pure html/js. at most the list of addresses may come from server code, but that's about it.

try this. get a prototype working with pure html/js. notepad and a browser is all you need. then you can use this example and code up the webform. (which should just be added some html/js to the webform template)

Jason Meckley
Programmer

faq855-7190
faq732-7259

beaniebear · Jan 11, 2011

I can't pass the object because the onclick is on a button and the object I need in the function is the dropdownlist."

I am using purely js for this. The only issue I had with it being in a asp.net web form is that I am using a masterpage and it changes the names.

I was explaining why I couldnt use your first option. I can't use 'this' instead of the ID because the onclick is on the button and not the dropdown which is what I need. And I am struggling to reference by ID because the names have been changed.

I have sorted my initial problem by adding ctl00_ContentPlaceHolder1_ in front of the id. But now the page is submitting and not redirecting like it should.

jmeckley · Jan 11, 2011

I can't use 'this' instead of the ID because the onclick is on the button and not the dropdown which is what I need.

I'm sorry, that was my mistake.

But now the page is submitting and not redirecting like it should.

add [tt]return false;[/tt] to the onclick event. this will prevent submission.

review option 3. it will render the dynamically generated client id and calls return false to prevent continuation.

Jason Meckley
Programmer

faq855-7190
faq732-7259

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

getElementById problem

beaniebear

Programmer

feherke

Programmer

beaniebear

Programmer

feherke

Programmer

feherke

Programmer

beaniebear

Programmer

feherke

Programmer

jmeckley

Programmer

beaniebear

Programmer

beaniebear

Programmer

beaniebear

Programmer

jmeckley

Programmer

beaniebear

Programmer

jmeckley

Programmer

Similar threads

Part and Inventory Search

Sponsor