Solved

Javascript DOM selectedIndex troubles...

Posted on 2007-12-03
7
1,517 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 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

631 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