Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Javascript DOM selectedIndex troubles...

Posted on 2007-12-03
7
Medium Priority
?
1,521 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 500 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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

670 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