Solved

Javascript DOM selectedIndex troubles...

Posted on 2007-12-03
7
1,510 Views
Last Modified: 2013-11-19
Hi all, I've recently updated the hosting account application form on a website I maintain, Bullseye Hosting.
The update was to add a little functionality - I wanted various bits of the form to appear and disappear dynamically when certain parts of the form were changed to certain values. You know, basic stuff for DHTML forms.
Sadly, I couldn't do the usual trick, hiding parts of the form with CSS and un-hiding them with Javascript, because even when they were hidden, the values were being added to the POST array, which was obviously sent to a PHP script, which requires the invisible form elements to actually not be there, if you know what I mean.
Anyway, background over. ;)

A dropdown box (select element) has four options.
I want to remove a certain element when option 1 is selected.
My current code is attached.
It is amongst a large clump of DOM scripting which creates/removes various elements when required.
Unfortunately, when option 1 is selected, nothing happens.
I am confused, because all tools I have to hand which usually aid me when I'm stuck with javascript confirm that document.getElementById('hits').selectedIndex should equal 0 when the top option is selected...
Somehow, when the top option is selected, selectedIndex doesn't exist - it is null.

Well, it has me stumped.
Here's the link: http://www.bullseyefreewebhosting.com/?page=apply
Log in on the right with the username/password combo "tester"/"abcde" to access the page.
Please, do not submit an application, there is no need :)

The dropdown box in question is the "How many visits does your site get per day?" box, which is dynamically created when you answer "Yes" to the "Do you already have a website created?" dropdown box.
The theory is, when you select an option in the "hits" box, a new table row and dropdown box "packageoptions" is created. ("packageoptions" = "Which Hosting Package do you think you need?")

I want it to work so that if "Less than 100" (option 1) is selected in the "hits" box, the "packageoptions" table row is removed.

Wow that was an awfully long explanation... I hope I haven't confused you lol
Thanks,
~Andrew
if (document.getElementById('hits').selectedIndex == 0) {

var element = document.getElementById('packageoptions');

element.parentNode.removeChild(element);

}

Open in new window

0
Comment
Question by:cheesygit182
  • 3
  • 3
7 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 125 total points
ID: 20401311
If you put an alert right before the "if" statement in question you will notice that the alert is never "triggered" when you select option 0, but it does for all other options:
alert("Hi");
if (document.getElementById('hits').selectedIndex == 0)

Hence, the bug is not that selectedIndex does not evaluate to zero, but that the function that is supposed to execute this code is never called. If you look at the section where you are creating the select list, you will notice that the first option is coded as:
option1.setAttribute('value','1');

Then, towards the end of your code you have:
if (section.id == "hits")
{
      var value = document.getElementById('hits').value;
      if (value > 1)
      {
            displaypackageoptions();
      }
      document.getElementById("mainspacer").style.height = "1000px";
      inc("free-web-hosting/layoutfix.js");
}

Particularly, that "if (value > 1) " is preventing "displaypackageoptions()" from executing because the value of the first option is 1. Hence, if(1>1) evaluates to false.
To fix your problem just change your code to:
if (section.id == "hits")
{
      var value = document.getElementById('hits').value;
      displaypackageoptions();

      document.getElementById("mainspacer").style.height = "1000px";
      inc("free-web-hosting/layoutfix.js");
}
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20401446
The comment above found the right place, however it forgot to tell you why you made the mistake

Less than 100 is option 0 (the first option) since arrays (and options is an array) in javascript are 0 based
0
 

Expert Comment

by:andrewthecoder
ID: 20401456
thanks hielo, what a simple mistake...
Oh well, you know what it's like sometimes when you've been staring at the same code for hours, your eyes just skim over things ;)

mplungjan, thanks, but I already knew that, having been coding in javascript for a few years now.
if you'd looked at my code snippet you have noticed that. :)

~Andrew
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20401972
I did:
   var value = document.getElementById('hits').value;
      if (value > 1) { // only test if second (or higher)  option is chosen
            displaypackageoptions();
      }
0
 

Expert Comment

by:andrewthecoder
ID: 20402779
take another look :)
Each <option> element created is given a value.
The values start from 1. That is the way I chose to code it.
Therefore, the first option in the dropdown box has a value of 1.
Obviously, when that is selected, the <select> element will have a .selectedIndex property equal to 0 - that is the javascript works, as you said.
While selectedIndex == 0, value == 1.

~Andrew

P.S - sorry for switching usernames ;)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20402907
Ah. Sorry...

Michel
PS: You may be in violation of the EE guidelines if you have more than one username
0
 

Expert Comment

by:andrewthecoder
ID: 20403411
:)

Yes, I know the rules here.
I do not have two accounts as such - I have one "work" account and one "personal" account.
The "work" account was not created by me, but it was created for me.
Anyway, I think it should be ok - I certainly aren't trying to deceive anybody :D
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now