How to get a quantity box to update total price

How to get a quantity box to update total price - javascript

Hi guys I'm building a simple e-commerce site from scratch rather then using Shopify and I've made all the simple front end bits however i cant seem to get the total price to update based on the quantity of products the customers picks.
So far if the customer "adds to cart" then the price and total number in cart will update by 1, but if they want to choose 2 or more it doesn't work and i was wondering how i can get it to work
HTML:
<button class="addcart btn btn-danger add-to-cart" type="button">Add to cart</button> //Button to add to cart
<div class="input-group plus-minus-input"> //Quantity of product
<div class="input-group-button">
<button class="button hollow circle1 btn btn-primary"
data-field="quantity" data-quantity="minus" type="button">
<i aria-hidden="true" class="fa fa-minus"></i>
</button>
</div>
<input class="input-group-field" name="quantity" type="number" value="0">
<div class="input-group-button">
<button class="button hollow circle2 btn btn-primary"
data-field="quantity" data-quantity="plus" type="button">
<i aria-hidden="true" class="fa fa-plus"></i>
</button>
</div>
</div>
<p class="cartPrice">0.00 kr</p><input id="search-submit" type="submit"> //Quantity in cart
Javascript:
//Quanity animation when the user clicks + or -
jQuery(document).ready(function(){
$('[data-quantity="plus"]').click(function(e){
e.preventDefault();
fieldName = $(this).attr('data-field');
var currentVal = parseInt($('input[name='+fieldName+']').val());
if (!isNaN(currentVal)) {
$('input[name='+fieldName+']').val(currentVal + 1);
} else {
$('input[name='+fieldName+']').val(0);
}
});
$('[data-quantity="minus"]').click(function(e) {
e.preventDefault();
fieldName = $(this).attr('data-field');
var currentVal = parseInt($('input[name='+fieldName+']').val());
if (!isNaN(currentVal) && currentVal > 0) {
$('input[name='+fieldName+']').val(currentVal - 1);
} else {
$('input[name='+fieldName+']').val(0);
}
});
});
//When the user clicks add to cart this will update the total price and the quantity in the cart
var currentItems = 0;
var cartPrice = 565.00;
$(document).ready(function(){
$(".add-to-cart").click(function(){
currentItems++;
var totalPrice = currentItems * cartPrice;
$(".cart-badge").text(currentItems);
$(".cartPrice").text(totalPrice + " kr")
});
});
So again I'm just trying to figure out when the user clicks on + to add more prodcuts i want the price to update to that: So if the user wants 5 products it will do 5 * 565 etc.
Thanks

When you click "add to cart" nothing is retrieving the current quantity and so it is always static. By retrieving the value from the quantity input box your math will work correctly.
currentItems = $("input.input-group-field[name='quantity']").val();
//Quanity animation when the user clicks + or -
jQuery(document).ready(function(){
$('[data-quantity="plus"]').click(function(e){
e.preventDefault();
fieldName = $(this).attr('data-field');
var currentVal = parseInt($('input[name='+fieldName+']').val());
if (!isNaN(currentVal)) {
$('input[name='+fieldName+']').val(currentVal + 1);
} else {
$('input[name='+fieldName+']').val(0);
}
});
$('[data-quantity="minus"]').click(function(e) {
e.preventDefault();
fieldName = $(this).attr('data-field');
var currentVal = parseInt($('input[name='+fieldName+']').val());
if (!isNaN(currentVal) && currentVal > 0) {
$('input[name='+fieldName+']').val(currentVal - 1);
} else {
$('input[name='+fieldName+']').val(0);
}
});
});
//When the user clicks add to cart this will update the total price and the quantity in the cart
var currentItems = 0;
var cartPrice = 565.00;
$(document).ready(function(){
$(".add-to-cart").click(function(){
currentItems = $("input.input-group-field[name='quantity']").val();
var totalPrice = currentItems * cartPrice;
$(".cart-badge").text(currentItems);
$(".cartPrice").text(totalPrice + " kr")
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="addcart btn btn-danger add-to-cart" type="button">Add to cart</button> //Button to add to cart
<div class="input-group plus-minus-input"> //Quantity of product
<div class="input-group-button">
<button class="button hollow circle1 btn btn-primary" data-field="quantity" data-quantity="minus" type="button">-<i aria-hidden="true" class="fa fa-minus"></i></button>
</div>
<input class="input-group-field" name="quantity" type="number" value="0">
<div class="input-group-button">
<button class="button hollow circle2 btn btn-primary" data-field="quantity" data-quantity="plus" type="button">+<i aria-hidden="true" class="fa fa-plus"></i></button>
</div>
</div>
<p class="cartPrice">0.00 kr</p><input id="search-submit" type="submit"> //Quantity in cart

Related

How can we append and remove div based on number?

https://prnt.sc/mNw859XPGPPQ
Here I have got 3 products selected and its showing only 2 it is works for only one textbox could you please help me to show all 3 products
for example if i select quantity 2 for set1 and quantity 1 for set2 then it should show 2 set1 and 1 set2 total 3 images on top
I got what I want but I am stuck here to manipulate data based on different quantity selector could you please help me to get rid of this problem thank you
$(".quantity__input").change(function(){
var img_src =$(this).parents(".atc_coll").find("input[type='hidden']").attr("data-src");
var total = $(this).val();
var oldLength = $(".six_Products > .single_product").length;
var change = total - oldLength;
if (change > 0) {
for (i = 0; i < change; i++) { $(".six_Products").append(`<div class='single_product'><img src='${img_src}'
style='height:150px; width:150px;'></div>`);
}
}
else {
change = Math.abs(change)
$( ".six_Products > .single_product").each(function( index ) {
$(this).remove();
if (index == (change -1)) {
return false;
}
});
}
});
<div class="six_pack_conatiner ">
<div class="six_Products">
</div>
<div class="atc_price_wrap">
Add To Cart
</div>
</div>
<div class="atc_coll">
<a href="javascript:void(0)" class="atc_link" data-id="{{ card_product.selected_or_first_available_variant.id }}"
data->Add To Cart</a>
<quantity-input class="quantity" style="display:none;">
<button class="quantity__button no-js-hidden" name="minus" type="button">
-
</button>
<input class="quantity__input" type="number" name="quantity" min="0" value="0" readonly>
<button class="quantity__button no-js-hidden" name="plus" type="button">
+
</button>
</quantity-input>
<input type="hidden" data-src="{{ card_product.featured_media | img_url: 'master' }}"
data_price="{{card_product.price}}">
</div>

Issue with removing cloned element once created

I have code that clones/adds a div element and it's children when a button is clicked, however, when the remove button is clicked, it doesn't seem to be removing the closest div to the remove button. Can you help with this.
$(function() {
//on click
$(".btn-primary").on("click", function() {
//alert($(".input-group").length)
var
//get length of selections
length = $(".input-group").length,
//create new id
newId = "selection-" + length,
//clone first element with new id
clone = $("#selection").clone().attr("id", newId);
clone.children('.show-tick').attr('id', 'select-' + length++);
//append clone on the end
$("#selections").append(clone);
});
$(".btn-secondary").on("click", function() {
$(this).closest('.input-group').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selections">
<div class="input-group" id="selection">
<span class="input-group-addon">
<i class="icon wb-menu" aria-hidden="true"></i>
</span>
<select class="show-tick" data-plugin="select2" id="select">
<option>True</option>
<option>False</option>
</select>
</div>
</div>
<button class="btn btn-primary" type="button" style="margin-left:30px;">Add new selection</button>
<button class="btn btn-secondary" type="button" style="margin-left:30px;">Remove new selection</button>

To remove last select item you should use:
$("#selections").find('select').last().remove();
In your function:
$(".btn-secondary").on("click", function() {
$("#selections").find('select').last().remove();
});

or do just
$('#selections div:last').remove();

You can use :last-child selector:
$('.input-group:last-child').remove();

Use the last method $("#selections").children("div").last().remove();
$(function() {
//on click
$(".btn-primary").on("click", function() {
//alert($(".input-group").length)
var
//get length of selections
length = $(".input-group").length,
//create new id
newId = "selection-" + length,
//clone first element with new id
clone = $("#selection").clone().attr("id", newId);
clone.children('.show-tick').attr('id', 'select-' + length++);
//append clone on the end
$("#selections").append(clone);
});
$(".btn-secondary").on("click", function() {
$("#selections").children("div").last().remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selections">
<div class="input-group" id="selection">
<span class="input-group-addon">
<i class="icon wb-menu" aria-hidden="true"></i>
</span>
<select class="show-tick" data-plugin="select2" id="select">
<option>True</option>
<option>False</option>
</select>
</div>
</div>
<button class="btn btn-primary" type="button" style="margin-left:30px;">Add new selection</button>
<button class="btn btn-secondary" type="button" style="margin-left:30px;">Remove new selection</button>

There is various way you can do inside your click handler:
$("#selections .input-group:last-child").remove();
// Or
$(".input-group:last-child", "#selections").remove();
// Or
$(".input-group", "#selections").last().remove();
Using the first way:
$(function() {
//on click
$(".btn-primary").on("click", function() {
//alert($(".input-group").length)
var
//get length of selections
length = $(".input-group").length,
//create new id
newId = "selection-" + length,
//clone first element with new id
clone = $("#selection").clone().attr("id", newId);
clone.children('.show-tick').attr('id', 'select-' + length++);
//append clone on the end
$("#selections").append(clone);
});
$(".btn-secondary").on("click", function() {
$("#selections .input-group:last-child").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selections">
<div class="input-group" id="selection">
<span class="input-group-addon">
<i class="icon wb-menu" aria-hidden="true"></i>
</span>
<select class="show-tick" data-plugin="select2" id="select">
<option>True</option>
<option>False</option>
</select>
</div>
</div>
<button class="btn btn-primary" type="button" style="margin-left:30px;">Add new selection</button>
<button class="btn btn-secondary" type="button" style="margin-left:30px;">Remove new selection</button>
You should also add a check that, there is at least 1 .input-group element left for add button to work, because if there is no .input-group element, which element you'll clone? So, add a check like:
$(function() {
//on click
$(".btn-primary").on("click", function() {
//alert($(".input-group").length)
var
//get length of selections
length = $(".input-group").length,
//create new id
newId = "selection-" + length,
//clone first element with new id
clone = $("#selection").clone().attr("id", newId);
clone.children('.show-tick').attr('id', 'select-' + length++);
//append clone on the end
$("#selections").append(clone);
});
$(".btn-secondary").on("click", function() {
var length = $(".input-group").length;
if (length === 1) {
alert("Can not delete the last element");
return;
}
$("#selections .input-group:last-child").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selections">
<div class="input-group" id="selection">
<span class="input-group-addon">
<i class="icon wb-menu" aria-hidden="true"></i>
</span>
<select class="show-tick" data-plugin="select2" id="select">
<option>True</option>
<option>False</option>
</select>
</div>
</div>
<button class="btn btn-primary" type="button" style="margin-left:30px;">Add new selection</button>
<button class="btn btn-secondary" type="button" style="margin-left:30px;">Remove new selection</button>

You want the last .input-group so replace the last line with this:
$('.input-group').last().remove();
The buttons are actually siblings of #selections so the point of reference (this) doesn't need to be from the button itself. .closest() would target ancestor elements of the button and the .input-group is more like a "nephew/niece" relation to the buttons. Using the parent container #selections or the collection of .input-group is sufficient.
Edit
Added a condition that should the $('.input-group').length be 1, that it be spared from being deleted, otherwise, there'd be nothing to clone.
Demo
$(function() {
//on click
$(".btn-primary").on("click", function() {
//alert($(".input-group").length)
var
//get length of selections
length = $(".input-group").length,
//create new id
newId = "selection-" + length,
//clone first element with new id
clone = $("#selection").clone(true, true).attr("id", newId);
clone.find('.show-tick').attr('id', 'select-' + length++);
//append clone on the end
$("#selections").append(clone);
});
$(".btn-secondary").on("click", function() {
if ($(".input-group").length > 1) {
$('.input-group').last().remove();
} else {
return false;
}
});
});
<div id="selections">
<div class="input-group" id="selection">
<span class="input-group-addon">
<i class="icon wb-menu" aria-hidden="true"></i>
</span>
<select class="show-tick" data-plugin="select2" id="select">
<option>True</option>
<option>False</option>
</select>
</div>
</div>
<button class="btn btn-primary" type="button" style="margin-left:
30px;">
Add new selection
</button>
<button class="btn btn-secondary" type="button" style="margin-left:
30px;">
Remove new selection
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Get the value of incremented input

I have two buttons which either increment or decrement an input value. I don't know how to retrieve the value later on submit of the result. My current attempts have either resulted in 'undefined' or '0'.
Thanks in advance for any advice
$('.plus').click(function(e){
e.preventDefault();
fieldName = $(this).attr('field');
var currentVal = parseInt($('input[name='+fieldName+']').val());
if (!isNaN(currentVal)) {
$('input[name='+fieldName+']').val(currentVal + 1);
} else {
$('input[name='+fieldName+']').val(0);
}
});
$(".minus").click(function(e) {
e.preventDefault();
fieldName = $(this).attr('field');
var currentVal = parseInt($('input[name='+fieldName+']').val());
if (!isNaN(currentVal) && currentVal > 0) {
$('input[name='+fieldName+']').val(currentVal - 1);
} else {
$('input[name='+fieldName+']').val(0);
}
});
//attempting to get value
var value = document.getElementById( 'inputval' ).val();
$('#submitscore').click(function() {
alert(value);
});
My HTML
<span class="input-group-btn">
<button class="btn btn-secondary btn-success minus" field='minusfield' id ="minus" type="button">-</button>
</span>
<input type="text" name="inputval" id="inputval" value="0" class="gh form-control" />
<span class="input-group-btn">
<button class="btn btn-secondary btn-success plus" id="plus" field='plusfield' type="button">+</button>
</span>
<button type="button" id="submitscore" class="btn btn-md btn-orange">Submit</button>

You are attempting to get already assigned value.
Change your code to this
$('#submitscore').click(function() {
alert($('#inputval').val());
});
and it should work.

You're mixing standard Javascript usage with jQuery usage when you try to call it like this:
//attempting to get value
var value = document.getElementById( 'inputval' ).val();
Use one or the other:
Standard Javascript:
document.getElementById('inputval').value
jQuery:
$('#inputval').val()

JavaScript Show Hidden Button

In there I want to make my button is can show and hide when I click button
- Hidden : when I click button minus
- show : when I click button plus
$('.btn-plus').click(function() {
var qty = parseInt($(this).parents('.input-group').find('.input-number').val());
var price = parseInt($(this).parents('.input-group').find('.input-number').attr('data-price'));
var id = parseInt($(this).parents('.input-group').find('.input-number').attr('data-id'));
var new_qty = qty + 1;
var new_price = price * new_qty;
$(this).parents('.input-group').find('.input-number').val(new_qty);
$("#price" + id).text("Rp. " + new_price.number_format(0));
})
$('.btn-minus').click(function() {
var qty = parseInt($(this).parents('.input-group').find('.input-number').val());
var price = parseInt($(this).parents('.input-group').find('.input-number').attr('data-price'));
var id = parseInt($(this).parents('.input-group').find('.input-number').attr('data-id'));
var new_qty = qty - 1;
if (new_qty < 1) {
return
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group" style="width: 150px;">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-number btn-minus" data-type="minus">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quantity[]" class="form-control input-number" value="0" data-price="{{$row->price}}" data-id="{{$row->id}}" min="1" max="100" required>
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-number btn-plus" data-type="plus" >
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
and this what I want to make show hide
<input type='submit' class='btn btn-lg btn-success button-float' value="Book Now">

Add $(":submit").show(); to the function called by the plus button.
Add $(":submit").hide(); to the function called by the minus button.

$(element).hide() sets display to none
$(element).show() sets display to original value
Accordingly, change your code to the following:
var sumbit = $(":submit");
$('.btn-plus').click(function() {
$(submit).show(); //Or wherever else you want it.
var qty = parseInt($(this).parents('.input-group').find('.input-number').val());
var price = parseInt($(this).parents('.input-group').find('.input-number').attr('data-price'));
var id = parseInt($(this).parents('.input-group').find('.input-number').attr('data-id'));
var new_qty = qty + 1;
var new_price = price * new_qty;
$(this).parents('.input-group').find('.input-number').val(new_qty);
$("#price"+id).text("Rp. "+new_price.number_format(0);
});
$('.btn-minus').click(function() {
$(submit).hide(); //Or wherever else you want it.
var qty = parseInt($(this).parents('.input-group').find('.input-number').val());
var price = parseInt($(this).parents('.input-group').find('.input-number').attr('data-price'));
var id = parseInt($(this).parents('.input-group').find('.input-number').attr('data-id'));
var new_qty = qty - 1;
if(new_qty < 1){
return;
});

Here is your full solution:
$('.btn-plus').click(function() {
var qty = parseInt($(this).parents('.input-group').find('.input-number').val());
var price = parseInt($(this).parents('.input-group').find('.input-number').attr('data-price'));
var id = parseInt($(this).parents('.input-group').find('.input-number').attr('data-id'));
var new_qty = qty + 1;
var new_price = price * new_qty;
$(this).parents('.input-group').find('.input-number').val(new_qty);
$("#price" + id).text("Rp. " + new_price);
$(".btn-submit").show();
});
$('.btn-minus').click(function() {
var qty = parseInt($(this).parents('.input-group').find('.input-number').val());
var price = parseInt($(this).parents('.input-group').find('.input-number').attr('data-price'));
var id = parseInt($(this).parents('.input-group').find('.input-number').attr('data-id'));
var new_qty = qty - 1;
var new_price = price * new_qty;
if (new_qty < 1) {
new_qty = 0;
new_price = 0;
$(".btn-submit").hide(); //Or wherever else you want it.
}
$(this).parents('.input-group').find('.input-number').val(new_qty);
$("#price" + id).text("Rp. " + new_price);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<div class="input-group" style="width: 150px;">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-number btn-minus" data-type="minus">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quantity[]" class="form-control input-number" value="0" data-price="{{$row->price}}" data-id="{{$row->id}}" min="1" max="100" required>
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-number btn-plus" data-type="plus" >
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
<input type='submit' class='btn btn-lg btn-success button-float btn-submit' value="Book Now">

PHP/Bootstrap - Dynamically Add Fields & Submit Form

Im a bit lost and figured you guys might be able to help.
What I am trying to do:
I have a form where the user will dynamically add fields and then I would like the user to submit that form and display the values on the next page. But the user has to select a dropdown to show the type of data they are submitting inside the text box. For example
--------------------------
- Drop Down -Text Box -
--------------------------
--------------------------
- INT - 123 -
--------------------------
--------------------------
- TEXT - ABC - +
--------------------------
After Form Submit:
INT - 123
TEXT- ABC
Does anyone know how I could do this?
My Code:
<div class="col-md-4">
<div class="values">
<label>Type:</label>
<form method="post" action="values.php">
<div class="form-group multiple-form-group input-group">
<div class="input-group-btn input-group-select">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="concept">int</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>int</li>
<li>text</li>
</ul>
<input type="hidden" class="input-group-select-val" name="contacts['type'][]" value="int">
</div>
<input type="text" name="contacts['value'][]" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-add">+</button>
</span>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<script>
(function ($) {
$(function () {
var addFormGroup = function (event) {
event.preventDefault();
var $formGroup = $(this).closest('.form-group');
var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
var $formGroupClone = $formGroup.clone();
$(this)
.toggleClass('btn-success btn-add btn-danger btn-remove')
.html('–');
$formGroupClone.find('input').val('');
$formGroupClone.find('.concept').text('int');
$formGroupClone.find('.input-group-select-val').text('int');
$formGroupClone.insertAfter($formGroup);
var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
if ($multipleFormGroup.data('max') <= countFormGroup($multipleFormGroup)) {
$lastFormGroupLast.find('.btn-add').attr('disabled', true);
}
};
var removeFormGroup = function (event) {
event.preventDefault();
var $formGroup = $(this).closest('.form-group');
var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
if ($multipleFormGroup.data('max') >= countFormGroup($multipleFormGroup)) {
$lastFormGroupLast.find('.btn-add').attr('disabled', false);
}
$formGroup.remove();
};
var selectFormGroup = function (event) {
event.preventDefault();
var $selectGroup = $(this).closest('.input-group-select');
var param = $(this).attr("href").replace("#","");
var concept = $(this).text();
$selectGroup.find('.concept').text(concept);
$selectGroup.find('.input-group-select-val').val(param);
}
var countFormGroup = function ($form) {
return $form.find('.form-group').length;
};
$(document).on('click', '.btn-add', addFormGroup);
$(document).on('click', '.btn-remove', removeFormGroup);
$(document).on('click', '.dropdown-menu a', selectFormGroup);
});
})(jQuery);
</script>

Develop Reference

JavaScript is the programming language of the Web.

How to get a quantity box to update total price - javascript

Related

How can we append and remove div based on number?

Issue with removing cloned element once created

Get the value of incremented input

JavaScript Show Hidden Button

PHP/Bootstrap - Dynamically Add Fields & Submit Form

Categories

Resources