I want to pass the entered value to table two when user I click add, the quantity will be added to the second table. When I click Add button quantity is displayed as an empty value. But not console this shows the entered quantity
The quantity is of the same name and the quantityEntered is of the same name. When I inspect element I get the value entered on the...
"quantityEntered": <input type="text" id="CLT-K809S/SEE_quantity" name="quantityEntered" class="form-control" onkeypress="return isNumber(event)" readonly=readonly value="1" />
...on every row of my new table.
Here is my code:
function saveEneteredQuantity() {
var quantity;
var quantityName;
var getEnteredQuantity;
var enteredQuatity;
var getIndex;
var textvalue = "";
quantity = document.getElementsByName("quantity").length;
quantityName = document.getElementsByName('quantity').value;
console.log("Count the lenght of the input textbox on the HO Stock : ", quantity);
document.getElementsByName("quantityEntered").value = quantityName;
getEnteredQuantity = quantity;
for (var i = 0; i < quantity; i++) {
textvalue = textvalue + document.getElementsByName("quantity").item(i).value;
}
$('[name="quantity"]').each(function(index) {
getIndex = $(this).val();
enteredQuatity = $('[name="quantity"]').eq(index).val();
});
quantity = textvalue;
alert("This was provided: ", quantity);
debugger;
console.log("Check the grapped quantity on table of Selected Line Items to Order : ", quantity);
if (quantity == '' || quantity == 0) {
alert("Quantity can not 0.\n Please enter quantity which is less than available quantity");
}
console.log("Entered Quantity: ", quantity);
}
var items = [{
"avalaibleQty": '<input type="text" id="CLT-C659S/SEE_avaliableQuantity" name="avaliableQuantity" class="form-control" readonly="readonly" value="1">',
"quantityEntered": '<input type="text" id="quantityEntered" name="quantityEntered" readonly="readonly" class="form-control" />',
"quantity": '<input type="text" id="quantity" name="quantity" class="form-control" onkeypress="return isNumber(event)" onblur="compareQuantity(this, 1)" required="required" value="" />',
}]
I managed to fix the problem I had by creating hidden input which I use to store my entered quantity and when user clicks add button,which is on the first and create my second table. I than get crap the entered value assign it to my hidden input.
<!-- part Number and Quantity Entered -->
<input type="hidden"id="quantityList" name="quantityList" class="form-control" value="" />
var quantityList = [];
$(".addLineItem").on("click", function() {
debugger;
var items = [];
var row = $(this).closest("tr").clone();
var partNumber = $(this).closest('tr').find('td:eq(0)').find('input').val();
var quantity = $(this).closest('tr').find('td:eq(4)').find('input').val();
quantityList [quantityList.length]= [quantity];
document.getElementById("quantityList").value = quantityList;
debugger;
items.push(row);
row.appendTo($("#mySecondTable"));
});
Related
I have a purshase form with two items.
the first item which is a number box who identify how many adults in the trip.
the second item which is a number box who identify how many seniors in the trip.
for example :
I want when I select 2 in the first number box, the subtotal next to the number box show me the result of the calculation ( price of one person * 2)
also for seniors section.
I found a code which is work with select and option value :
update_amounts();
$('select').change(update_amounts);
function update_amounts() {
var sum = 0.0;
$('#tickets > tbody > tr').each(function () {
var qty = $(this).find('option:selected').val();
var price = $(this).find('.price').text().replace(/[^\d.]/, '');
var amount = (qty * price);
sum += amount;
$(this).find('.subtotal').text('{{ \App\Helpers\Themes::getSymbolForCurrency() }}' + amount);
});
$('#total').val('{{ \App\Helpers\Themes::getSymbolForCurrency() }}' + sum);
};
I have edited this code to my needs like this :
$('input').change(update_amounts);
function update_amounts() {
var sum = 0.0;
$('#tickets > tbody > tr').each(function () {
var qty1 = $(this).find('#adults').val();
var qty2 = $(this).find('#senior').val();
var price = $(this).find('.price').text().replace(/[^\d.]/, '');
var amount = ((qty1+qty2) * price);
sum += amount;
$(this).find('.subtotal').text('{{ \App\Helpers\Themes::getSymbolForCurrency() }}' + amount);
});
$('#total').val('{{ \App\Helpers\Themes::getSymbolForCurrency() }}' + sum);
};
But it doesn't work!
this is the Html code :
<input type="number" name="adult_count" id="adults" min="0" required>
<input type="number" name="senior_count" id="seniors" min="0" required>
this image shows what I need :
https://i.ibb.co/52qzkh7/stack2.png
I have 3 bootstrap sliders, which are basically input fields. The values of these sliders get displayed into an input box, and below that a price value is displayed. What I need to do is to save those 4 values to an array whenever a button is clicked. I managed to do this with the values hardcoded and without a button like this:
<li> <a class = "add-to-cart" href = "#" data-name = "Windows" data-price = "99.95" data-ram ="1" data-diskSpace="30" data-cpu="3">
<script>
$(".add-to-cart").click(function(event){
event.preventDefault(); // prevents the links from doing their default behaviour
var name = $(this).attr("data-name");
var price = Number($(this).attr("data-price"));
var ram = Number($(this).attr("data-ram"));
var diskSpace =Number($(this).attr("data-diskSpace"));
var cpu = Number($(this).attr("data-cpu"));
addItemToCart(name,price,1,ram,diskSpace,cpu);
displayCart();
});
var cart = [];
var Item = function (name,price,quantity,ram,diskSpace,cpu){
this.name = name;
this.price = price;
this.quantity = quantity;
this.ram = ram;
this.diskSpace = diskSpace;
this.cpu = cpu;
};
//addItemToCart(name,price,quantity)
function addItemToCart(name,price,quantity,ram,diskSpace,cpu){
for (var i in cart){
if(cart[i].name === name){
cart[i].quantity +=quantity;
saveCart();
return;
}
}
var item = new Item(name,price,quantity,ram,diskSpace,cpu);
cart.push(item);
}
</script>
This is my code for the values from the input box :
<input class="slider" id="ram" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" />
<hr />
<input class="slider" id="diskSpace" data-slider-id='ex1Slider2' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" />
<hr />
<input class="slider" id="cpu" data-slider-id='ex1Slider3' type="text" data-slider-min="0" data-slider-max="4" data-slider-step="1" />
<hr />
<input type="text" class="form-control" id="inputValue" value="0" />
</div>
Prijs:
<div id = "prijs">
</div>
<script>
var minSliderValue = $("#ram").data("slider-min");
var maxSliderValue = $("#ram").data("slider-max");
$('#ram').slider({
value : 0,
formatter: function(value) {
return 'RAM: ' + value + 'GB';
}
});
$('#diskSpace').slider({
value : 0,
formatter: function(value) {
return 'Disk Space: ' + value + 'GB';
}
});
$('#cpu').slider({
value : 0,
formatter: function(value) {
return 'CPU : ' + value + ' Cores';
}
});
// If You want to change input text using slider handler
$('#ram, #diskSpace, #cpu').on('slide', function(slider){
var ram = parseFloat($('#ram').val());
var diskSpace = parseFloat($('#diskSpace').val());
var cpu = parseFloat($('#cpu').val());
$("#inputValue").val("RAM="+ ram + "GB, Disk=" +diskSpace + "GB, Core="+cpu);
var totalPrice=(parseFloat(ram)*3.5 + parseFloat(diskSpace)*0.15+ parseFloat(cpu)*6.5).toFixed(2);
$("#prijs").html(totalPrice);
});
</script>
working jsfiddle for the sliders function: http://jsfiddle.net/umxhhqy4/8/
I am trying to make a function using jquery where i want to get the total number of input in a page with attibute value defined by me . For eg there are four input tags
<input type="hidden" class="code" barcode="567" total_quantity="3" name="product1" value="Nokia rita" class="product-10105">
<input type="hidden" class="code" barcode="567" total_quantity="3" name="product1" value="Nokia rita" class="product-10105">
<input type="hidden" class="code" barcode="567" total_quantity="3" name="product1" value="Nokia rita" class="product-10105">
<input type="hidden" class="code" barcode="200" total_quantity="3" name="product1" value="book" class="product-200">
In the above tags i want to pre define barcode number in a variable and the count the number of inputs accordingly and also get the value of total_quantity in a variable for that barcode number i provide. I made the following code to get the total inputs but its for all input and is not according to barcode i will specify .
var barcode_pd = $('input[barcode]').size();
var total_pd = $('input.code').attr("total_quantity");
var sumOfVals = 0;
$(".mn-no-cnt").each(function(){sumOfVals = sumOfVals + parseInt($(this).val(), 10);});
Using above code the ouput for count of input is 4 and i want to specify the barcode number too such as 567 so that the count could be 3 or if i use barcode number 200 then the count is 1.
I have used array to store values.
var code = [];
var count = [];
$("input.code").each(function(){
var c = $(this).attr("barcode");
if(code.indexOf(c) >= 0){
count[code.indexOf(c)] += 1;
}
else{
code.push(c);
count.push(1);
}
});
for(var i=0;i<code.length;i++){
$("body").append("<p>Barcode:"+code[i]+" Count:"+count[i]+"</p>");
}
DEMO here.
Without using jQuery:
function getCount(barcode){
var code = document.getElementsByClassName('code') ;
var length = code.length ;
var count = 0 ;
for(var i = 0 ; i < length ; i++){
if(code[i].attributes['barcode'].value == barcode) count++ ;
}
return count ;
}
// Test
alert(getCount(567)) ; // 3
alert(getCount(200)) ; // 1
Demo : http://jsfiddle.net/wz98E/
http://jsfiddle.net/A95Js/
function countBarcode(numberToFind){
var countInputs = 0;
$('input[barcode]').each(function(){
if($(this).attr("barcode") == numberToFind){
countInputs ++;
}
return countInputs;
});
}
$('#answer').html(countBarcode(567));
This is purely to count them - but combined with Hirals answer you should be able to work out how to turn his into a function. JSfiddle is above - obviously to make this useful you need to return the value not add it to a div - was just showing how to count it.
Try this. Set the barcode variable to the barcode you want to search for. I have also converted to data- attributes and have provided code to count and sum the data-total_quantity:
HTML:
<input type="hidden" class="code" data-barcode="567" data-total_quantity="3" name="product1" value="Nokia rita" id="product-10105">
<input type="hidden" class="code" data-barcode="567" data-total_quantity="3" name="product1" value="Nokia rita" id="product-10106">
<input type="hidden" class="code" data-barcode="567" data-total_quantity="3" name="product1" value="Nokia rita" id="product-10107">
<input type="hidden" class="code" data-barcode="200" data-total_quantity="3" name="product1" value="book" class="product-200">
Javascript:
$(function () {
var barcode = 567; // set to whatever you want to search for...
var sumOfVals = 0;
$("input.code[data-barcode='" + barcode + "']").each(function () {
sumOfVals += parseInt($(this).data('total_quantity'), 10);
});
alert("Length: " + $("input.code[data-barcode='" + barcode + "']").length);
alert("Sum: " + sumOfVals);
});
Fiddle:
http://jsfiddle.net/d89BR/4/
Try this :
var barcode = 123;
var $123 = $('input[data-barcode="' + barcode + '"]');
var howMany = $123.length;
var sumOfQuantities = Function('return ' + $123.map(function () {
return $(this).data('quantity');
}).get().join('+') + ';')();
var sumOfValues = Function('return ' + $123.map(function () {
return $(this).val() || '0';
}).get().join('+') + ';')();
HTML (example) :
<input data-barcode="123" data-quantity="123" value="123" />
My problem is simple not so lengthy as looking like.
I have 7 textboxes having ids text1, text2, text3, text4 and text5, text6, text7 and one checkbox having id check. I am getting value of text1 and text2 by JSON as 10 and 20 and displaing total 30 in text7. Values of text4,text5 and text6 are empty that is these textboxes display "0". text3 and text4 will be autofilled based on checkbox.
When i checked the checkbox then "Points" will be autofilled in text3 and "100" will be autofilled in text4. Now total text7 will show 130. Values of text5 and text6 display "0". If i will write something let's say "10" in text5 and "20" in text6 then total text7 will show 160. If i uncheck the checkbox, then values of text3 and text4 will be removed and total will be changed acordingly.I am not able to know how to autofill text3 and text4 after checking the checkbox, any idea please?
index.jsp
$(document).ready(function() {
$("#combo1").change(function() {
$.getJSON(
'combo1.jsp',
{ combo1Val : $(this).val() },
function(data) {
var a = data.valueoffirsttextbox; //Got 10 from db
var b = data.valueofsecondtextbox; //Got 20 from db
var total = parseInt(a) + parseInt(b);
$("#combo2").val(data.name);
$("#text1").val(a)
$("#text2").val(b)
$("#text7").val(total); // here i am showing total 30 in text7
}
);
// when checkbox is unchecked text4 is not present
$("#text1, #text2, #text5, #text6").keyup(function() {// if any editing occurs
in these values then total will be changed accordingly
var a = $("#text1").val();
var b = $("#text2").val();
var c = $("#text5").val();
var d = $("#text6").val();
var total = parseInt(a) + parseInt(b) + parseInt(c) + parseInt(d);
$("#text7").val(total);// shows total with out text4's value
// when checkbox is checked then text4's value is added
$("#text1, #text2, #text4, #text5, #text6").keyup(function() {// if any editing
occurs in these values then total will be changed accordingly
var a = $("#text1").val();
var b = $("#text2").val();
var c = $("#text5").val();
var d = $("#text6").val();
//here text4 is added
var e = $("#text4").val();
var total = parseInt(a) + parseInt(b) + parseInt(c) + parseInt(d) + parseInt(e) ;
$("#text7").val(total);// show total with text4's value
});
});
});
<body>
<input type="checkbox" id=check"/>
<input type="text" id="text1"/>
<input type="text" id="text2"/>
<input type="text" id="text3"/>// how can i autofill "POINTS" in this
textbox after checking the checkbox?
<input type="text" id="text4" value="0"/>//how can i autofill "100" in this textbox
after checking the checkbox?
<input type="text" id="text5" value="0"/>
<input type="text" id="text6" value="0"/>
<input type="text" id="text7" value="0"/>// shows total of all values of above
textboxes except text3
</body>
You can check this jsFiddle: http://jsfiddle.net/Af6LP/1/ Modify it according to your needs.
Script
$(document).ready(function() {
$("#check").change(function() {
if ($(this).is(":checked")) $("#text4").val("100");
else $("#text4").val("0");
calculate();
});
$("#text1, #text2, #text5, #text6").keyup(function() {
calculate();
});
});
function calculate() {
var a = $("#text1").val();
var b = $("#text2").val();
var c = $("#text5").val();
var d = $("#text6").val();
var total = parseInt(a) + parseInt(b) + parseInt(c) + parseInt(d);
if ($("#check").is(":checked")) total += parseInt($("#text4").val());
$("#text7").val(total);
}
HTML
<body>
<input type="checkbox" id="check"/><br/>
<input type="text" id="text1" value="10"/><br/>
<input type="text" id="text2" value="20"/><br/>
// how can i autofill "POINTS" in this textbox after checking the checkbox?
<input type="text" id="text3"/><br/>
//how can i autofill "100" in this textbox after checking the checkbox?
<input type="text" id="text4" value="0"/><br/>
<input type="text" id="text5" value="0"/><br/>
<input type="text" id="text6" value="0"/><br/>
// shows total of all values of above textboxes except text3<br/>
<input type="text" id="text7" value="30"/>
</body>
Take a look at this solution:
demo jsBin
var a=10; // from database
var b=20; // from database
var e=0;
$("#text1").val(a); // read and set value
$("#text2").val(b); // read and set value
function getValues(){
a = parseInt($("#text1").val(), 10);
b = parseInt($("#text2").val(), 10);
var c = parseInt($("#text5").val(), 10);
var d = parseInt($("#text6").val(), 10);
doSomeCheck = $('#check').is(':checked') ? e=100 : e=0;
$('#text4').val(e);
$('#text3').val(a+b);
$("#text7").val(a+b+c+d+e);
}
getValues();
$("#check").change(function() {
getValues();
});
$("#text1, #text2, #text4, #text5, #text6").keyup(function() {
getValues();
if($(this).val() === '') $('#text7').val('...');
});
$(document).ready(function() {
$("#check").change(function() {
if ($(this).is(":checked")) $("#text4").val("100");
else $("#text4").val("0");
if ($(this).is(":checked")) $("#text3").val("POINTS");
else $("#text3").val("");
calculate();
});
$("#text1, #text2, #text5, #text6").keyup(function() {
calculate();
});
});
function calculate() {
var a = $("#text1").val();
var b = $("#text2").val();
var c = $("#text5").val();
var d = $("#text6").val();
var total = parseInt(a) + parseInt(b) + parseInt(c) + parseInt(d);
if ($("#check").is(":checked")) total += parseInt($("#text4").val());
$("#text7").val(total);
}
Just had to add another if/else for text3. Simple.
I'm using the following code to take the value of one field, subtract it from the value of another field and display the result.
$(document).ready(function() {
var numIn;
var numOut;
var total;
$('#submit').click(function() {
numIn = $('input.in').val();
numOut = $('input.out').val();
total = numIn-numOut;
$('span').remove();
$('body').append('<span>£'+total+'</span>');
$('span').fadeIn(250);
});
});
I want to create a sort of income/expenditure calculator. so my question is, say I had multiple income fields and multiple expenditure fields how would I take the total value from the income fields away from the total value of the expenditure fields.
Here is an example form in case I haven't been clear.
<form>
<input class="in" type="text">
<input class="in" type="text">
<input class="in" type="text">
<input class="in" type="text">
<input class="out" type="text">
<input class="out" type="text">
<input class="out" type="text">
<input class="out" type="text">
<input type="submit" id="submit" value="Submit">
You could loop over the .in and .out fields, and add their values as you go.
Example: http://jsfiddle.net/tXPeg/3/
var numIn = 0;
var numOut = 0;
var total;
$('#submit').click(function() {
$('input.in').each(function() {
return numIn += (parseFloat(this.value) || 0);
});
$('input.out').map(function() {
return numOut += (parseFloat(this.value) || 0);
});
total = numIn - numOut;
$('span').remove();
$('body').append('<span>£' + total + '</span>');
$('span').fadeIn(250);
return false;
});
EDIT: Changed to use parseFloat() instead of parseInt().
Actually after testing a little further the only problem is that if one or more fields are empy it returns 'NaN'.
I tried adding conditional statements to check that the field had a value but no luck:
Feel free to edit my example: http://jsfiddle.net/QaEcD/3/
$('#submit').click(function() {
var numIn = 0;
var numOut = 0;
var total = 0;
$('input.in').each(function() {
if($(this).val().length !== 0){
return numIn = numIn + parseInt(this.value);
});
});
$('input.out').map(function() {
if($(this).val().length !== 0){
return numOut = numOut + parseInt(this.value);
});
});
total = numIn-numOut;
$('span').remove();
$('body').append('<span>£'+total+'</span>');
$('span').fadeIn(250);
return false;
});
});