[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1526
  • Last Modified:

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

0
cheesygit182
Asked:
cheesygit182
  • 3
  • 3
1 Solution
 
hieloCommented:
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now