As shown in the image below, I have the Sell Price textbox and Use Sell Price Percentage textbox. My Use Sell Price Percentage have this code
<div class="checkbox">
<label>
<input type="checkbox" name="sellpCheck" id="scheck" onclick="document.getElementById('sell_price').disabled=this.checked;">
* Use Sell Price Percentage
</label>
and here's my Sell Price textbox
<input type="number" class="form-control" name="sell_price" id="sell_price" step='0.01' value='0.00' placeholder='0.00' required>
lastly, my Buy Price textbox
<input type="number" class="form-control" name="buy_price" placeholder="Buying Price Per Unit"
step='0.01' value='0.00' placeholder='0.00' min="0" max="9999" required id="buyp">
Here's my initial jQuery code:
var buyp = parseInt($('#buyp').val());
var sellp = parseFloat($('#sellp').val());
$('#sell_price').val((buyp * ((sellp/100)+1)).toFixed(2))
What I want to happen, is when I click the Use Sell Price Percentage the Sell Price textbox will automatically compute and can also recompute if I change the buyprice onkeyup.
You would have to do something like this then,
In HTML:
<input type="checkbox" name="sellpCheck" id="scheck" onclick="document.getElementById('sell_price').disabled=this.checked;checkThis();">
In JS:
function checkThis(){
var buyp = parseInt($('#buyp').val());
var sellp = parseFloat($('#sellp').val());
$('#sell_price').val((buyp * ((sellp/100)+1)).toFixed(2));
}
For the change in buyPrice you could use onblur:
In HTML:
<input type="number" class="form-control" name="buy_price" placeholder="Buying Price Per Unit"
step='0.01' value='0.00' placeholder='0.00' min="0" max="9999" required id="buyp" onblur="checkThis()">
Related
I am currently working on a WordPress website, with WooCommerce functionality. On the Product Page, I have created a Custom Field, which allows shoppers to enter a piece of text that they would like to appear on the associated product.
Each product has a starting price with my client wanting to then charge the shopper an additional fee of (for example) £1 per letter entered into the Custom Field.
My client would then like the Product Price, on the Product Page, to change in real time to reflect the amount of letters entered. For example:
Product A: £20
As shopper enters 5 letters, the Product Price changes to £25 in real
time.
So far, I have created the Character Counter on the Product Page, using the following code:
JavaScript/jQuery:
<script type="text/javascript">
jQuery(document).on('keyup', '.product-custom-text', updateCount);
jQuery(document).on('keydown', '.product-custom-text', updateCount);
function updateCount() {
var cs = jQuery(this).val().length;
jQuery('#character_count').text(cs);
}
</script>
At present, I am Outputting this Character Counter through the use of the below code in the functions.php file:
Code Entered into functions.php file:
function custom_character_counter(){
echo 'Letters Entered: <span id="character_count"></span>';
}
add_action('woocommerce_single_product_summary', 'custom_character_counter');
I could be wrong, but I assume I now need to manipulate the product price to reflect the following equation:
Original Product Price + (Characters Entered x £1)
Does anyone have any idea on how I can achieve this or indeed if there is a better approach?
Thanks in advance.
Add an input hidden for the product price / price per letter / and new price then do the computation with it .. the new price will be the one to be pass to the form for its total price.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-letters-container">
<h1>Product 1</h1>
<input type="hidden" name="price" class="product-price" value="20" />
<input type="hidden" name="price" class="letter-price" value="2" />
<input type="text" name="letters" class="product-custom-text" />
<input type="hidden" name="price" class="product-new-price-hidden" />
<div class="character_count"></div>
</div>
<div class="custom-letters-container">
<h1>Product 2</h1>
<input type="hidden" name="price" class="product-price" value="25" />
<input type="hidden" name="price" class="letter-price" value="5" />
<input type="text" name="letters" class="product-custom-text" />
<input type="hidden" name="price" class="product-new-price-hidden" />
<div class="character_count"></div>
</div>
<script type="text/javascript">
jQuery(document).on('keyup', '.product-custom-text', updateCount);
jQuery(document).on('keydown', '.product-custom-text', updateCount);
function updateCount() {
var strlen = jQuery(this).val().length;
var lettertotal = parseInt(jQuery(this).parent().children('.letter-price').val()) * strlen;
var totalprice = parseInt(jQuery(this).parent().children('.product-price').val()) + lettertotal;
jQuery(this).parent().children('.product-new-price-hidden').val(totalprice);
jQuery(this).parent().children('.character_count').text(totalprice);
}
</script>
Each time I check any checkbox, I want to multiply the data-price attribute with the value of the input field associated with the checkbox. I need to calculate the sum of all these multiplications.
HTML:
<input class="selectproduct" type="checkbox" name="item0" data-price="5"/>First
<input type="text" class="qty0" name="qty0"/>
<br/>
<input class="selectproduct" type="checkbox" name="item1" data-price="7"/>Second
<input type="text" class="qty1" name="qty1"/>
<br/>
Total Price: $<span class="price">0</span>
JS:
$('.selectproduct').on("change", function () {
var totalPrice = 0;
$('.selectproduct:checked').each(function () {
totalPrice += parseInt($(this).data('price'), 10);
});
$('.price').html(totalPrice);
});
I'm currently able to sum the price according to the checkbox but I can't figure out how to multiply it with the associated input field whenever there is a change. How do I constantly update the sum whenever the input field changes?
Here's the fiddle: https://jsfiddle.net/600rzptn/
You can do it like following.
$('.selectproduct').change(function() {
var totalPrice = 0;
$('.selectproduct:checked').each(function() {
totalPrice += $(this).data('price') * $(this).next('input').val();
});
$('.price').html(totalPrice);
});
//to change total price on changing textbox value
$('input[type="text"]').keyup(function() {
$('.selectproduct:first').change();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="selectproduct" type="checkbox" name="item0" data-price="5" />First
<input type="text" name="qty0" />
<br/>
<input class="selectproduct" type="checkbox" name="item1" data-price="7" />Second
<input type="text" name="qty1" />
<br/>
Total Price: $<span class="price">0</span>
Change your calculation line to:
totalPrice += parseInt($(this).data('price'), 10) * $(this).next().val();
jsFiddle example
I understand this may be a repeat question but I have been searching for ages and cant figure out why this isnt working.
I have 3 input fields, Subtotal, Vat and Total: I want to be able to populate the VAT and Total inpur fields with values when there is a value inputted in Subtotal and to show 2 decimal palces after. So:
4 would be 4.00
4.5 would be 4.50
HTML code for the input field:
<input name="subtotal" id="subtotal" type="number" maxlength="20" min="0" placeholder="00.00" onchange="vatCalculation();" />
<input name="vat" id="vat" type="number" maxlength="20" min="0" placeholder="00.00" readonly="true" />
<input name="total" id="total" type="number" maxlength="20" min="0" placeholder="00.00" readonly="true" />
And the javascript code I have at the moment is:
function vatCalculation() {
var subtotal = document.getElementById('subtotal').value;
var vat = parseFloat(parseFloat(subtotal) * parseFloat(0.2)).toFixed(2);
var total = parseFloat(parseFloat(subtotal) + parseFloat(vat)).toFixed(2);
document.getElementById('vat').value = vat;
document.getElementById('total').value = total;
}
I cant see where I am going wrong. When I enter 10 in the 'subtotal'input field the 'VAT' and 'Total' fields change to 2 and 12. But I want them to show 2.00 and 12.00. Screenshot below:
SOLUTION:
When using Firefox the input field of type="number" dont seem to work with javascript calculation. Workaround is to change it to a type="text" Like J Santosh as mentioned below and it works.
Found the issue . It is with <input type='number'> you change it to <input type='text'>
Working Fiddle
Input Type Number is not accepting decimals
Reference -1
Reference-2
Is this what you want? If so, you were pretty close. You just needed to add
document.getElementById('subtotal').value = parseFloat(subtotal).toFixed(2);
to your code as well.
function vatCalculation() {
var subtotal = document.getElementById('subtotal').value;
var vat = parseFloat(parseFloat(subtotal) * parseFloat(0.2)).toFixed(2);
var total = parseFloat(parseFloat(subtotal) + parseFloat(vat)).toFixed(2);
document.getElementById('subtotal').value = parseFloat(subtotal).toFixed(2);
document.getElementById('vat').value = vat;
document.getElementById('total').value = total;
}
<input name="subtotal" id="subtotal" type="text" maxlength="20" min="0" placeholder="00.00" onchange="vatCalculation();" />
<input name="vat" id="vat" type="text" maxlength="20" min="0" placeholder="00.00" readonly="true" />
<input name="total" id="total" type="text" maxlength="20" min="0" placeholder="00.00" readonly="true" />
(2.399).toFixed(2); will give you 2.40
But if you need 2.39 try
parseInt(2.399 * 100)/100
I'm trying to make the minimum allowed input amount to be 1.00 and not to allow 0.99 or anything less than 1.00
<input type="text" onkeyup="switchSlider(this.value, 1)" value="25.00" class="master-amount" name="master-amount" id="master-amount">
User HTML min Attribute
<input type="number" min="1.00" onkeyup="switchSlider(this.value, 1)" value="25.00" class="master-amount" name="master-amount" id="master-amount">
Here is an example for you
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_max_min
Update:
You can test the value on keyup as per code below and force 1 as the min value.
<input type="number" onkeyup="switchSlider(this)" value="25.00" class="master-amount" name="master-amount" id="master-amount">
switchSlider = function (e){
if (!e.value || e.value < 1) e.value=1;
}
http://jsfiddle.net/2dq06qpc/
You can do this right in your markup using the min max and step attributes, note you need to use type="number"
<input type="number" min="0" max="100" step="5">
In your code:
<input min="1" type="number" onkeyup="switchSlider(this.value, 1)" value="25.00" class="master-amount" name="master-amount" id="master-amount">
I have dynamic form like:
<form id="formaa">
<div class="row">
<input type="text" name="item" class="item"></input>
<input type="text" name="quant" class="quant"></input>
<input type="text" name="price" class="price" onkeyup="update();"></input>
<input type="text" name="sum" id="suma" size="10" disabled="disabled"/>
</div>
<div class="row">
<input type="text" name="item" class="item"></input>
<input type="text" name="quant" class="quant"></input>
<input type="text" name="price" class="price" onkeyup="update();"></input>
<input type="text" name="sum" id="suma" size="10" disabled="disabled"/>
</div>
<!-- ... many more rows -->
<input type="text" disabled id="total" name="tot"></input>
</form>
What I'm trying to do is multiply item quantity and price and get total sum in sum field for each item seperately (not all items total sum).
What I have achiecved is this function, but it seems counting total sum of all items together not seperately and this working with first default field row, when I add new set of fields and fill them with information both, fields (and other later added) sum values become NaN..If I remove all added field sets and leave the first form fows set, number is working again.. What is the problem here?
<script type="text/javascript">
function update() {
var total = 0;
$("#formaa div.row").each(function(i,o){
total += $(o).find(".quant").val() *
$(o).find(".price").val();
if(!isNaN(total) && total.length!=0) {
sum += parseFloat(total);
}
});
$("#formaa div.row #suma").val(total);
}
</script>
function update() {
$("#formaa div.row").each(function(i,o){
var total = $(o).find(".quant").val() * $(o).find(".price").val();
if(!isNaN(total) && total.length!=0) {
sum += parseFloat(total);
}
$(o).find('[name="sum"]').val(total);
});
}
A few problems in your code :
never give the same id to more than one element. That's the reason why I defined the selector on the name
you weren't resetting the total, so it was the sum of all
I didn't fix that, but your operation before the float parsing is strange (it may depend on the content that I can't see)