How to only add from one input field?

Question

I want to be able to add just the article that you click on and not each. What can I use instead of .each for this to work?

These are the functions:

calculating sum total price:

var quantity, price, sum = 0;
function calculatePrice() {
    //loop through product "blocks"
    $('.articel').each(function() {
        price = $(this).children('.price').val();
        quantity = $(this).children('.quantity').val();
        //Add price to sum if number
        if (!isNaN(price) && !isNaN(quantity)) {
            sum += price * quantity;                                
        }
    });
    //Update Price
    $('#totalprice').html('<h4>Total price: ' + sum + '$</h4>');
}

Add to shopping cart:

$(document).ready(function(){                                                                   
    $(".articel input[type='button']").click(function(){ //sätter klickfunktion på klassen artikels knapp
        var price = $(this).siblings('.price').attr("value");
        var quantity = $(this).siblings('.quantity').attr("value");
        if(quantity % 1 != 0)
        {
            alert("You must add a whole number");
        }
        else if(quantity <= 0)
        {
            alert("You must att a whole number");
        }
        else
        {
            var name = $(this).siblings("input[name='prodname']").attr("value");
            var ul = document.getElementById("buylist"); 
            var totalprice = quantity * price;
            var prod = name + " x " + quantity + "= " + totalprice + "$";


            var el = document.createElement("li"); //skapar ett nytt element
            el.innerHTML = prod; //variabeln prod läggs IN i nya elementet
            ul.appendChild(el); //sätt IN el i ul
            calculatePrice();
        }
    });
});

And this is my form:

<div id="moviescat_view" style="display:none">
    <h2>Movies</h2>
    <br><button onclick="backButton(moviescat_view);" class="btn">Go back</button><br>
    <img border="0" id="img/hoverover.jpg" src="img/1_1.jpg" alt="The walking dead" onmouseover="mouseOverImage(this)" onmouseout="mouseOutImage(this)" onClick="addtoCart()">
    </form>
    <br><button onclick="showInfo(set1);" class="btn">Show info</button><br>
    <h4>The walking dead</h4>
    <p>Price : 30$</p>
    <div id="set1" style="display:none">
        <p>A serie about zombies</p>
    </div>
    <form class="articel">
    Quantity: <input type="number" style="width:30px;" class="quantity"><br>
    Add to cart: <input type="button" class="btn">
    <input type="hidden" value="30" name="price" class="price">
    <input type="hidden" value="The walking dead" name="prodname">
    </form>
</div>

Dave Loepr · Accepted Answer · 2012-11-26 14:45:29Z

3

You should pass attributes to

calculatePrice();

Namely price and quantity, and then do the exact same within the function :

    function calculatePrice(price, quantity) {
         //Add price to sum if number
         if (!isNaN(price) && !isNaN(quantity)) {
             sum += price * quantity;
         }
         $('#totalprice').html('<h4>Total price: ' + sum + '$</h4>');
    }

answered Nov 26, 2012 at 14:45

Dave Loepr

9661 gold badge7 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

JJeff Over a year ago

Thanks, but where do you suggest the attributes get their values?

Tim Joyce Over a year ago

or you could pass the whole object through calculatePrice($(this)); function calculatePrice(element){...}

Dave Loepr Over a year ago

@JJeff : in your add to shopping cart function ! var price = $(this).siblings('.price').attr("value"); var quantity = $(this).siblings('.quantity').attr("value"); Since calculatePrice is called after these declarations, you don't need anything else

JJeff Over a year ago

Works like a charm, thanks jonBreizh. Just noticed that I had to define var sum = 0; over calculatePrice() and it worked.

Dave Loepr Over a year ago

Yes, this one was actually not declared ;)

Tim Joyce · Accepted Answer · 2012-11-26 14:57:08Z

1

Like Jon said... pass in the attributes or objects that you need.

$(document).ready(function(){                                                                   
    $(".articel input[type='button']").click(function(){ 
        //...
        calculatePrice($(this)); //$(this) would be the clicked DOM element
    });
});
function calculatePrice(element) {

        price = element.children('.price').val();
        quantity = element.children('.quantity').val();
        //Add price to sum if number
        if (!isNaN(price) && !isNaN(quantity)) {
            sum += price * quantity;                                
        }
    //Update Price
    $('#totalprice').html('<h4>Total price: ' + sum + '$</h4>');
}

answered Nov 26, 2012 at 14:57

Tim Joyce

4,5276 gold badges36 silver badges50 bronze badges

Collectives™ on Stack Overflow

How to only add from one input field?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related