Cannot 'while loop' with one row

Hi guys,

I created a product configurator for our company, which uses javascript to add, multiple etc prices in a form, depending on the amounts that are filled in. It is showcased at http://shop.cloud2.nl/configurator.

If you look at the Server Backup Lite/Basic tab, it works like a charm. But when you check the Server Backup Pro tab, if you fill in the amount under "Aantal", nothing happens. The price for one server is 0.00. However, when you add another item with "Server Toevoegen", the price is changed from 0.00 to whatever amount you filled in times the value of the field.

I managed to figure out it does not work with one row, seeing as the Server Backup Lite/Basic tab works fine. But for the life of me I can't seem to figure out how to solve it.

Does anyone have a solution to this? I have included the code in the .php, the css and js for the tabs come from tabber.js and example.css (See source code or attachments).

Thanks a lot!
configurator.php
example.css
tabber.js
LVL 1
xissAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Member_5340450Commented:
line 502 and 503 of configurator's html close the head and start the body, but that's already done at lines 75, 76.

calc totals refers to incorrect cart name cart_sbp should be cart_sbb
0
Slick812Commented:
greetings   xiss, , ,  Wow that was too much code to look through,  Your code in work in DHTML, , Javascript and PHP for this http://shop.cloud2.nl/configurator  REALLY NEEDS TO BE CLEANED UP! For instance you have this in your DHTML -

<script type="text/javascript" src="http://shop.cloud2.nl/js/prototype/prototype.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/js/lib/ccard.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/js/prototype/validation.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/js/varien/js.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/js/varien/form.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/js/varien/menu.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/js/mage/translate.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/js/mage/cookies.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/js/advancednewsletter/advancednewsletter.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/js/testimonial/curvycorners.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/js/testimonial/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/js/testimonial/featuredcontentglider.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/js/testimonial/reflex.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/js/tsdesigns/menubuilder.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/skin/frontend/base/default/js/jquery.latest.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/skin/frontend/base/default/js/imgpreview.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/skin/frontend/base/default/js/jquery.pop.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/skin/frontend/base/default/js/fancybox.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/skin/frontend/base/default/js/slider.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/skin/frontend/base/default/js/jcarousel.js"></script>
<script type="text/javascript" src="http://shop.cloud2.nl/skin/frontend/base/default/js/custom.js"></script>

<script type="text/javascript" src="http://staging.cloud2.nl/skin/frontend/default/default/css/tabs/tabber.js"></script>

27 loaded javascript add-ons and framworks! ! some of these I could NOT FIND that they were used on this page at all ! ! Although it is the trend these days to just add any and all javascript frameworks and wigets to a page, Make No Mistake these javascript add-ons can and do interfere with each other, and can make your browser javascript response to be inconsistent, slow or incorrect, as I believe something has done here, to make your Total calculation be incorrect.
First you should not load javascript that will NOT BE USED on that page. And you should try to use only ONE javascript framework, I see several loaded here, prototype, scriptaculous, , jquery, having more than one framework, means that you are loading several JS that all do many of the same exact things, it is bad coding to have the same thing done more than once.

The javascript on this page code be better, for instance you have -
if (lite !== 0) {
        document.getElementById('totaal_sbb_lite').innerHTML = lite + ' Server Backup Lite (&euro; 15.49 per server per maand)';
    }
    if (lite == 0) {
        document.getElementById('totaal_sbb_lite').innerHTML ='';

this is sloppy javascript! ! , , should be
 if (lite == 0) {
      document.getElementById('totaal_sbb_lite').innerHTML ='';
      } else {
     document.getElementById('totaal_sbb_lite').innerHTML = lite + ' Server Backup Lite (&euro; 15.49 per server per maand)';
     }

and could be made more better with a conditional
document.getElementById('totaal_sbb_lite').innerHTML =  (ite == 0) ? "" :lite + ' Server Backup Lite (&euro; 15.49 per server per maand)';

there are many more javascript DHTML and CSS that need to be removed , compacted or rewritten.

as too your problem - "Server Backup Pro tab" not working, I copy and pasted this code into a HTML page, with out changing anything -
<hr /><p>
<form name="cart_sbb">
<table><tbody id="dynamicInput">
<tr style=" height: 18px; ">
                <th>
                    &nbsp;
                </th>
                <th width="155">
                    <b>Aantal</b>
                </th>
                <th>
                    <b>Subtotaal</b>
                </th>
                <th rowspan="6" style="padding-left:30px;"><br/>Standaard bevat Server Backup Lite/Basic de volgende backup modules:<br/><br/>
                <ul style="list-style:disc;margin-left:30px;">
                <li>MySQL, MSSQL en Oracle Database backup;</li>
                <li>Microsoft Exchange Backup;</li>
                <li>Windows System Backup</li>
                <li>Lotus Notes Backup;</li>
                <li>Lotus Domino Backup.</li>
                </ul>
                </th>
            </tr>
            <tr>
                <!--<td width="120">
                    <input type="hidden" name="price_sbb[]" value="30.49" onchange="calcTotals_sbb">Aantal servers
                </td>
                <td>
                    <input name="quantity_sbb[]" id="servers" onchange="calcTotals_sbb()"/>
                </td>
                <td>
                    <input name="total_sbb[]"/>
                </td>-->
            </tr>
            <tr style=" height: 21px; ">
                <td width="200">
                    <input type="hidden" name="price_sbb[]" value="0.50" onchange="calcTotals_sbb">Aantal mailboxen voor server 1
                </td>
                <td>
                    <input name="quantity_sbb[]" onchange="calcTotals_sbb()"/>
                </td>
                <td>
                    <input name="total_sbb[]" type="text"/>
                </td>
            </tr>
            <tr style=" height: 21px; ">
                <td>
                    <input type="hidden" name="price_sbb[]" value="0.30" onchange="calcTotals_sbb">Benodigde storage voor server 1
                </td>
                <td>
                    <input name="quantity_sbb[]" onchange="calcTotals_sbb()"/>
                </td>
                <td>
                    <input name="total_sbb[]"/><br/><br/>
                </td>
            </tr>
            </tbody>
            </table>
            <table>
            <tr>
                <td width="355" style="text-align:left;">
                    <b id="totaal_sbb">Totaal per maand:</b>
                </td>
                <td>
                    <input name="gTotal" id="grand_total_sbb"/>
                </td>
            </tr>
            <tr><td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            </tr>
            <tr><td><b>U heeft nodig:<br/><br/></b></td><td></td>
                
            </tr>
            <tr><td id="totaal_sbb_lite"></td><td></td>
                
            </tr>
            </tr>
            <tr><td id="totaal_sbb_basic"></td><td></td>
                
            </tr>
                        <tr><td id="totaal_sbb_bricklevel"></td><td></td>
                
            </tr>
            <tr><td id="totaal_sbb_storage"></td><td></td>
                
            </tr>
            <tr><td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            </table>
            <table>
            <tr>
                <td colspan="2" style="padding-right:10px;">
                    <button type="button" title="Server toevoegen" class="button btn-continue" onClick="addInput('dynamicInput');"><span><span>Server toevoegen</span></span></button>
                </td>
                <td colspan="2" style="padding-right:10px;">
                    <button type="button" title="Server verwijderen" class="button btn-continue" onClick="function2();"><span><span>Server verwijderen</span></span></button>
                </td>
                <td colspan="2" style="padding-right:10px;">
                    <button type="button" title="Bereken totaal" class="button btn-continue" onclick="calcTotals_sbb()"><span><span>Bereken totaal</span></span></button>
                
            </tr>
            </table>
        </form>
</p>
<script>
function isNum(value)
{
    return 123;
}
function calcTotals_sbb() {
    var grandTotal_sbb = 0;
    var row = 0;
    var bricklevel = 0;
    var storage = 0;
    var rawstorage = 0;
    var lite = 0;
    var basic = 0;
    while (document.forms['cart_sbb'].elements['price_sbb[]'][row])
    {
        priceObj_sbb = document.forms['cart_sbb'].elements['price_sbb[]'][row];
        qtyObj_sbb   = document.forms['cart_sbb'].elements['quantity_sbb[]'][row];
        totalObj_sbb = document.forms['cart_sbb'].elements['total_sbb[]'][row];
        if (isNaN(priceObj_sbb.value))
        {
            priceObj_sbb = '';
        }
        if (isNaN(qtyObj_sbb.value))
        {
            qtyObj_sbb = '';
        }
        if (priceObj_sbb.value && qtyObj_sbb.value)
        {
            totalObj_sbb.value = parseFloat((parseFloat(priceObj_sbb.value) * parseFloat(qtyObj_sbb.value))).toFixed(2);

            
            if (row%2 == 0 || row == 0) {
                bricklevel = bricklevel + parseFloat(qtyObj_sbb.value);
            }
            else if (row%2 !== 0 || row == 1) {
                if (parseFloat(qtyObj_sbb.value) > 250) {
                storage = storage + (parseFloat(qtyObj_sbb.value) - 250);
                totalObj_sbb.value = parseFloat(totalObj_sbb.value - 75).toFixed(2);
                }
                else {
                    storage = storage;
                    totalObj_sbb.value = parseFloat(totalObj_sbb.value - totalObj_sbb.value).toFixed(2);
                }
                if (parseFloat(qtyObj_sbb.value) < 26) {
                    totalObj_sbb.value = (parseFloat(totalObj_sbb.value) + 15.49).toFixed(2);
                }
                else if (parseFloat(qtyObj_sbb.value) > 25) {
                    totalObj_sbb.value = (parseFloat(totalObj_sbb.value) + 30.49).toFixed(2);
                }
                rawstorage = parseFloat(qtyObj_sbb.value);
                if (rawstorage < 26) {
                lite++;
                }
                if (rawstorage > 25) {
                basic++;
                }
            }
            grandTotal_sbb = grandTotal_sbb + parseFloat(totalObj_sbb.value);
            
        }
        else
        {
            totalObj_sbb.value = '';
        }
        row++;
    }
    
    document.getElementById('grand_total_sbb').value = parseFloat(grandTotal_sbb).toFixed(2);
    document.getElementById('totaal_sbb').innerHTML = 'Totaal per maand (' + counter_sbb + ' servers)';
    
    if (lite !== 0) {
        document.getElementById('totaal_sbb_lite').innerHTML = lite + ' Server Backup Lite (&euro; 15.49 per server per maand)';
    }
    if (lite == 0) {
        document.getElementById('totaal_sbb_lite').innerHTML ='';
    }
    if (basic !== 0) {
        document.getElementById('totaal_sbb_basic').innerHTML = basic + ' Server Backup Basic (&euro; 30.49 per server per maand)';
    }
    if (basic == 0) {
        document.getElementById('totaal_sbb_basic').innerHTML = '';
    }
    if (bricklevel !== 0) {
        document.getElementById('totaal_sbb_bricklevel').innerHTML = bricklevel + ' Bricklevel licenties (&euro; 0.50 per mailbox per maand)';
    }
    if (bricklevel == 0) {
        document.getElementById('totaal_sbb_bricklevel').innerHTML = '';
    }
    if (storage !== 0) {
        document.getElementById('totaal_sbb_storage').innerHTML = storage + ' Gb Extra Storage (&euro; 0.30 per Gb per maand)';
    } 
    if (storage == 0) {
        document.getElementById('totaal_sbb_storage').innerHTML = '';
    } 
    return;
}

var counter_sbb = 1;
function addInput(divName){
     
          var newdiv = document.createElement('tr');
          newdiv.innerHTML = 
        "<td style='height: 21px;'><input type='hidden' name='price_sbb[]' value='0.50' onchange='calcTotals_sbb'>Aantal mailboxen voor server " + (counter_sbb + 1) + "</td><td><input name='quantity_sbb[]' onchange='calcTotals_sbb()'/></td><td><input name='total_sbb[]' type='text'/></td>";
        
          document.getElementById(divName).appendChild(newdiv);
          var newdiv2 = document.createElement('tr');
          newdiv2.innerHTML = 
        "<td style='height: 21px;'><input type='hidden' name='price_sbb[]' value='0.30' onchange='calcTotals_sbb'>Benodigde storage voor server " + (counter_sbb + 1) + "</td><td><input name='quantity_sbb[]' onchange='calcTotals_sbb()'/></td><td><input name='total_sbb[]' type='text'/><br/><br/></td>";
        
          document.getElementById(divName).appendChild(newdiv2);
          counter_sbb++;    
          calcTotals_sbb();    
        }
function function2() {
    if (counter_sbb > 1) {
    dynamicInput.removeChild(dynamicInput.lastChild);
    dynamicInput.removeChild(dynamicInput.lastChild);
    counter_sbb--; }
    else {
        alert("Je hebt geen extra servers toegevoegd");
    }
    calcTotals_sbb();
}
</script>

Open in new window


and IT WORKS! !, I could not find any mistakes, and when I put 3 in the Aantal mailboxen , , it places 1.50 in the subtotal AND the Total boxes.
So some javascript is going to this FORM and changing something, an input name or an input OnChange, But I have no Idea what might do this change? But I suspect that it has to do with the Tabber change, as if you add Server toevoegen button, then they work on your page, BUT if you change the tab and come back to "Server backup pro" then any added "Server toevoegen" are lost.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GaryCommented:
I've requested that this question be deleted for the following reason:

Not enough information to confirm an answer.
0
xissAuthor Commented:
Hi guys,

My apologies for the late reply, I was quite busy and totally forgot about this. @Slick812: You are definitely right about the large amount of Javscript. This is one of the major downsides of Magento, and I have been working on fixing this.

In the end there was as slight mistake in the code regarding variable/function naming which caused it to fail. Although it still needs some work, for now this issue is solved.

Thanks!
0
xissAuthor Commented:
Although it does not solve the actual problem, it did give me some ideas as to how to clean up the code.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.