increment or de-increment on button press - javascript

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

Related

how to fix 'subraction using jquery'

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>

jquery val() only taking the value of first row

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

Inserting the value of a button into a text field

I am a total beginner and attempting to make a calculator in Javascript.
When I click on a button I want the value of that button inserted in to a textfield?
Here what i tried and had zero result.
<!-- Html Coding --->
<form name="cal">
<input name="text1" type="text" placeholder="enter value here" /><br/>
<input name="num1" type="button" value="1" onClick="num1()"/>
</form>
<!-- JavaScript coding --->
<script>
function num1()
{
document.cal.text1.value = "1";
}
</script>
Please keep it as simple as possible because im not a native English
function numberClick(value) {
document.cal.text1.value = value;
}
<form name="cal">
<input name="text1" type="text" placeholder="enter value here" /><br/>
<input name="num1" type="button" value="1" onClick="numberClick(this.value)"/>
<input name="num2" type="button" value="2" onClick="numberClick(this.value)"/>
<input name="num3" type="button" value="3" onClick="numberClick(this.value)"/>
</form>
<!-- Html Coding --->
<input name="text1" type="text" placeholder="enter value here" /><br/>
<input name="num1" type="button" value="1" onClick ="num1(this)"/>
<input name="num2" type="button" value="2" />
<input name="num3" type="button" value="3" />
<!-- JavaScript coding --->
<script>
function num1(obj)
{
$('input[name=text1]').val($(obj).attr("value"));
}
</script>
demo
i got this code for calculator with html and javascript, this will help you, use only for reference
<html>
<head>
<script language="javascript">
var flag=0,a,b,c;
function perform(value)
{
if(flag==0)
{
b=parseInt(value);
a=f1.t1.value;
document.f1.t1.value='';
flag=1;
}
else
{
c=f1.t1.value;
document.f1.t1.value='';
if(b==1)
{
var d=parseFloat(a)+parseFloat(c);
document.f1.t1.value=d;
}
else if(b==2)
{
var d=parseFloat(a)-parseFloat(c);
document.f1.t1.value=d;
}
else if(b==3)
{
var d=parseFloat(a)*parseFloat(c);
document.f1.t1.value=d;
}
else
{
var d=parseFloat(a)/parseFloat(c);
document.f1.t1.value=d;
}
flag=0;
}
}
</script>
</head>
<body><center>
<font color="green" size="6" face="elephant"><b><u>CALCULATOR</u></b></font>
</br></br></br>
<table border="2" bordercolor="green" cellpadding="2" >
<tr>
<td><form name="f1">
<input type="text" name="t1" id="txt1">
</form></td></tr>
<tr>
<td><form name="f2">
<input type="button" value=" 1 " onclick="document.f1.t1.value+='1'" >
<input type="button" value=" 2 " onclick="document.f1.t1.value+='2'">
<input type="button" value=" 3 " onclick="document.f1.t1.value+='3'">
<input type="button" value=" + " onclick="perform(1)"></br>
<input type="button" value=" 4 " onclick="document.f1.t1.value+='4'">
<input type="button" value=" 5 " onclick="document.f1.t1.value+='5'">
<input type="button" value=" 6 " onclick="document.f1.t1.value+='6'">
<input type="button" value=" - " onclick="perform(2)"></br>
<input type="button" value=" 7 " onclick="document.f1.t1.value+='7'">
<input type="button" value=" 8 " onclick="document.f1.t1.value+='8'">
<input type="button" value=" 9 " onclick="document.f1.t1.value+='9'">
<input type="button" value=" * " onclick="perform(3)"></br>
<input type="button" value=" 0 " onclick="document.f1.t1.value+='0'">
<input type="button" value=" / " onclick="perform(4)">
<input type="button" value=" = " onclick="perform(value)">
<input type="reset" value= " clr " onclick="document.f1.t1.value='' ">
</form></td>
</tr>
</table>
</center>
</body>
</html>

Get dynamic id when keyup triggering using jquery/javascript

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;
}`

Form field quantity up/down buttons, don't allow negative numbers?

http://jsfiddle.net/KYDPd
Is there a way to make the minimum number be 0, and not allow the user to go below 0 when clicking down?
<form>
<input type="text" name="name" value="0" />
<input type="button" value="up" onclick="this.form.name.value++;" >
<input type="button" value="down" onclick="this.form.name.value--;">
</form>
If separate buttons are not necessary and HTML5 is an option you could just use this:
<form>
<input type="number" min="0" name="name" value="0" />
</form>
This should do the trick. Check what the value is before you allow each operation. Also added an onchange to the text input to inforce your minimum 0 requirement. Agree with other answer that this should be in a function though.
http://jsfiddle.net/xqV6V/1/
<form>
<input type="text" name="name" value="0" onchange="if(this.value<0){this.value=0;}" />
<input type="button" value="up" onclick="if(this.form.name.value>=0){this.form.name.value++;}" >
<input type="button" value="down" onclick="if(this.form.name.value>0){this.form.name.value--};">
</form>
You should probably put this JavaScript in a function.
<form>
<input type="text" name="name" value="0" />
<input type="button" value="up" onclick="this.form.name.value++;" >
<input type="button" value="down" onclick="if(this.form.name.value>0)this.form.name.value--;">
</form>
Additional Answer with functions.
<script>
function ud_find_text(self) {
var children = self.parentNode.getElementsByTagName('input');
for (var i = 0; i < children.length; i++) {
if (children[i].getAttribute('type') == 'text') {
return children[i];
}
}
}
function ud_inc(self) {
var text = ud_find_text(self);
text.value++;
}
function ud_dec(self) {
var text = ud_find_text(self);
if (text.value > 0) text.value--;
}
</script>
<form>
<input type="text" name="name" value="0" />
<input type="button" value="up" onclick="ud_inc(this)" >
<input type="button" value="down" onclick="ud_dec(this)">
</form>

Categories