Javascript form just ain't playing ball

Question

I have a form which calculates a dynamic quote on the fly depending on options, and one of these options is two drop downs like this:

            <h2>Need a venue?</h2>
            <p>Avoid the red tape and book a marquee</p>
            <p>What package would you like to order?</p>
            <select id="marquee_package" name="marquee_package" onchange="calculateTotal()">
                <option value="Bronze">Bronze</option>
                <option value="Silver">Silver</option>
                <option value="Gold">Gold</option>
            </select>

            <p>How many people will be attending?</p>
            <select id="guests" name="guests" onchange="calculateTotal()">
                <option value="0">0</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="150">150</option>
                <option value="200">200</option>
                <option value="250">250</option>
            </select>

In the javascript I have a calculate total function which runs other functions and adds together a returned value from the function.

The function for the Marquee section is below

function calculateMarquee(){
var theForm = document.forms["cakeform"];

var guests = theForm.elements["guests"].value;
var marqueePackage = theForm.elements["marquee_package"].value;
var marqueePrice = 0;

if (marqueePackage = "Bronze"){
    if (guests = 0){
        marqueePrice = 0;
    }
    if (guests = 50){
        marqueePrice = 650;
    }
    if (guests = 100){
        marqueePrice = 950;
    }
    if (guests = 150){
        marqueePrice = 1400;
    }
    if (guests = 200){
        marqueePrice = 1850;
    }
    if (guests = 250){
        marqueePrice = 2400;
    }
} else if (marqueePackage = "Silver"){
    if (guests = 0){
        marqueePrice = 0;
    }
    if (guests = 50){
        marqueePrice = 1100;
    }
    if (guests = 100){
        marqueePrice = 2150;
    }
    if (guests = 150){
        marqueePrice = 2550;
    }
    if (guests = 200){
        marqueePrice = 4100;
    }
    if (guests = 250){
        marqueePrice = 5100;
    }
} else { //gold
    if (guests = 0){
        marqueePrice = 0;
    }
    if (guests = 50){
        marqueePrice = 1900;
    }
    if (guests = 100){
        marqueePrice = 2800;
    }
    if (guests = 150){
        marqueePrice = 3200;
    }
    if (guests = 200){
        marqueePrice = 4750;
    }
    if (guests = 250){
        marqueePrice = 5750;
    }
}
return marqueePrice;
}

The problem is.... right now this function just returns the price of 2400 and will not change at all and I don't know why?

@grimmeld Good point, the conditions are wrong but the whole approach is not the best one — Pablo Lozano, Jul 17 '14 at 08:37
Thank you for your reply but now I just get the returned value of 0 no matter what.... — Ste Hughes, Jul 17 '14 at 08:37
That's why I posted the possible duplicate comment, theForm.elements["marquee_package"].value; is not the way to get values from a select element. — dammkewl, Jul 17 '14 at 08:39
@kapa: disagree it's a duplicate. The question has *multiple* problems. The wrong method of retrieving the selected value is only **one** of them. — Matt, Jul 19 '14 at 12:47
@Matt You may be right. But the question is still not useful for SO, future visitors or anyone. OP should simply learn basic debugging, won't get far without that anyways. You can solve all his problems for him, but that does not really help him. — kapa, Jul 21 '14 at 13:18

score 1 · Answer 1 · edited May 23 '17 at 12:29

There are a number of problems here:

You're using = as a comparison operator. You need to use either == or ===. For more information on the differences, see this MDN article.

Change all your if (x = y) to if (x === y).
.value on a form element returns a string. You're comparing it against a number. Either change the number to a string (if (guests === '0') or convert the string to a number first:
```
var guests = parseInt(theForm.elements["guests"].value, 10);
```

You're using the wrong method of getting the selected value in a <select> box. For more info, see Get selected value in dropdown list using JavaScript?

var guests = theForm.elements["guests"].options[theForm.elements["guests"].selectedIndex].value;
var marqueePackage = theForm.elements["marquee_package"].options[theForm.elements["marquee_package"].selectedIndex].value;

Once you fix these, your new code will work.

I've also got a couple of suggestions:

Don't use document.forms to target forms. It was in fashion in the 1970's, not 2014. Instead, use document.getElementById("#the-id-of-the-form"). See this MDN article for more info.
Better yet, don't target the form at all; your <select> boxes have an id, and id's have to be unique across the page (your's are, right?). Target the select boxes directly using document.getElementById("#marquee_package") etc.

visibleman · Answer 2 · 2014-07-17T08:58:00.520

0

You cant access the value of the select element directly, you need to do (Off the top of my head without testing) something like:

var index  = theForm.elements["guests"].selectedIndex;
var guests = theForm.elements["guests"].options[index].value;

edited Jul 17 '14 at 08:58

answered Jul 17 '14 at 08:40

visibleman

3,175
1
14
27

Javascript form just ain't playing ball

2 Answers2