jQuery / JS表单问题

Question

I have a HTML form which I need help with adding and removing data using jQuery (or JavaScript).

 $('.purchase-car').on('click', 'button', function(event) { event.preventDefault(); /* Act on the event */ var carName = $('.purchase-car select').val(); var carPrice = $('.purchase-car select').find(':selected').data('price'); var carQuantity = $('.purchase-car input[name="quantity"]').val(); var totalPrice = carPrice * carQuantity; var orderToAdd = '<li>' + '<span>' + carName + ' (' + carQuantity + ')</span> <span>remove</span>' + '</li>'; $('ul').prepend(orderToAdd); $('#payment-amount').html(total); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li>volvo (1) <span>remove</span> </li> <li>mercedes (2) <span>remove</span> </li> </ul> <p>Total Price: <span id="payment-amount">30</span> </p> <div class="purchase-car"> <select> <option value="volvo" data-price="10">Volvo ( $10 )</option> <option value="saab" data-price="20">Saab ( $20 )</option> <option value="mercedes" data-price="10">Mercedes ( $10 )</option> <option value="audi" data-price="30">Audi ( $30 )</option> </select> <input type="number" name="quantity" value="1"> <button type="submit">Add</button> </div> 

There will be one select field and one input field, once I click add (on submit) both of the values should be added in a ul as list item. I have successfully done so. But I need a calculation here.

Like, what's the total price of selected objects. Also It should subtract from total price when I remove particular object.

http://jsfiddle.net/getanwar/s7ob01o1/

Update: I don't want to insert those data directly to the DOM. Because this is a part of another form and I don't want this data to be editable from console or via developer tools. So if I could store these data into an array or an object and calculate from there would be really helpful.

Answer 1

Taking your update into consideration, you should create a global variable.

var vehicles = new Array;

To increase the value, in the function where you insert the vehicle add the line:

var currentValue = parseInt($("#payment-amount").html());
$("#payment-amount").html(curentValue + (carPrice * carQuantity));
vehicles.push({price: carPrice, quantity: carQuantity});

Then to update the price when you remove one:

$("ul").on("click", "li span", function() {
    var index = $(this).parent().index();
    var currentValue = parseInt($("#payment-amount").html());
    var removeValue = vehicles[index]['price'] * vehicles[index]['quantity'];
    $("#payment-amount").html(currentValue - removeValue);
    vehicles.splice(index, 1);
    $(this).parent().remove();
});