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
Related
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>
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'm having some trouble with my add/remove fields code.
If I run this code in phpfiddle and I make extra fields with the adding button.
<script>
var i = 1;
function addKid(){
if (i <= 4){
i++;
var div = document.createElement('div');
div.style.width = "44%";
div.style.height = "26px";
div.style.color = "white";
div.setAttribute('class', 'myclass');
div.innerHTML = 'Child : <input id="child_'+i+'" type="text" name="child_'+i+'" > Ages : <input id="ages_'+i+'" type="text" name="ages_'+i+'"><input type="button" id="add_kid()" onClick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this)">';
document.getElementById('kids').appendChild(div);
}
}
function removeKid(div) {
document.getElementById('kids').removeChild( div.parentNode );
i--; }
</script>
<div id="kids">
Child : <input id="child_1" type="text" name="child_1" onfocus="emptyElement('status')" onkeyup="restrict('child_1')" maxlength="50">
Ages : <input id="ages_1" type="text" name="ages_1" onfocus="emptyElement('status')" onkeyup="restrict('ages_1')" maxlength="10"><input type="button" id="add_kid()" onClick="addKid()" value="+" />
</div>
Then if I use firebug on the first fields I get this.
<input id="child_1" type="text" maxlength="50" onkeyup="restrict('child_1')" onfocus="emptyElement('status')" name="child_1">
<input id="ages_1" type="text" maxlength="10" onkeyup="restrict('ages_1')" onfocus="emptyElement('status')" name="ages_1">
On my extra added fields I get this with firebug.
<input id="child_2" type="text" name="child_2">
<input id="ages_2" type="text" name="ages_2">
How can I add a "restrict" and "maxlength" to the extra added fields like this.
<input id="child_2" type="text" name="child_2" onkeyup="restrict('child_1')" maxlength="50">
<input id="ages_2" type="text" name="ages_2" onkeyup="restrict('ages_1')" maxlength="10">
If I can make up 5 extra fields with the button, how can they each get a "restrict" and "maxlength" like this.
<input id="child_3" type="text" name="child_3" onkeyup="restrict('child_1')" maxlength="50">
<input id="ages_3" type="text" name="ages_3" onkeyup="restrict('ages_1')" maxlength="10">
<input id="child_4" type="text" name="child_4" onkeyup="restrict('child_1')" maxlength="50">
<input id="ages_4" type="text" name="ages_4" onkeyup="restrict('ages_1')" maxlength="10">
<input id="child_5" type="text" name="child_5" onkeyup="restrict('child_1')" maxlength="50">
<input id="ages_5" type="text" name="ages_5" onkeyup="restrict('ages_1')" maxlength="10">
Put these attributes inside input tags when you create them:
div.innerHTML = 'Child : <input id="child_'+i+'" type="text" name="child_'+i+'" maxlength="50" onkeyup="restrict(\'child_'+i+'\')"> Ages : <input id="ages_'+i+'" type="text" name="ages_'+i+'" maxlength="10" onkeyup="restrict(\'ages_'+i+'\')"><input type="button" onClick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this)">';
When you set HTML code with JavaScript you might need sometimes to escape quotes, like in this case:
onkeyup="restrict(\'child_'+i+'\')"
Also you should not:
Repeat an id attribute
Use () inside id attribute
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
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>