Simple variable update and write to page

Question

This seems simple but its is buzzing me right now.

Here is everything explained, hope someone helps me Im gonna crazy for this simple thing.

<script>var pricetotal=60;</script>
<select id="product-select">
    <option>Black</option>
    <option>Lime</option>
    <option>Navy</option>
    <option>Blue</option>
</select>
    <select id="product-select2">
    <option>Black</option>
    <option>Lime</option>
    <option>Navy</option>
    <option>Blue</option>
</select>
    <!--I have multiple section forms each with different ID..
    // I want to print on page 60$, but when user selects any of the 2 option forms the price will get +5$ for each.
-->

    Total price <script>document.write(pricetotal)</script>

http://jsfiddle.net/coderised/t9AfR/1/

So you just give us markup and an empty jsfiddle? We need to see some effort here, where's the JavaScript code? — elclanrs, Jun 10 '13 at 19:00
There isnt any JS mandatory for this, except I have some jquery which changes some image on select change.. like this $(document).ready(function () { $('#product-select').change(function () { var newimg = "imgs/" + ($('#product-select').find(":selected").text()) + ".png"; $("#myimg").attr("src", newimg); — sapphire, Jun 10 '13 at 19:02
seems to work for me, if it's supposed to write 60 at the end there ? — adeneo, Jun 10 '13 at 19:02
I think you'll run into a problem though when craft your own solution due to `document.write`. Check [here](http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice) for more info. It would be better to use the DOM. — elclanrs, Jun 10 '13 at 19:04
yeah 60 at the beginning, but when user select for example Black from first form the page should automatically update to 65, same for other form (70). — sapphire, Jun 10 '13 at 19:05
there is always an option selected unless you add a blank one. — Spokey, Jun 10 '13 at 19:06
I can add blank option if that would help to get near solution.. — sapphire, Jun 10 '13 at 19:09

score 0 · Answer 1 · answered Jun 10 '13 at 19:10

It is very unclear what it is you are trying to do/want, but I hope that this will help you.

<select id="product-select">
    <option value="Black">Black</option>
    <option value="Lime">Lime</option>
</select>
<select id="product-select2">
    <option value="Navy">Navy</option>
    <option value="Blue">Blue</option>
</select>

Total price <span id="price">60</span>

You said you are using jQuery. With it, you can add:

$(document).ready(function() {
    var basePrice = 60, 
    $product_select = $('#product-select'), 
    $product_select2 = $('#product-select2'), 
    calcPrice = function() {
        var price = basePrice;
        switch($product_select.val()) { //Change price based on prod_select1
            case 'Black':
                price += 5;
                break;
            case 'Lime':
                price += 10;
                break;
        }
        switch($product_select2.val()) { //Change price based on prod_select2
            case 'Navy':
                price += 5;
                break;
            case 'Blue':
                price += 10;
                break;
        }
        $('#price').text(price); //Update displayed price
    };
    $product_select.on('change' calcPrice); //When changed, update price
    $product_select2.on('change', calcPrice); //When changed, update price
});

score 0 · Answer 2 · answered Jun 10 '13 at 19:15

0

Using JQuery you can use .val() to get the selected value and do things based on that.

http://jsfiddle.net/coderised/t9AfR/1/

answered Jun 10 '13 at 19:15

pandavenger

961
5
20

score 0 · Accepted Answer · answered Jun 10 '13 at 19:16

0

$('select').change(function () {
    var s = 60;
    $('select').each(function () {
        if ($(this).val().length) {
            s = s + 5
        }
    });
    alert(s);
});

FIDDLE

answered Jun 10 '13 at 19:16

Spokey

10,741
2
23
40

score 0 · Answer 4 · answered Jun 10 '13 at 19:36

I am not sure if I actually answered your question but I enjoyed the excercise none the less. I set it up to dynamically populate the actual $$$ amount. I assumed you wanted to update the price based on the product combination selection. I kept it simple since I don't know your pricing rules, etc. But think this can get you going and it is a library agnostic approach.

http://jsfiddle.net/docluv/WVaRr/6/

var totalprice = document.querySelector(".total-price"),
pricetotal = 60,
prod1 = document.getElementById("product-select"),
prod2 = document.getElementById("product-select2");

function calcPrice() {

setText(totalprice, ++pricetotal);

}

function setText(e, s) {

if (e.innerText) {
    e.innerText = s;
} else if (e.textContent) {
    e.textContent = s;
}

}

setText(totalprice, pricetotal);

prod1.addEventListener("change", calcPrice, false); prod2.addEventListener("change", calcPrice, false);

Simple variable update and write to page

4 Answers4