jQuery / JS form issue

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.

André Silva · Accepted Answer · 2015-11-07 19:32:38Z

2

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();
});

edited Nov 7, 2015 at 19:32

answered Nov 7, 2015 at 18:56

André Silva

1,1088 silver badges26 bronze badges

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

2 Comments

Anwar Hussain Over a year ago

Thanks for replying.. I have updated the question a bit. Can you please read it back and give your opinion.

André Silva Over a year ago

Upadted again with minor fixes.

Collectives™ on Stack Overflow

jQuery / JS form issue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related