Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    I have a strange problem where my call to document.getElementById() does not work unless I put alter("whatever"); above the getElementById line.

    Description: This is on an ecommerce website which uses JavaScript to change the products listed/add to basket (it is pretty nasty but I must make do).

    So, when the user is selecting their shipping method via a <select></select> control I have a onchange handler which calls SetChosenCarriage.

    Here is the function:

    Code:
    function setChosenCarriage(elem)
    {
      var dhlPos = chosenCarriage.indexOf('DHL ');
      if(dhlPos >= 0)
      {
        alert(elem.id); // Need this line
        document.getElementById(elem.id).selectedIndex = document.getElementById(elem.id).selectedIndex + 1;
      }
    }
    In the above chosenCarriage is assigned to the chosen select value in a different function (there are 2 functions called onchange).

    If I remove the alert line my script crashes and burns but with it the selectedIndex jumps to the second (1) which is the DHL shipping method.

    For obvious reasons I do not want the alert to show.

    Any idea?

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Try this:
    Code:
    function setChosenCarriage(elem) {
      var dhlPos = chosenCarriage.indexOf('DHL ');
      if(dhlPos >= 0) {
        var elemId = elem.id;
        if (elemId) {
          var selectBox = document.getElementById(elem.id);
          if (selectBox) {
            selectBox.selectedIndex = selectBox.selectedIndex + 1;
          } else {
            window.alert('Invalid select box specified.');
          }
        } else {
          window.alert('Invalid element id specified.');
        }
      }
    }

  4. #3
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Thanks for the snippet smoseley, unfortunately when I invoke the onchange event I get the alert("Invalid select box specified");.

    However if I amend your code to

    Code:
    function setChosenCarriage(elem) {
      var dhlPos = chosenCarriage.indexOf('DHL ');
      if(dhlPos >= 0) {
        var elemId = elem.id;
        if (elemId) {
          alert(elem.id); // added this line
          var selectBox = document.getElementById(elem.id);
          if (selectBox) {
            selectBox.selectedIndex = selectBox.selectedIndex + 1;
          } else {
            window.alert('Invalid select box specified.');
          }
        } else {
          window.alert('Invalid element id specified.');
        }
      }
    }
    It works but obviously the alert is surplus to requirements.

    Join me in a harmonised saying of "Weird"

  5. #4
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    can you post the html?

  6. #5
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Oh wait, lol... I screwed up my code (used elem.id where I should have used elemId).

    Try this...
    Code:
    function setChosenCarriage(elem) {
      var dhlPos = chosenCarriage.indexOf('DHL ');
      if(dhlPos >= 0) {
        var elemId = elem.id;
        if (elemId) {
          var selectBox = document.getElementById(elemId);  // Changed this - important
          if (selectBox) {
            selectBox.selectedIndex = selectBox.selectedIndex + 1;
          } else {
            window.alert('Invalid select box specified.');
          }
        } else {
          window.alert('Invalid element id specified.');
        }
      }
    }

  7. #6
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    The important part of that change is that it uses the derived value rather than the object property as the getElementById param. I think getElementById may not work with an object propery reference.

  8. #7
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Thanks for your continued help.

    From your first and second snippet I have a question. What is the difference between:

    Code:
    var selectBox = document.getElementById(elem.id);
    and

    Code:
    var elemId = elem.id
    var selectBox = document.getElementById(elemId);
    Both point to the same control/element do they not?

    Either way I have tried your latest snippet and still no luck.

    The HTML is

    HTML Code:
    <select name="shippingOption" id="shippingOption" onchange="setChosenCarriage(this);">
      <option value="">Select your shipping method</option>
      <option value="dhl">DHL 6.69</option>
      <option value="royalmail">ROYAL MAIL 3.29</option>
    </select>
    I am totally baffled.

  9. #8
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Ok, heh... seeing the last bit, I see what your code is doing. Not sure why elem.id isn't working right, but since you're passing the element as an object, there's no need to use getElementById at all!!!

    Try this:
    Code:
    function setChosenCarriage(elem) {
      if(chosenCarriage.indexOf('DHL ') >= 0)  {
        elem.selectedIndex = elem.selectedIndex + 1;
      }
    }

  10. #9
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    I did some digging and think it is the other function that is messing it up. As I said in a previous post the onchange hook calls 2 functions, the first refreshes the view (it is messy) so I think the selectedIndex is not being set and maybe the element is not created/being recreated when the second function is called.

    To test this I removed the first function call (so there is no refresh and it just works like a normal <select> and voila.

    Unfortunately it means I will have to review how the pages work together to fix this, but thanks for your help.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

javascript not working unless alert

Click on a term to search for related topics.
All times are GMT -6. The time now is 09:52 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com