We Keep Coding

Pass entered value from one table to another table using javascript

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"));
});

Javascript : function bind.click & for each checkbox

I have some combo box, every combo box have value and group by class & ID
<input type="checkbox" value="A" class="box-1" id="ID_1">
<input type="checkbox" value="B" class="box-1" id="ID_1">
<input type="checkbox" value="C" class="box-2" id="ID_2">
<input type="checkbox" value="D" class="box-2" id="ID_2">
If user click button, then check each box, if this checked, store value & ID to variable.
EDIT :
JS :
$('#button').bind('click', function() {
var box = '';
var p =0;
var count = document.getElementById("count").value; // for count total class checkbox
for(d=1; d <= count; d++){
p = 0;
$('.box-' + d).each(function(item){ // each box-1/2/3
if(this.checked){
if(p == 0)
{
var name = this.value.replace(/\s/g, '');
box += '&' + ($(this).attr('id')) + '=' + '&' + encodeURIComponent(name).toLowerCase());
p+=1;
alert(box);
}
else
{
var href = ($(this).attr('id')) + '=';
var name_2 = this.value.replace(/\s/g, '');
box += href + '&' + encodeURIComponent(name_2).toLowerCase());
p+=1;
}
}
});
}
alert(box);
//location = url;
});
example case :
the checked combo box is A & D
what i expect is &ID_1=&AID_2=&D ( this is different ID), if same ID = &ID_1=&A&D
when i try alert it's display nothing(''), but when i try alert(box) inside if( p== 0) it's have result 1&ID_1=A and 0&ID_2=&D.
Try check this here

change your code into like this
$('#button').bind('click', function() {
var boxval="";
//&ID_1=&AID_2=&D
$("input[class^='box-']").each(function(){
if($(this).is(':checked'))
{
boxval += $(this).attr('id') +'=&' + $(this).attr('value');
}
});
if(boxval !='')
alert(boxval)
else
alert("nothing will selected");
});
below is the working fiddle
https://jsfiddle.net/17hxsa9r/

You have declared box twice in your code
var box = '';
and
$('.box-' + d).each(function(box){ // each box-1/2/3
The box declared inside each() hides the outer box, therefore its value is not changed.
You need to name one of them differently.

Limit Sum Value of Multiple Input Fields

I need some help with javascript or jQuery.
I have three (3) input fields that I want to filter (sum of three fields).
the total value of 3 input fields is must 100. If the user fills more than 100, it will be automatically change the value that the total is 100.
you can see this example
<input type="text" name="text1" size="3"> text1<br />
<input type="text" name="text2" size="3"> text2<br />
<input type="text" name="text3" size="3"> text3<br />
<p>The maximum value of total 3 fields above is 100.</p>
<pre>example 1 :
text1 : 20;
text2 : 30;
text3 : 50; (will automatically filled with 50 because the total value must 100)</pre>
<pre>example 2 :
text1 : 37;
text2 : 60;
text3 : 3; (will automatically filled with 3 because the total value must 100)</pre>
Thanks for helping me,
I need it :)

$("input:lt(2)").on("change", function() {
var other = $("input:lt(2)").not(this).val();
if (other.length)
$("input:eq(2)").val(100 - this.value - other);
});
DEMO: http://jsfiddle.net/D5F3p/3/

This is the simplest thing I can think of!
$(document).ready(function(){
$('input[name="text2"]').blur(function(){
$('input[name="text3"]').val(100 - $('input[name="text1"]').val() - $('input[name="text2"]').val());
});
});
IMO, you can do these:
Give only two characters for both the inputs. Don't allow more than that!
You also need to check if the sum of the two inputs should not exceed 101!
Keep the input 2 readonly, until something has been entered in input 1.
Keep the input 3 always readonly.
Fiddle: http://jsfiddle.net/praveenscience/D5F3p/5/

<head>
<script type="text/javascript">
function check() {
var sum = 0;
var inputs = $(".test");
for (i = 0; i < inputs.length; i++) {
if (inputs[i].value == parseInt(inputs[i].value)) {
sum += parseInt(inputs[i].value);
if (sum > 100) {
sum -= parseInt(inputs[i].value);
inputs[i].value = 100-sum;
}
}
}
}
</script>
</head>
<body>
<input type="text" onkeyup="check()" class="test" size="3">
<input type="text" onkeyup="check()" class="test" size="3">
<input type="text" onkeyup="check()" class="test" size="3">

$(function(){
$('input[name="text1"]').keyup(function(){
var text1Value = $('input[name="text1"]').val();
if(text1Value >=100)
{
$('input[name="text1"]').val(100);
$('input[name="text2"]').val('');
$('input[name="text3"]').val('');
$('input[name="text2"]').attr('disabled','disabled');
$('input[name="text3"]').attr('disabled','disabled');
}
else
{
$('input[name="text2"]').removeAttr('disabled');
$('input[name="text3"]').removeAttr('disabled');
}
});
$('input[name="text2"]').keyup(function(){
var text1Value = parseInt($('input[name="text1"]').val());
var text2Value = parseInt($('input[name="text2"]').val());
if(isNaN(text1Value))
{
text1Value =0;
}
if(isNaN(text2Value))
{
text2Value =0;
}
var total = text1Value + text2Value;
if(total >=100)
{
$('input[name="text2"]').val(100-text1Value);
$('input[name="text3"]').val('');
$('input[name="text3"]').attr('disabled','disabled');
}
else
{
$('input[name="text3"]').removeAttr('disabled');
$('input[name="text3"]').val(100-total);
}
});
});
I am checking if sum of all text boxes if exceeding 100, then making correction in the last entered textbox with disabling the next textbox.

Disabling checkbox works, but it's not being processed on onchange

When the checkbox is set to false by the javascript function, the next function doesn't seem to know it has been set to false, it just ignores it.
HTML
<input type="checkbox" name="accs" id="50" class="arms"/>Arm 1: $50<br/>
<input type="checkbox" name="accs" id="60" class="arms"/>Arm 2: $60<br/>
<input type="checkbox" name="accs" id="70" class="neck"/>Neck 1: $70<br/>
<input type="checkbox" name="accs" id="80" class="neck"/>Neck 2: $80<br/>
<div id="total">$500</div>
Javascript: This function disables the checkbox according to the input class
$('.arms, .neck').change(function(){
var myClass = $(this).attr('class');
$('.'+myClass).not(this).prop('checked', false);
});
Javascript next function: The block of code that processes the action if the checkbox is either enabled or disabled
var input = document.getElementsByTagName("input");
var total = document.getElementById("total");
var prev;
for(i=0;i<input.length;i++){
input[i].onchange = function(){
if (this.type != 'text'){
if(this.checked){
$("#total").fadeOut(300);
$("#total").fadeIn(300);
prev=parseFloat(total.innerHTML.replace(/[^0-9\,]+/g,"")) + parseFloat(this.id);
total.innerHTML = "$" + prev.formatMoney(0, ',', '.');
}else{
$("#total").fadeOut(300);
$("#total").fadeIn(300);
prev=parseFloat(total.innerHTML.replace(/[^0-9\,]+/g,"")) - parseFloat(this.id);
total.innerHTML = "$" + prev.formatMoney(0, ',', '.');
}
}
}
}
After clicking all the checkbox you realize that it won't go back to the original price (500) but keeps on adding up.
Fiddle
The reason I haven't used radio is because the form must send the same 'input name' for all the options

I set up a fiddle here: http://jsfiddle.net/MarkSchultheiss/r6MXA/2/
Using this markup:
<input type="checkbox" name="accs" icost="50" class="arms" />Arm 1: $50
<br/>
<input type="checkbox" name="accs" icost="60" class="arms" />Arm 2: $60
<br/>
<input type="checkbox" name="accs" icost="70" class="neck" />Neck 1: $70
<br/>
<input type="checkbox" name="accs" icost="80" class="neck" />Neck 2: $80
<br/>
<div id="total">$500</div>
and this code:
var items = $('input.arms[type="checkbox"], input.neck[type="checkbox"]');
items.change(function () {
var myClass = $(this).attr('class');
$('.' + myClass).not(this).prop('checked', false);
var total = $('#total');
var totalcost = 0;
total.fadeOut(300);
items.filter(':checked').each(function (i) {
var cost = $(this).attr('icost');
totalcost = totalcost + parseFloat(cost);
});
total.text("$" + totalcost + ".00"); // fix your format here as needed
total.fadeIn(300);
});
EDIT: manage the whole check/uncheck cycle thing with a base on the current value in the text total area.
var items = $('input.arms[type="checkbox"], input.neck[type="checkbox"]');
// get the initial total and store in a data for use later (resets as needed)
var total = $('#total');
total.data("currentvalue", parseFloat(total.text().replace(/[^0-9\,]+/g, "")));
items.change(function () {
var currenttotal = total.data("currentvalue");
var myClass = $(this).attr('class');
var thisGroup = $('.' + myClass);
var notme = $('.' + myClass + ':checked').not(this);
var notmeCost = (notme.length ? notme.attr('icost') : ($(this).is(':checked') ? 0 : $(this).attr('icost')));
notme.prop('checked', false);
currenttotal = currenttotal - notmeCost;
total.fadeOut(300);
thisGroup.filter(':checked').each(function (i) {
var cost = $(this).attr('icost');
currenttotal = currenttotal + parseFloat(cost);
});
total.data("currentvalue", currenttotal);
total.text("$" + currenttotal + ".00"); // fix your format here as needed
total.fadeIn(300);
});

Subtracting values from multiple input fields

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