Javascript DOM selectedIndex troubles...

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

LVL 4
cheesygit182Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
hieloConnect With a Mentor Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
andrewthecoderCommented:
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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Michel PlungjanIT ExpertCommented:
I did:
   var value = document.getElementById('hits').value;
      if (value > 1) { // only test if second (or higher)  option is chosen
            displaypackageoptions();
      }
0
 
andrewthecoderCommented:
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
 
Michel PlungjanIT ExpertCommented:
Ah. Sorry...

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

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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.