We Keep Coding

Getting all the values inside the Div

I have a div that has multiple input fields. My HTML looks like this:
<div id="mainDiv">
<input type="text" id="price" /> <br/>
<input type="text" id="tax" />
<input type="text" id="others" />
</div>
<img src="img/img.gif" onclick="getAllValues();" />
After I click the image, it must get all the values inside the mainDiv. How can I do this?

$("#getallvalues").click(function() {
var values = $("#mainDiv input").map(function() {
return $(this).val()
}).get().join(",");
console.log(values)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv">
<input type="text" id="price" /> <br/>
<input type="text" id="tax" />
<input type="text" id="others" />
</div>
<img src="img/img.gif" id="getallvalues" />
Loop through each input then get the value and use .map()
var price = 0;
var tax = 0;
var others = 0;
$("#getallvalues").click(function() {
$("#mainDiv input").each(function() {
if ($(this).attr("id") == "price") {
price = $(this).val()
}
if ($(this).attr("id") == "tax") {
tax = $(this).val()
}
if ($(this).attr("id") == "others") {
others = $(this).val()
}
})
console.log("price " + price)
console.log("tax " + tax)
console.log("others " + others)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv">
<input type="text" id="price" /> <br/>
<input type="text" id="tax" />
<input type="text" id="others" />
</div>
<img src="img/img.gif" id="getallvalues" />

You can use .map() to iterate over element and return the value in call back along with .get() to get them in array:
function getAllValues(){
$('#mainDiv input').map({
return this.value;
}).get(); // Output: ["priceval","taxval","otherval"]
}
You can use above array to create the data in whichever format(csv,json,etc) you want for further processing.

Loop through all the inputs in mainDiv
$('#mainDiv input').each(function(){
// Do what ever
})

Another way of doing this is like follows:
$('#mainDiv').find('input').each(function (index, element) {
var yourValue = element.value; // or $(element).val();
// And rest of your code
});

$('#mainDiv input').each(function(){
console.log(this.val());
})

Duplicate input's value when clicked to button

I have a two similar forms with input "Quantity" and buttons "-", "+".
I need to duplicate input's value to second form and back.
For example: When I'm click to "+" in first form it will be incremented.
I need to in the second form was the same value.
<div class="quantity">
<input class="subtraction" name="sub" type="button" value="-">
<input type="number" step="1" name="qty" value="1" class="input-text qty text panel-quantity" size="4" />
<input class="addition" name="add" type="button" value="+">
</div>
<div class="quantity">
<input class="subtraction" name="sub" type="button" value="-">
<input type="number" step="1" name="qty" value="1" class="input-text qty text panel-quantity" size="4"/>
<input class="addition" name="add" type="button" value="+">
</div>
JS:
$(function(){
$('.quantity').on('click', '.addition, .subtraction', function() {
var quantityPanel = $('.panel-quantity');
var quantity = $(this).closest('.quantity').find('input.qty');
var currentValue = parseInt(quantity.val());
var maxValue = parseInt(quantity.attr('max'));
var minValue = parseInt(quantity.attr('min'));
if($(this).is('.addition')) {
if(maxValue && (currentValue >= maxValue)){
quantity.val(maxValue);
} else {
quantity.val((currentValue + 1));
}
} else {
if (minValue && (currentValue <= minValue)) {
quantity.val(minValue);
} else if(currentValue > 0) {
quantity.val((currentValue - 1));
}
}
quantity.trigger('change');
});
});
I think that I can just set the same name for the INPUT, so that they work the same way.
Thanks
It's my example in jsfiddle

add $('input.qty').not(quantity).val(quantity.val()); before triggering change in the input box. and also you have add $('input.qty').not(this).val($(this).val()); in onchange listener of input.qty
$(function(){
$('.quantity').on('click', '.addition, .subtraction', function() {
var quantityPanel = $('.panel-quantity');
var quantity = $(this).closest('.quantity').find('input.qty');
var currentValue = parseInt(quantity.val());
var maxValue = parseInt(quantity.attr('max'));
var minValue = parseInt(quantity.attr('min'));
if($(this).is('.addition')) {
if(maxValue && (currentValue >= maxValue)){
quantity.val(maxValue);
} else {
quantity.val((currentValue + 1));
}
} else {
if (minValue && (currentValue <= minValue)) {
quantity.val(minValue);
} else if(currentValue > 0) {
quantity.val((currentValue - 1));
}
}
$('input.qty').not(quantity).val(quantity.val());
quantity.trigger('change');
});
$('input.qty').on('change', function() {
$('input.qty').not(this).val($(this).val());
});
$('input.qty').on('keyup', function() {
$('input.qty').not(this).val($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quantity">
<input class="subtraction" name="sub" type="button" value="-">
<input type="number" step="1" name="qty" value="1" class="input-text qty text panel-quantity" size="4" />
<input class="addition" name="add" type="button" value="+">
</div>
<div class="quantity">
<input class="subtraction" name="sub" type="button" value="-">
<input type="number" step="1" name="qty" value="1" class="input-text qty text panel-quantity" size="4"/>
<input class="addition" name="add" type="button" value="+">
</div>

How to calculate the total value of each section separately: Jquery

I have more than 10 section that included three inputs in each section as follows:
<div class="product_quantity">
<div class="color-quantity">
<input onkeydown="return myFunction(event);" name="custom_small" class="custom_small" type="text">
<input onkeydown="return myFunction(event);" name="custom_medium" class="custom_medium" type="text">
<input onkeydown="return myFunction(event);" name="custom_large" class="custom_large" type="text">
</div>
<div class="color-quantity">
<input onkeydown="return myFunction(event);" name="white_small" class="custom_small" type="text">
<input onkeydown="return myFunction(event);" name="white_medium" class="custom_medium" type="text">
<input onkeydown="return myFunction(event);" name="white_large" class="custom_large" type="text">
</div>
</div>
I am calculating the product quantity from each section but its giving me the whole amount of products on the basis of amount entered in every input. but i want the amount of products in section separately
I am using jQuery to do so please check the code and recommend the changes as required:
jQuery(".color-quantity input").each(function () {
if (this.value) {
quantity += (this.value) * 1;
classname = jQuery(this).attr('class');
arr.push(classname);
}
if (quantity == '') {
quantity = 0;
}
});

You can get total off each section as an array like following.
var arr = $('.color-quantity').map(function () {
var total = 0;
$('input', this).each(function () {
total += this.value * 1;
});
//do some stuff
if (total < 50) {
$('.btn-cart').removeAttr("onclick");
}
return total;
}).get();
console.log(arr)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color-quantity">
<input type="text" value="1">
<input type="text" value="2">
<input type="text" value="3">
</div>
<div class="color-quantity">
<input type="text" value="4">
<input type="text" value="5">
<input type="text" value="6">
</div>

You might try a nested loop. first loop through the color-quantity divs, then through the inputs. like this:
jQuery(".color-quantity").each(function () {
var quantity = 0;
$(this).find('input').each(function() {
if (this.value) {
quantity += (this.value) * 1;
classname = jQuery(this).attr('class');
arr.push(classname);
}
if (quantity == '') {
quantity = 0;
}
});
// here is where you can get the total value for each div
});

How to show the results when checkbox is selected

Here is my code:
<form id="F2" onsubmit="return false;">
Which do you want?<br />
<input name="a" onclick="TotalCheckedValues()" type="checkbox" value="10" />New (10.00)<br />
<input name="b" onclick="TotalCheckedValues()" type="checkbox" value="0" />Broken (Free)<br />
<input name="c" onclick="TotalCheckedValues()" type="checkbox" value="55" />Antique (55.00)<br />
<input name="d" onclick="TotalCheckedValues()" type="checkbox" value="4.95" />Refurbished (4.95)<br />
Total: <input name="T" readonly="readonly" size="5" type="text" /><br />
<input onclick="TotalCheckedValues()" type="button" value="Click" /> </form>
function TotalCheckedValues() {
var total = 0;
if(document.getElementById("F2").a.checked == true) { total += parseFloat(document.getElementById("F2").a.value); }
if(document.getElementById("F2").b.checked == true) { total += parseFloat(document.getElementById("F2").b.value); }
if(document.getElementById("F2").c.checked == true) { total += parseFloat(document.getElementById("F2").c.value); }
if(document.getElementById("F2").d.checked == true) { total += parseFloat(document.getElementById("F2").d.value); }
var ts = new String(total);
if(ts.indexOf('.') < 0) { ts += '.00'; }
if(ts.indexOf('.') == (ts.length - 2)) { ts += '0'; }
document.getElementById("F2").T.value = ts;
document.getElementById("F3").innerHTML = ts;
}
I want to show the updated result whenever I click and untick the checkbox.

Just add "script" tag in your html before function start which indicate javascripts code.

How to show form fields on keyup

I've been working on this for weeks now and I can't seem to get the hang of this. I'm trying to show the hidden fields only when the previous fields are entered. Here's my example code:
HTML
<form>
<div id="group1">
<label>Field 1:</label>
<input type="text" class="field1" />
<br/>
<label>Field 2:</label>
<input type="text" class="field2" />
<br/>
<label>Field 3:</label>
<input type="text" class="field3" />
<br/>
</div>
<div id="group2">
<label>Field 4:</label>
<input type="text" class="field4" />
<br/>
<label>Field 5:</label>
<input type="text" class="field5" />
<br/>
<label>Field 6:</label>
<input type="text" class="field6" />
<br/>
</div>
<div id="group3">
<label>Field 7:</label>
<input type="text" class="field7" />
<br/>
<label>Field 8:</label>
<input type="text" class="field8" />
<br/>
<label>Field 9:</label>
<input type="text" class="field9" />
<br/>
<input type="submit" value="Submit">
</div>
</form>
CSS
#group2 {
visibility: hidden;
}
#group3 {
visibility: hidden;
}
Script
$(document).ready(function () {
$('#group1').find('input[type="text"]').keyup(function () {
CheckSubmit();
});
function CheckSubmit() {
var x = true;
$('#group1').find('input[type="text"]').keyup(function () {
if ($(this).val().length === 0) {
x = false;
return;
}
});
if (x) {
$('#group2').css('visibility', 'visible');
$('#group3').css('visibility', 'visible');
} else {
$('#group2').css('visibility', 'hidden');
$('#group3').css('visibility', 'hidden');
}
CheckSubmit();
});
I'm not sure what I'm doing wrong here. Can someone please assist?

I changed your code a bit. I stored the relevant selectors in variables, so you don't need to do a lot of re-querying every time something changes.
Here's the updated code:
JavaScript
var inputs = $('#group1').find('input[type="text"]');
var hidden = $('#group2, #group3');
inputs.keyup(function() {
var test = true;
inputs.each(function(key, value) {
if (!$(this).val().length) {
test = false;
return false;
}
});
hidden.css('visibility', ( test ? 'visible' : 'hidden' ) );
});
Demo
Try before buy

You can make this more dynamic by checking the inputs in the current div and if they all have a value, then show the next div (if there is one).
If they clear a value, then hide all the later divs.
$(document).ready(function() {
// you can restrict this to inputs in a specific div or just any input
$('#group1 input').on('keyup', function () {
var parentDiv = $(this).closest('div')
var hasValues = parentDiv.find('input').filter(function() {
return this.value == '';
}).length == 0;
if(hasValues) {
//parentDiv.next().css('visibility', 'visible'); // show just the next section
parentDiv.nextAll().css('visibility', 'visible'); // show all later sections
} else {
parentDiv.nextAll().css('visibility', 'hidden');
}
});
});
DEMO

I made a quick pen with a solution. It may not be the prettiest but it get's it done. Basically on every keyup event I check #group1's children for their value length and if they all have a length that's more than 0 I change a flag in an array. If all 3 flags are true I show #group2.
Here's the pen
$('#group2').hide();
$('#group3').hide();
$('#group1').keyup(function() {
var flags = {
0: false,
1: false,
2: false
}
$('#group1 > input').each(function(i, ele) {
if(ele.value.length !== 0)
{
flags[i] = true;
}
});
if(flags[0] && flags[1] && flags[2])
{
$('#group2').show();
}
});
$('#group2').keyup(function() {
var flags = {
0: false,
1: false,
2: false
}
$('#group2 > input').each(function(i, ele) {
if(ele.value.length !== 0)
{
flags[i] = true;
}
});
if(flags[0] && flags[1] && flags[2])
{
$('#group3').show();
}
});
Hope it helps :D

If I understand your question well, you want to show the fields in #group2/-3 if all the fields in the previous fields have a value. Using a few data-*-attributes (see MDN), you can create a handler like this (if you prefer: jsFiddle, containing a more complete example):
$('[data-nextgroup] [type=text]').on('keyup', function (e){
var fieldgroup = $(this.getAttribute('data-group'))
,fields = fieldgroup.find('[type=text]')
,canshow = fields.length ===
fields.filter( function (i,el) { return el.value.length; } ).length;
void( canshow && $(fieldgroup.attr('data-nextgroup')).fadeIn() );
});
[data-hidden] {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="group1" data-nextgroup="#group2">
<label>Field 1:</label>
<input type="text" class="field1" data-group="#group1"/>
<br/>
<label>Field 2:</label>
<input type="text" class="field2" data-group="#group1"/>
<br/>
<label>Field 3:</label>
<input type="text" class="field3" data-group="#group1"/>
<br/>
</div>
<div id="group2" data-nextgroup="#group3" data-hidden>
<label>Field 4:</label>
<input type="text" class="field4" data-group="#group2"/>
<br/>
<label>Field 5:</label>
<input type="text" class="field5" data-group="#group2"/>
<br/>
<label>Field 6:</label>
<input type="text" class="field6" data-group="#group2"/>
<br/>
</div>
<div id="group3" data-groups data-hidden>
<label>Field 7:</label>
<input type="text" class="field7" />
<br/>
<label>Field 8:</label>
<input type="text" class="field8" />
<br/>
<label>Field 8:</label>
<input type="text" class="field9" />
<br/>
<input type="submit" value="Submit">
</div>