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

    Join Date
    Apr 2001
    Posts
    16
    Rep Power
    0

    Question javascript "object as associative array" - problem accessing dynamically


    Hi Folks,

    I'm having trouble accessing "array" properties of an object
    dynamically...

    Say I am selling paper & envelopes & I have three
    different "themes" ... Nature, Nautical, and Sports. For
    each theme, a customer can select a quantity of paper and
    a quantity of envelopes. And for each of those selections,
    a customer can select further options (paper weight & envelope type, for example).

    So, on a form, for each "theme", the user would enter the
    number of sheets of paper and envelopes, and then select the
    type of paper/envelope for each of those selections. Then, the
    javascript would calculate the total price using an onchange
    event of the selectboxes. Each Theme is priced differently, as
    is each paper & envelope option for each theme.

    Sorry, this is a little confusing... Here is example code:
    (also on the web here )

    Code:
    <html>
    <head>
    <title>Paper Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    
    <body bgcolor="#FFFFFF" text="#000000">
    <form name="myform" method="post" action="">
      <table width="100%" border="0" cellspacing="0" cellpadding="3">
        <tr>
          <td>&nbsp;</td>
          <td><b>Paper</b></td>
          <td><b>Envelopes</b></td>
        </tr>
        <tr>
          <td><b>Theme-Nature</b></td>
          <td>
            <input type="text" name="Paper1" size="5" maxlength="5">
            <select onChange="Calculate(this);" name="PprOpt1">
              <option value="Lightweight" selected>Lightweight</option>
              <option value="Mediumweight">Mediumweight</option>
              <option value="Heavyweight">Heavyweight</option>
              <option value="XHeavyweight">XHeavyweight</option>
              <option value="Cardstock">Cardstock</option>
            </select>
          </td>
          <td>
            <input type="text" name="Envelope1" size="5" maxlength="5">
            <select onChange="Calculate(this);" name="EnvOpt1">
              <option value="Standard" selected>Standard</option>
              <option value="Glossy">Glossy</option>
              <option value="Linen">Linen</option>
            </select>
          </td>
        </tr>
        <tr>
          <td><b>Theme-Nautical</b></td>
          <td>
            <input type="text" name="Paper2" size="5" maxlength="5">
            <select onChange="Calculate(this);" name="PprOpt2">
              <option value="Lightweight" selected>Lightweight</option>
              <option value="Mediumweight">Mediumweight</option>
              <option value="Heavyweight">Heavyweight</option>
              <option value="XHeavyweight">XHeavyweight</option>
              <option value="Cardstock">Cardstock</option>
            </select>
          </td>
          <td>
            <input type="text" name="Envelope2" size="5" maxlength="5">
            <select onChange="Calculate(this);" name="EnvOpt2">
              <option value="Standard" selected>Standard</option>
              <option value="Glossy">Glossy</option>
              <option value="Linen">Linen</option>
            </select>
          </td>
        </tr>
        <tr>
          <td><b>Theme-Sports</b></td>
          <td>
            <input type="text" name="Paper3" size="5" maxlength="5">
            <select onChange="Calculate(this);" name="PprOpt3">
              <option value="Lightweight" selected>Lightweight</option>
              <option value="Mediumweight">Mediumweight</option>
              <option value="Heavyweight">Heavyweight</option>
              <option value="XHeavyweight">XHeavyweight</option>
              <option value="Cardstock">Cardstock</option>
            </select>
          </td>
          <td>
            <input type="text" name="Envelope3" size="5" maxlength="5">
            <select onChange="Calculate(this);" name="EnvOpt3">
              <option value="Standard" selected>Standard</option>
              <option value="Glossy">Glossy</option>
              <option value="Linen">Linen</option>
            </select>
          </td>
        </tr>
      </table>
    
    <input type="text" name="TotalCost">TotalCost<br>
    </form>
    
    <script language=javascript>
    <!--
    function Calculate( obj )
    {
        var name = obj.name;
        var value = obj.value;
    
        var TotalCost = 0;
    
    	var PprOpt = new Object();
    
    	PprOpt.Lightweight = [0.01,0.015,0.02];
    	PprOpt.Mediumweight = [0.015,0.02,0.025];
    	PprOpt.Heavyweight = [0.02,0.025,0.03];
    	PprOpt.XHeavyweight = [0.04,0.05,0.06];
    	PprOpt.Cardstock = [0.06,0.08,0.09];
    
    	var EnvOpt = new Object();
    
    	EnvOpt.Standard = [0.025,0.035,0.045];
    	EnvOpt.Glossy = [0.06,0.07,0.08];
    	EnvOpt.Linen = [0.04,0.045,0.05];
    
    	var PprCostSubTotal = 0;
    	var EnvCostSubTotal = 0;
    
    	for(var i = 0; i < document.myform.length; i++) {		//loop through all form elements
    		var elmt = document.myform.elements[i];
    
    		//now we calculate costs
    		if(elmt.type == "select-one") {
    			var selnametxt = elmt.name.match(/\D+/);	//split name into text and number parts (so we can find correct array and array position)
        		var selnamenum = elmt.name.match(/\d+/);
        		var arraypos = selnamenum - 1;
        		var fieldtocalc = '';
    
    			if (selnametxt == "PprOpt") {
    				fieldtocalc = "Paper" + selnamenum;		//figure out fieldname for cost calculation (eg. PprOpt1 selection will use the quantity in textfield "Paper1" to calculate cost)
    				var costformula = PprOpt[elmt.value][arraypos];
    				PprCostSubTotal = PprCostSubTotal + (costformula*document.myform[fieldtocalc].value);
    			}
    			if (selnametxt == "EnvOpt") {
    				fieldtocalc = "Envelope" + selnamenum;		//figure out fieldname for cost calculation (eg. EnvOpt1 selection will use the quantity in textfield "Envelope1" to calculate cost)
    				var costformula = PprOpt[elmt.value][arraypos];
    				EnvCostSubTotal = EnvCostSubTotal + (costformula*document.myform[fieldtocalc].value);
    			}
       		}
    	}
    
    	TotalCost = PprCostSubTotal + EnvCostSubTotal;
    
        document.myform.TotalCost.value = TotalCost;
    
    	return true;
    
    }
    //-->
    </script>
    
    </body>
    </html>
    It seems to die on this line:
    var costformula = PprOpt[elmt.value][arraypos];

    ...which is where I am trying to access the array property of
    the object that matches the value of the select form element
    that is being looped through. When debugging, changing
    "PprOpt[elmt.value]" to "PprOpt["Lightweight"]" (for example)
    produces the desired results, except of course I need to
    access the correct array in the object, based on user input,
    rather than just the "Lightweight" array all the time.

    It *seems* like using "elmt.value" here *should* work... what
    am I doing wrong?

    Any input is *greatly* appreciated!
    Last edited by mglaspie; June 17th, 2003 at 06:06 PM.
  2. #2
  3. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    You're plugging the 'envelope option' parameters into the wrong object:

    if (selnametxt == "EnvOpt") {
    fieldtocalc = "Envelope" + selnamenum;
    var costformula = PprOpt[elmt.value][arraypos];
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2001
    Posts
    16
    Rep Power
    0
    Hmm.... yes, you're right. Thanks.

    Still, that isn't causing it to break... for some reason, the code doesn't like me using a variable to access the Object "array" properties. Gives an undefined error on this line:

    var costformula = PprOpt[elmt.value][arraypos];

    With "elmt.value" being the main culprit...

    ???
  6. #4
  7. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    for some reason, the code doesn't like me...
    No, it's pretty much doing (code does this) exactly what you told it to do: find properties named 'Standard', 'Glossy', 'Linen', belonging to an object named 'PprOpt'. I can't find them either...

    var costformula = EnvOpt[elmt.value][arraypos];

    btw: using objects doesn't make code object-oriented - whole other deal.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2001
    Posts
    16
    Rep Power
    0
    Ah.. errr... uhh... *ahem*

    Yeah, I guess it would be better if I actually thought before I typed, eh?

    Correcting the PprOpt/EnvOpt mistake let's the code loop through the select elements properly... One of those things you slap yourself in the forehead when you realize how silly of a mistake it was!

    Thanks, Adios.

    I appreciate the help!

IMN logo majestic logo threadwatch logo seochat tools logo