#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    2
    Rep Power
    0

    Retrieve data from dynamic drop down


    Hi I have a problem with retrieving first populated, than selected by user quantity from the select dropdown menu.
    I have several the same numeric type of menus. They contain values 0-20.*
    Event onchange causes the selected number to be displayed in an html div. However, if I try to get the number back from div for my calculations, it doesn't work.*
    I spent hours on it, any help greatly appreciated....

    function showNumber(selectId, divNumber) {

    * var select = document.getElementById(selectId);
    * var noItems = document.getElementById(divNumber);

    * for (var i = 0; i <= 20; i++) {

    * * var option = document.createElement('option');
    * * option.innerHTML = i;
    * * option.value = i;

    * * select.appendChild(option);
    * }

    * select.onchange = function () {
    * * var noZero = select.value;
    * * if (noZero > 0) {
    * * **noItems.innerHTML = noZero;
    * * } else*noItems.innerHTML = " ";
    * };
    }



    * function showDivs(){
    showNumber('item1', 'div1');
    showNumber('item2', 'div2');
    showNumber('item3', 'div3');
    showNumber('item4', 'div4');
    }

    etc.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    Looks like you had a few operator and string conversion errors, in your code; try this:

    Code:
    function showNumber(selectId, divNumber) {
    
    var select = document.getElementById(selectId);
    var noItems = document.getElementById(divNumber);
    var option = document.createElement('option');
    
    for (var i = 0; i <= 20; i++) {
    option.innerHTML += i;
    option.value += i;
    select.appendChild(option);
    }
    
    select.onchange = function () {
    var noZero = select.innerHTML;
    noZero = parseInt(noZero);
    if (noZero > 0) {
    noItems.innerHTML = noZero;
    }
    else {
    noItems.innerHTML="";
    }
    
    }
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Welcome to DevShed Forums, kattie.

    The code you posted looks fine. Perhaps the reason why your calculations (which you aren't showing us) don't work is that you need to convert the string to a number. One way to do that conversion is with parseInt(), as web_loone08 showed, however, it's best to specify a second argument of "10" to make sure that any numbers with leading zeros aren't converted to octal.

    Using asterisks to preserve indentation is unusual. In the future it would be helpful if you put your code between [code][/code] tags instead.

    Originally Posted by web_loone08
    Looks like you had a few operator and string conversion errors, in your code
    What operator errors? The attribute values aren't set to anything, so appending strings to them is unnecessary.

    If I remember correctly, creating the option element once outside the loop will only generate it once, it will just change the value and re-append it for each loop. You could, however, use the cloneNode() method to do something similar, which might result in a very small performance boost.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    Originally Posted by Kravvitz
    If I remember correctly, creating the option element once outside the loop will only generate it once, it will just change the value and re-append it for each loop.
    Uh... yeah, that's my fault; did not test like usual... I got lazy and glanced this one over. But in my defense; I totally am going to blame it on the benadryl; that I took a couple hours ago.

    Originally Posted by Kravvitz
    What operator errors? The attribute values aren't set to anything, so appending strings to them is unnecessary.
    I was thinking about the createElement being outside the loop and making sure the loop would not overwrite the option elements. So that's why I changed the operator from = to +=.
    Last edited by web_loone08; January 13th, 2013 at 12:00 AM.
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Originally Posted by web_loone08
    Uh... yeah, that's my fault; did not test like usual... I got lazy and glanced this one over. But in my defense; I totally am going to blame it on the benadryl; that I took a couple hours ago.
    Does that medication have any warnings about heavy machinery? If so, maybe they should add a warning about programming too.

    Comments on this post

    • web_loone08 agrees : Haha, yeah... probably so.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    2
    Rep Power
    0
    Hi
    Thank you for welcoming me. Good day to you!

    What I'm trying to do is to simply get (from the drop down) selected number of products, and then multiply it by the price (done in the same select loop. I only added more parameters to both functions).
    But, once I want to take all the results and add all the prices together, I can't.

    And yes, I do parsing. So now it looks like:

    Code:
    function showNumber(selectId, divNumber, prodName, calcPrice) {
    
      var select = document.getElementById(selectId);
      var noItems = document.getElementById(divNumber);
      var product = prodName.itemName;
      var getPrice = floatPrice(calcPrice);
      
      for (var i = 0; i <= 20; i++) {
    
        var option = document.createElement('option');
        option.innerHTML = i;
        option.value = i;
    
        select.appendChild(option);
      }
    
      select.onchange = function () {
        var noZero = select.value;
    /*parseValue takes the same select.value and parses it, as otherwise the variable is concatenated with the string in the answer and can't perform in calculations*/
        var parseValue = parseInt(select.value,10);
        if (noZero > 0) {
          var itemsPrice = parseFloat(parseValue * getPrice);
          divQuantity.innerHTML = noZero +" "+ product + " "+ ""+ itemsPrice;
          
          
        } else divQuantity.innerHTML = " ";
      };
    
    }
      function showDivs(){
    displayQuant('monkey', 'divQuant1', Monkey, Monkey);
    displayQuant('bear', 'divQuant2', Bear, Bear);
    Originally Posted by Kravvitz
    Welcome to DevShed Forums, kattie.

    The code you posted looks fine. Perhaps the reason why your calculations (which you aren't showing us) don't work is that you need to convert the string to a number. One way to do that conversion is with parseInt(), as web_loone08 showed, however, it's best to specify a second argument of "10" to make sure that any numbers with leading zeros aren't converted to octal.

    Using asterisks to preserve indentation is unusual. In the future it would be helpful if you put your code between [code][/code] tags instead.


    What operator errors? The attribute values aren't set to anything, so appending strings to them is unnecessary.

    If I remember correctly, creating the option element once outside the loop will only generate it once, it will just change the value and re-append it for each loop. You could, however, use the cloneNode() method to do something similar, which might result in a very small performance boost.
  12. #7
  13. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    Why don't you insert the prices into an array and then you can access them, at a later time, to do multiplication or addition or any other type of math; that you want to use on them?

IMN logo majestic logo threadwatch logo seochat tools logo