Actually I want to add text fields by clicking on button. It is working but I am unable to remove the text fields by clicking on remove button. Please see the code below:
<script type="text/javascript">
var i = 1;
function more_fields() {
i++;
var objTo = document.getElementById('more_fields')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+i);
var rdiv = 'removeclass'+i;
divtest.innerHTML = '<div><input type="text" name="comp[]" id="component"
value="" placeholder="Product" /> <input type="number"
name="quantity[]" id="quantity" placeholder="Quantity" /> <input
type="number" name="rate[]" id="rate" placeholder="Rate" /> <input
type="number" name="amount[]" id="amount" placeholder="Amount" readonly />
<button class="btn btn-danger" type="button" onclick="remove_more_fields('+
i +');" style="height:2em; width:3%;">X</button></div>';
objTo.appendChild(divtest)
}
function remove_more_fields(rid) {
$('.removeclass'+rid).remove();
}
</script>
<div class="form-group fieldgroup" id="more_fields">
<div>
<input type="text" name="comp[]" id="component" value=""
placeholder="Product" />
<input type="number" name="quantity[]"
id="quantity" placeholder="Quantity"/>
<input type="number" name="rate[]"
id="rate" placeholder="Rate" />
<input type="number" name="amount[]"
id="amount" placeholder="Amount" readonly/>
<button class="add_field_button"
type="button" onclick="more_fields()"> Add</button>
</div>
<br/>
</div>
How can I get that result? And I want to calculate the quantity*rate and display the result automatically in Amount field. If I change either quantity or rate, automatically amount will change and display the result. Please suggest me...Thank you.
Try this to get amount:
<div class="form-group fieldgroup" id="more_fields">
<div>
<input type="text" name="comp[]" id="component" value="" placeholder="Product" />
<input type="number" name="quantity[]" id="quantity" placeholder="Quantity" onchange="getAmount(this)" />
<input type="number" name="rate[]" id="rate" placeholder="Rate" onchange="getAmount(this)" />
<input type="number" name="amount[]" id="amount" placeholder="Amount" readonly/>
<button class="add_field_button" type="button" onclick="more_fields()"> Add</button>
</div>
<br/>
</div>
<script>
var i = 1;
function more_fields() {
i++;
var objTo = document.getElementById('more_fields');
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass" + i);
var rdiv = 'removeclass' + i;
divtest.innerHTML = '<div><input type="text" name="comp[]" id="component" value="" placeholder="Product" /> <input type="number" name="quantity[]" id="quantity" placeholder="Quantity" onchange="getAmount(this)" /> <input type="number" name="rate[]" id="rate" placeholder="Rate" onchange="getAmount(this)" /> <input type="number" name="amount[]" id="amount" placeholder="Amount" readonly /> <button class="btn btn-danger" type="button" onclick="remove_more_fields(' + i + ');" style="height:2em; width:3%;">X</button></div>';
objTo.appendChild(divtest)
}
function remove_more_fields(rid) {
$('.removeclass' + rid).remove();
}
function getAmount(el)
{
console.log(el.parentElement);
var inputs = el.parentElement.getElementsByTagName('input');
inputs[3].value = (parseInt(inputs[1].value) * parseFloat(inputs[2].value));
}
</script>
Here is working JSFiddle
Give the onclick function fro remove button like this - onclick="remove_more_fields(i);" . This would make the function call with value of i being passed to remove_more_fields function.
What I missed telling here is you can include the entire divtest.innerHTML definition in - <div>...</div> (note the quote here) , since my editor was showing error for the string spanning multiple lines. This might have triggered the evaluation of i and it worked perfectly fine for me.
Related
I'm new in JavaScript and JQuery
I have some input group of Items with 3 parameters which are Price, Discount, and Quantity.
I'd like to sum it up first before submitting it to see how much the total is.
so far here's what I got:
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">
<button type="button" onClick="Total()"></button>
In my mind I could use a loop such as :
total = 0;
for(i = 0; i < count(price); i++){
total += price[i] * qty[i] * dsc[i] / 100;
}
also, what if I delete a group, will the array index changes?
Use jQuery.map to convert Objects to array of values
function Total() {
let total = 0;
//Convert to array of values
let price = $("input[name='price[]']").map((i, el) => $(el).val());
let qty = $("input[name='qty[]']").map((i, el) => $(el).val());
let dsc = $("input[name='dsc[]']").map((i, el) => $(el).val());
//I prefer each over for
$.each(price, (i, element) => {
total += price[i] * qty[i] * dsc[i] / 100;
//if 'dsc' is discount in % may be the formula is different:
//example : price = 100 quantity = 1;dsc = 20; => grossRowTotal = 100 * 1 = 100; total = 100 - (100*20/100) = 100 - 20 = 80;
//let grossRowTotal = price[i] * qty[i];
//total += grossRowTotal - (grossRowTotal * dsc[i]/ 100);
});
console.log(total);
$("#result").html(total);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">
<button type="button" onClick="Total()">Total</button>
<div id="result"></div>
I don't know what exactly result you want.
this code may help you . try it and edit as per your requirement.
function Total()
{
let total=0;
for(i=0;i<$("input[id=price]").length;i++)
{
let p=$("input[id=price]")[i].value;
let q=$("input[id=qty]")[i].value;
let d=$("input[id=dsc]")[i].value;
total+=(p*q)-d;
}
$("#total").val(total);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="price" placeholder="price">
<input type="number" id="qty" placeholder="quantity">
<input type="number" id="dsc" placeholder="discount">
<br/>
<input type="number" id="price" placeholder="price">
<input type="number" id="qty" placeholder="quantity">
<input type="number" id="dsc" placeholder="discount">
<br/>
<input type="number" id="price" placeholder="price">
<input type="number" id="qty" placeholder="quantity">
<input type="number" id="dsc" placeholder="discount">
<br/>
<button type="button" onClick="Total()">Total</button>
<input type="number" id="total" placeholder="total">
$("button").on("click",function(){
var $this=$(this);
var Per=$(".per").val();
$(".anuzau").each(function(){
var Val=$(this).val();
if($this.hasClass("zau"))
$(this).val((((Val/100)*Per)+parseInt(Val)).toFixed(2));
else if($this.hasClass("anu"))
$(this).val((parseInt(Val)-((Val/100)*Per)).toFixed(2));
});
});
.anuzau{width:200px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="anu">-</button> <input class="per" type="text" size="6" value="0">%
<button class="zau">+</button>
<br><br>
<input type="text" size="6" class="anuzau" name="name" value="38.5"><br>
<input type="text" size="6" class="anuzau" name="name" value="75"><br>
<input type="text" size="6" class="anuzau" name="name" value="100">
I wish to increments/decrements all values by classname (anu zau), can anyone share me the jquery method? I have tried many tutorials.
I am new here, if anything wrong, please correct me.
<button class="anu">-</button> <input type="text" size="6" value="">%
<button class="zau">+</button>
<br><br>
<td><input type="text" size="6" class="anu zau" name="name" id="id" value="50"></td><br>
<td><input type="text" size="6" class="anu zau" name="name" id="id" value="200"></td><br>
<td><input type="text" size="6" class="anu zau" name="name" id="id" value="530"></td>
$("button").on("click",function(){
var $this=$(this);
var Per=$(".per").val();
$(".anuzau").each(function(){
var Val=$(this).val();
if($this.hasClass("zau"))
$(this).val((((Val/100)*Per)+parseInt(Val)));
else if($this.hasClass("anu"))
$(this).val((parseInt(Val)-((Val/100)*Per)));
});
});
.anuzau{width:200px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="anu">-</button> <input class="per" type="text" size="6" value="0">%
<button class="zau">+</button>
<br><br>
<input type="text" size="6" class="anuzau" name="name" value="50"><br>
<input type="text" size="6" class="anuzau" name="name" value="200"><br>
<input type="text" size="6" class="anuzau" name="name" value="530">
This should get you started. Not clear what precision you are looking for (adjust decimal_points accordingly)
var decimal_points = 2
$('button').click(function(){
var pVal = $('#percent').val(),
percent = pVal && !isNaN(pVal) ? +pVal/100 : 0;
//make it negative if anu button clicked
if($(this).hasClass('anu')){
percent = 0-percent;
}
$('input.anu').val(function(_, val){
// make sure input has numeric value
if(!val || isNaN(val) ){
return val;
}else{
return (+val + (val * percent)).toFixed(decimal_points);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="anu">-</button> <input id="percent" type="number" size="6" value="">%
<button class="zau">+</button>
<br><br>
<td><input type="text" size="6" class="anu zau" name="name" id="id" value="50"></td><br>
<td><input type="text" size="6" class="anu zau" name="name" id="id" value="200"></td><br>
<td><input type="text" size="6" class="anu zau" name="name" id="id" value="530"></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
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