I am trying to do calculation using jQuery
While subtraction, its always subtracting from the last element
$(".add").click(function(){
$(".sub").val((parseFloat($("#a").val()) - parseFloat($("#paid").val())));
});
$(".add").click(function(){
$(".sub").val((parseFloat($("#b").val()) - parseFloat($("#paid").val())));
});
$(".add").click(function(){
$(".sub").val((parseFloat($("#c").val()) - parseFloat($("#paid").val())));
});
$(".add").click(function(){
$(".sub").val((parseFloat($("#d").val()) - parseFloat($("#paid").val())));
});
<form name="myform">
<input type="button" id="a" value="50">
<input type="button" id="b" value="100">
<input type="button" id="c" value="500">
<input type="button" id="d" value="2000">
</form>
<td><input type="text" name="paid" class="text" id="paid" value="10"/></td>
<td> <input type="button" value = "Calculate" class="add" id="add"></td>
<td><input type="text" class="sub"></td>
when i subtract 10 from 50, it should display 40. but its showing 1990
In your code all the 4 functions are defined inside the add function. When calculate is clicked all functions run one by one and always the value of the ending function is selected. Always subtraction from 2000 takes place due to that always 1990 was the output.
var a;
$('form input').click(function(){a=$(this).val()});
$(".add").click(function(){
$(".sub").val((parseFloat(a)) - parseFloat($("#paid").val()));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="myform">
<input type="button" id="a" value="50">
<input type="button" id="b" value="100">
<input type="button" id="c" value="500">
<input type="button" id="d" value="2000">
</form>
<td><input type="text" name="paid" class="text" id="paid" value="10"/></td>
<td> <input type="button" value = "Calculate" class="add" id="add"></td>
<td><input type="text" class="sub"/></td>
This will help :)
var setVal = 0;
$(".add").click(function() {
console.log("clicked", setVal);
$(".sub").val(setVal - parseFloat($("#paid").val()));
setVal = 0;
});
$("form input").click(function() {
setVal = 0;
setVal = this.value;
console.log("setVal--", setVal)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="myform">
<input type="button" id="a" value="50">
<input type="button" id="b" value="100">
<input type="button" id="c" value="500">
<input type="button" id="d" value="2000">
</form>
<td><input type="text" name="paid" class="text" id="paid" value="10" /></td>
<td> <input type="button" value="Calculate" class="add" id="add"></td>
<td><input type="text" class="sub"></td>
Related
I have a simple calculator with 2 inputs, and when I click on button I want to check if one of inputs is focused and if yes to enter that number.
But when I click on button I lose focus on inputs and get it on that button.
let activeElement = document.activeElement;
function numClick(number){
console.log("Num clicked=" + number);
let tempNumber="";
tempNumber = activeElement.value;
tempNumber = tempNumber + number;
activeElement.value=tempNumber;
}
<input id = "num1" type="text" name="num1" value="">
<span id="operacija"></span>
<input id = "num2" type="text" name="num2" value="">
<span>=</span>
<span id="rezultat">0</span>
<br><br>
<input type="button" onclick="clearIt() "value="C">
<input type="button" onclick="operationClick('/')"value="/">
<br>
<input type="button" onclick="numClick(7)" value="7">
<input type="button" onclick="numClick(8)" value="8">
<input type="button" onclick="numClick(9)" value="9">
<input type="button" onclick="operationClick('*')"value="*">
<br>
<input type="button" onclick="numClick(4)" value="4">
<input type="button" onclick="numClick(5)" value="5">
<input type="button" onclick="numClick(6)" value="6">
<input type="button" onclick="operationClick('-')"value="-">
<br>
<input type="button" onclick="numClick(1)" value="1">
<input type="button" onclick="numClick(2)" value="2">
<input type="button" onclick="numClick(3)" value="3">
<input type="button" onclick="operationClick('+')" value="+">
<br>
<input type="button" onclick="numClick(0)" value="0">
<input type="button" onclick="calculate()" value="=">
<br>
<script type="text/javascript" src="zadatak1.js"></script>
I am not using any framework, just JS...
This is just a working sample of the suggestion given by Teemu. So credit there.
We add a focus event to our input controls and record the last focused control.
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#num1').addEventListener('focus', setLastElement);
document.querySelector('#num2').addEventListener('focus', setLastElement);
});
var lastInputElement;
const setLastElement = (event) => {
lastInputElement = event.target;
console.log(event.target);
};
let activeElement = document.activeElement;
function numClick(number){
if (lastInputElement === undefined) return;
console.log("Num clicked=" + number);
let tempNumber="";
tempNumber = lastInputElement.value;
tempNumber = tempNumber + number;
activeElement.value=tempNumber;
}
<input id = "num1" type="text" name="num1" value="">
<span id="operacija"></span>
<input id = "num2" type="text" name="num2" value="">
<span>=</span>
<span id="rezultat">0</span>
<br><br>
<input type="button" onclick="clearIt() "value="C">
<input type="button" onclick="operationClick('/')"value="/">
<br>
<input type="button" onclick="numClick(7)" value="7">
<input type="button" onclick="numClick(8)" value="8">
<input type="button" onclick="numClick(9)" value="9">
<input type="button" onclick="operationClick('*')"value="*">
<br>
<input type="button" onclick="numClick(4)" value="4">
<input type="button" onclick="numClick(5)" value="5">
<input type="button" onclick="numClick(6)" value="6">
<input type="button" onclick="operationClick('-')"value="-">
<br>
<input type="button" onclick="numClick(1)" value="1">
<input type="button" onclick="numClick(2)" value="2">
<input type="button" onclick="numClick(3)" value="3">
<input type="button" onclick="operationClick('+')" value="+">
<br>
<input type="button" onclick="numClick(0)" value="0">
<input type="button" onclick="calculate()" value="=">
<br>
<script type="text/javascript" src="zadatak1.js"></script>
You can do something like this:
var activeInput = ""
function inputClick(input){
activeInput = input;
}
function numClick(number){
document.getElementById(activeInput).value += number;
}
<input id="num1" type="text" name="num1" value="" onclick=inputClick('num1')>
<span id="operacija"></span>
<input id="num2" type="text" name="num2" value="" onclick=inputClick('num2')>
<span>=</span>
<span id="rezultat">0</span>
<br><br>
<input type="button" onclick="clearIt() "value="C">
<input type="button" onclick="operationClick('/')"value="/">
<br>
<input type="button" onclick="numClick(7)" value="7">
<input type="button" onclick="numClick(8)" value="8">
<input type="button" onclick="numClick(9)" value="9">
<input type="button" onclick="operationClick('*')"value="*">
<br>
<input type="button" onclick="numClick(4)" value="4">
<input type="button" onclick="numClick(5)" value="5">
<input type="button" onclick="numClick(6)" value="6">
<input type="button" onclick="operationClick('-')"value="-">
<br>
<input type="button" onclick="numClick(1)" value="1">
<input type="button" onclick="numClick(2)" value="2">
<input type="button" onclick="numClick(3)" value="3">
<input type="button" onclick="operationClick('+')" value="+">
<br>
<input type="button" onclick="numClick(0)" value="0">
<input type="button" onclick="calculate()" value="=">
<br>
If you are ready to use Jquery, then you can try this code
let activeElement = document.activeElement;
var prevFocus;
$('input[type="text"]').focus(function() {
prevFocus = $(this);
});
function numClick(number){
console.log("Num clicked=" + number);
let tempNumber="";
tempNumber = activeElement.value;
tempNumber = tempNumber + number;
activeElement.value=tempNumber;
number= prevFocus.val() +''+ number
prevFocus.val(number)
prevFocus.focus()
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id = "num1" type="text" name="num1" value="">
<span id="operacija"></span>
<input id = "num2" type="text" name="num2" value="">
<span>=</span>
<span id="rezultat">0</span>
<br><br>
<input type="button" onclick="clearIt() "value="C">
<input type="button" onclick="operationClick('/')"value="/">
<br>
<input type="button" onclick="numClick(7)" value="7">
<input type="button" onclick="numClick(8)" value="8">
<input type="button" onclick="numClick(9)" value="9">
<input type="button" onclick="operationClick('*')"value="*">
<br>
<input type="button" onclick="numClick(4)" value="4">
<input type="button" onclick="numClick(5)" value="5">
<input type="button" onclick="numClick(6)" value="6">
<input type="button" onclick="operationClick('-')"value="-">
<br>
<input type="button" onclick="numClick(1)" value="1">
<input type="button" onclick="numClick(2)" value="2">
<input type="button" onclick="numClick(3)" value="3">
<input type="button" onclick="operationClick('+')" value="+">
<br>
<input type="button" onclick="numClick(0)" value="0">
<input type="button" onclick="calculate()" value="=">
<br>
This is sample code update. I have kept a track of the last focused on input and changed the text accordingly. I am guessing this is what you asked for. You can write the methods to control the value of the input fields accordingly.
<!-- Added an extra method to remember the last focus, we pass the element as the function param: -->
<input id="num1" type="text" name="num1" value="" onclick='updateFocus(num1)'>
<span id="operacija"></span>
<input id="num2" type="text" name="num2" value="" onclick='updateFocus(num2)'>
<span>=</span>
<span id="rezultat">0</span>
<br><br>
<input type="button" onclick="clearIt() " value="C">
<input type="button" onclick="operationClick('/')" value="/">
<br>
<input type="button" onclick="numClick(7)" value="7">
<input type="button" onclick="numClick(8)" value="8">
<input type="button" onclick="numClick(9)" value="9">
<input type="button" onclick="operationClick('*')" value="*">
<br>
<input type="button" onclick="numClick(4)" value="4">
<input type="button" onclick="numClick(5)" value="5">
<input type="button" onclick="numClick(6)" value="6">
<input type="button" onclick="operationClick('-')" value="-">
<br>
<input type="button" onclick="numClick(1)" value="1">
<input type="button" onclick="numClick(2)" value="2">
<input type="button" onclick="numClick(3)" value="3">
<input type="button" onclick="operationClick('+')" value="+">
<br>
<input type="button" onclick="numClick(0)" value="0">
<input type="button" onclick="calculate()" value="=">
<br>
<script>
var activeElement;
// Updating the current focused on input field:
function updateFocus(input) {
activeElement = input;
console.log("The active element is: +" + activeElement);
}
// Ensuring the number sent on click event is added to the current input box.
function numClick(number) {
// If a button pressed before focusing on any of the inputs:
if (activeElement == null) return;
console.log("Num clicked: " + number);
var tempText = activeElement.value;
tempText += number;
activeElement.value = tempText;
}
</script>
I have multiple product div with buttons having same onlick function.I want to get the values of the input fields on click of button.Both, input fields and button belong to same div.Currently i am getting values of very 1st product onclick of any button.Please help
<div class="buy" style="text-align:center;">
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$15.00</span>
<input type="hidden" maxlength="2" name="qty" class="quantity-wrp" id="itemqty" value="1">
<input type="hidden" name="prod_id" id="prod_id" value="150">
<input type="hidden" name="code" id="code" value="151PM">
<input type="button" value="" onclick="promoproduct(this.id)" id="promo_button_1">
<div class="buy" style="text-align:center;">
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$20.00</span>
<input type="hidden" maxlength="2" name="qty" class="quantity-wrp" id="itemqty" value="1">
<input type="hidden" name="prod_id" id="prod_id" value="151">
<input type="hidden" name="code" id="code" value="152PM">
<input type="button" value="" onclick="promoproduct(this.id)" id="promo_button_2">
function promoproduct(clicked_id){
var qty = $("#itemqty").val();
var prod_id = $("#prod_idprod_id").val();
var code = $("#code").val();
Identifiers must be unique.
You should pass the current element content this to inline click event handler. You can use common class and various traversal methods to target elements.
<input type="button" value="" onclick="promoproduct(this)" id="promo_button_2">
Then use relationship to target parent buy using .parent()/.closest() afterward using .find()
function promoproduct(clickedElem){
var parent = $(clickedElem).closest(".buy");
var qty = parent.find('.quantity-wrp').val();
var prod_id = parent.find('[name="prod_id"]').val();
var code = parent.find('name="code"').val();
}
As you have both buttons in different divs you can use the parent as reference to get the values from input.
Also when calling function you need to pass this not this.id
<div class="buy" style="text-align:center;">
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$15.00</span>
<input type="hidden" maxlength="2" name="qty" class="quantity-wrp" id="itemqty" value="1">
<input type="hidden" name="prod_id" id="prod_id" value="150">
<input type="hidden" name="code" id="code" value="151PM">
<input type="button" value="" onclick="promoproduct(this)" id="promo_button_1">
</div>
<div class="buy" style="text-align:center;">
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$20.00</span>
<input type="hidden" maxlength="2" name="qty" class="quantity-wrp" id="Hidden1" value="1">
<input type="hidden" name="prod_id" id="Hidden2" value="151">
<input type="hidden" name="code" id="Hidden3" value="152PM">
<input type="button" value="" onclick="promoproduct(this)" id="promo_button_2">
</div>
<script>
function promoproduct(clicked_id) {
var parent = $(clicked_id).closest("div.buy");
var qty = $(parent).find("input[name=qty]").val();
var prod_id = $(parent).find("input[name=prod_id]").val();
var code = $(parent).find("input[name=code]").val();
}
</script>
First, the id attribute should be unique in the same document, so you could use the general classes instead :
<div class="buy" style="text-align:center;">
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$20.00</span>
<input type="hidden" maxlength="2" name="qty" class="quantity-wrp itemqty" value="1">
<input type="hidden" name="prod_id" class="prod_id" value="151">
<input type="hidden" name="code" class="code" value="152PM">
<input type="button" value="" onclick="promoproduct()" id="promo_button_2">
</div>
NOTE : No need to pass a parameter to the click function promoproduct(this) just pass this so you could get the current clicked element using this object inside your function.
You could use the closest() method to go up to the parent div buy then get the values :
function promoproduct(clicked_id){
var parent_buy = $(this).closest(".buy");
var qty = parent_buy.find('.quantity-wrp').val();
var prod_id = parent_buy.find('.prod_id').val();
var code = parent_buy.find('.code').val();
}
Hope this helps.
Snippet avoiding the use of the inline-event onclick :
$('.buy input:button').on('click',function(){
var parent_buy = $(this).closest(".buy");
var qty = parent_buy.find('.quantity-wrp').val();
var prod_id = parent_buy.find('.prod_id').val();
var code = parent_buy.find('.code').val();
console.log(qty,prod_id,code);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buy" style="text-align:center;">
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$20.00</span>
<input type="hidden" maxlength="2" name="qty" class="quantity-wrp itemqty" value="1">
<input type="hidden" name="prod_id" class="prod_id" value="151">
<input type="hidden" name="code" class="code" value="152PM">
<input type="button" value="Promo product" id="promo_button_1">
</div>
<div class="buy" style="text-align:center;">
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$20.00</span>
<input type="hidden" maxlength="2" name="qty" class="quantity-wrp itemqty" value="2">
<input type="hidden" name="prod_id" class="prod_id" value="252">
<input type="hidden" name="code" class="code" value="255PM">
<input type="button" value="Promo product" id="promo_button_2">
</div>
i have a situation here , where i have a form in which i have some similar rows and when i submit the form , i want the quantity value to be displayed which was initial , it is returning the initial value of only first row , i know it will do so , but not sure of the solution
html code :
<form class="editcart" method="post" action="">
<input type="text" class="pid" name="pid" value="${product.pid}" hidden/>
<input type="text" class="spid" name="spid" value="${product.sub_pid}" hidden/>
<input type="text" class="cartid" name="cartid" value="${product.cart_id}" hidden/>
<input type="text" class="quantity" name="quantity" value="20" readonly="readOnly"/>
<input type="button" value="Edit" class="enable"/>
<input type="submit" value="Save" class="save" hidden/>
<input type="text" class="pid" name="pid" value="${product.pid}" hidden/>
<input type="text" class="spid" name="spid" value="${product.sub_pid}" hidden/>
<input type="text" class="cartid" name="cartid" value="${product.cart_id}" hidden/>
<input type="text" class="quantity" name="quantity" value="5" readonly="readOnly"/>
<input type="button" value="Edit" class="enable"/>
<input type="submit" value="Save" class="save" hidden/>
<input type="text" class="pid" name="pid" value="${product.pid}" hidden/>
<input type="text" class="spid" name="spid" value="${product.sub_pid}" hidden/>
<input type="text" class="cartid" name="cartid" value="${product.cart_id}" hidden/>
<input type="text" class="quantity" name="quantity" value="4" readonly="readOnly"/>
<input type="button" value="Edit" class="enable"/>
<input type="submit" value="Save" class="save" hidden/>
</form>
and jquery code is :
$(document).ready(function(){
var init = $('.quantity',this).val();
$('.enable').click(function(){
$(this).prev('.quantity').prop('readOnly',false);
$(this).hide();
$(this).next('.save').fadeIn();
});
$('.editcart').submit(function() {
var quant = $('.quantity',this).val();
var pid = $('.pid',this).val();
var spid = $('.spid',this).val();
var cartid = $('.cartid',this).val();
alert("the init value is : "+init);
return false;
});
});
fiddle
try this:-
var init =0;
$('.quantity',this).each(function(){
init+=parseInt($(this).val());
});
Since you want the value of clicked row use this code:-
$('.save').click(function(){
init=$(this).prev().prev('.quantity').val();
});
Demo
Demo 1
The form code:
<td>
<form action="cart.php" method="get">
<input type="button" onclick="buttonSubtract1()" name="subtract1"
value="-"/>
<input type="text" size="4" id="qty1" name="quantity1" value="0"/>
<input type="button" onclick="buttonAdd1()" name="add1" value="+"/>
<input type="submit" name="product1" value="Add"/>
</form>
</td>
The javascript:
var i = 0;
var qty1 = document.getElementById('qty1').value;
function buttonAdd1() {
document.getElementById('qty1').value = ++i;
}
function buttonSubtract1() {
if (qty1 > 0) {
document.getElementById('qty1').value = --i;}
}
I changed the code to increment and de-increment using javascript which worked fine so I tried to make it so that de-incrementation only works if the number is positive but now incrementing is working fine but it is not allowing de-incrementation of any number. Why is this?
<?php if (isset($_GET['subtract1'])) {
$quantity1 = $_GET['$quantity1'];
$quantity1--;
}
?>
<?php if (isset($_GET['add1'])) {
$quantity1 = $_GET['$quantity1'];
$quantity1++;
}
?>
<form action="cart.php" method="get">
<input type="submit" name="subtract1" value="-"/>
<input type="text" size="4" name="$quantity1" value="<?php echo $quantity1 ?>"/>
<input type="submit" name="add1" value="+"/>
Try the following.
Make sure the php code is above the html (so that the data gets processed before you output it) :
<?php
if(isset($_GET['quantity1'])) {
$quantity1 = intval($_GET['quantity1']);
if(isset($_GET['subtract1'])) {
$quantity1--;
} else if (isset($_GET['add1'])) {
$quantity1++;
}
}
?>
<td>
<form action="cart.php" method="get">
<input type="button" name="subtract1" value="-" />
<input type="text" size="4" name="quantity1" value="<?php echo $quantity1; ?>" />
<input type="button" name="add1" value="+" />
<input type="submit" name="product1" value="Add" />
</form>
</td>
My understanding is to get a reference to the object (qty1) then test or change the properties as required. This code seems to do what is required. It sends the appropriate values as the '$_GET' parameters as checked in PHP.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<script type = 'text/javascript'>
var rfvGlobal = {};
function buttonAdd1() {
rfvGlobal.qty1.value++;
}
function buttonSubtract1() {
if (rfvGlobal.qty1.value > 0) {
rfvGlobal.qty1.value--;
}
}
</script>
</head>
<body>
<table>
<td><form action="" method="get">
<input type="button" onclick="buttonSubtract1()" name="subtract1" value="-"/>
<input type="text" size="4" id="qty1" name="quantity1" value="0"/>
<input type="button" onclick="buttonAdd1()" name="add1" value="+"/>
<input type="submit" name="product1" value="Add"/>
</form></td>
</table>
<script>
rfvGlobal.qty1 = document.getElementById('qty1');
</script>
</body>
</html>
View this working demo
Your problem is that you aren't checking that the element's value, just qty1 which was set on page load but never updated.
function buttonSubtract1() {
var qtyElement = document.getElementById('qty1'); // the element
if (qtyElement.value > 0) qtyElement.value = --i; // if its value at this point in time >0 change it
}
The above fixes your current code, but...
Why don't you write less (this is the only function you need)
function buttonAlter(which, byWhat){
var qtyElement = document.getElementById('qty' + which);
if (byWhat > 0 || qtyElement.value > 0) qtyElement.value = parseInt(qtyElement.value) + byWhat;
}
for more buttons
<form action="cart.php" method="get">
<input type="button" onclick="buttonAlter(1, -1)" name="subtract1" value="-"/>
<input type="text" size="4" id="qty1" name="quantity1" value="0"/>
<input type="button" onclick="buttonAlter(1, 1)" name="add1" value="+"/>
<input type="submit" name="product1" value="Add"/>
<br />
<input type="button" onclick="buttonAlter(2, -1)" name="subtract1" value="-"/>
<input type="text" size="4" id="qty2" name="quantity1" value="0"/>
<input type="button" onclick="buttonAlter(2, 1)" name="add1" value="+"/>
<input type="submit" name="product1" value="Add"/>
<br />
<input type="button" onclick="buttonAlter(3, -1)" name="subtract1" value="-"/>
<input type="text" size="4" id="qty3" name="quantity1" value="0"/>
<input type="button" onclick="buttonAlter(3, 1)" name="add1" value="+"/>
<input type="submit" name="product1" value="Add"/>
</form>
This version's demo
I have dynamically showing product list with price and quantity in text box, i want to calculate product total price when enter the quantity.I have done this by onclick when increase or decrease button.but i also need to calculate the total price when key up quantity textbox
My code is like
<div id="gw_articles">
<div id="article_list">
<p>
<div id="article_1_element">
<input type="text" id="jform_article_1_name" name="jform[article_1][name] " value="Spark plug ARH-II AIW16 IRIDIUM+" disabled="disabled" size="35" /> <a id="jform_article_1_modal">Select an product</a>
<input type="hidden" id="jform_article_1_id" name="jform[article_1][id]" value="2" />
<input type="hidden" name="jform[article_1][price]" id="jform_article_1_price" value="30.00" class="inputbox" />
<input type="text" name="jform[article_1][price_total]" id="jform_article_1_price_total" value="90" class="inputbox" size="10" />
<input type="text" name="jform[article_1][quantity]" id="jform_article_1_quantity" value="3" class="inputbox" size="10" />
<input type="button" class="btn" value="+" onclick="document.id('jform_article_1_quantity').value++; calculateTotalPrice('jform_article_1')" />
<input type="button" class="btn" value="-" onclick="if(document.id('jform_article_1_quantity').value >1)document.id('jform_article_1_quantity').value--; calculateTotalPrice('jform_article_1')" />
<a title="test" class="btn btn-danger" onclick="removeElement('article_1_element')"> Delete </a>
</div>
</p>
<p>
<div id="article_2_element">
<input type="text" id="jform_article_2_name" name="jform[article_2][name] " value="Spark plug ARH-II AIW20 IRIDIUM+" disabled="disabled" size="35" /> <a id="jform_article_2_modal" class="btn modal" title="Select an product">Select an product</a>
<input type="hidden" id="jform_article_2_id" name="jform[article_2][id]" value="1" />
<input type="hidden" name="jform[article_2][price]" id="jform_article_2_price" value="40.00" class="inputbox" />
<input type="text" name="jform[article_2][price_total]" id="jform_article_2_price_total" value="40" class="inputbox" size="10" />
<input type="text" name="jform[article_2][quantity]" id="jform_article_2_quantity" value="1" class="inputbox" size="10" />
<input type="button" class="btn" value="+" onclick="document.id('jform_article_2_quantity').value++; calculateTotalPrice('jform_article_2')" />
<input type="button" class="btn" value="-" onclick="if(document.id('jform_article_2_quantity').value >1)document.id('jform_article_2_quantity').value--; calculateTotalPrice('jform_article_2')" />
<a title="test" class="btn btn-danger" onclick="removeElement('article_2_element')"> Delete </a>
</div>
</p>
</div>
<input type="hidden" id="articles_max" name="articles_max" value="2" />
</div>
So much going on in this code goodness. Try this:
function calculateTotalPrice(article) {
var price = and * multiplication - (some + addition);
$('#jform_article_2_total_price').val(price);
}
$('#jform_article_2_quantity').focusout(function(){
calculateTotalPrice('jform_article_2');
});
I sloved it by
`jQuery(document).ready(function($) {
jQuery("input[id*='quantity']" ).focusout(function(){
max_value = $("#articles_max").val();
var n =1;
jQuery("input[id*='quantity']" ).each(function(){
if (n <= max_value) {
id='jform_article_'+n;
calculateTotalPrice(id);
n++;
}
})
})
});
function calculateTotalPrice(field){
var price = document.id(field + "_price").value;
var quantity = document.id(field + "_quantity").value;
document.id(field + "_price_total").value = price * quantity;
}`