Getting the number of unfilled empty text boxes in jQuery - javascript

I was trying to solve another person's jQuery question and ran into an issue of my own.
In order to solve this question, I need to determine the number of text boxes that are empty. I thought the best solution would be to use the element[attribute='value'] selector but that didn't work.
alert($("input[val='']").length);
I always get 0, even when there are 3 other empty text boxes. Empty text boxes should have a value equal to an empty string.
Here is my fiddle
http://jsfiddle.net/04gqaLog/
HTML
<input type="text" /></br>
<input type="text" /></br>
<input type="text" /></br>
<input type="text" />
jQuery
$(document).ready(function() {
var sum = 0;
var boxesFilled = 0;
$("input").on("change", function() {
sum += +$(this).val();
boxesFilled += 1;
alert($("input[val='']").length);
});
});

The first issue is you are referring to the value attribute as val. Those are considered two distinct attributes.
The next issue is some input elements may not have a value attribute. Therefore, you will need to specifically check for that or check if the value is falsey
var emptyInputs = $('input').filter(function() {
return !$(this).val();
});
console.log(emptyInputs.length);
$(document).ready(function() {
var sum = 0;
var boxesFilled = 0;
$("input").on("change", function() {
sum += +$(this).val();
boxesFilled += 1;
var emptyInputs = $('input').filter(function() {
return !$(this).val();
});
console.log(emptyInputs.length);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" />
</br>
<input type="text" />
</br>
<input type="text" />
</br>
<input type="text" />

Related

Trying to increment different field values to a single variable in Javascript

Here is what I'm trying to do.
I have a form with different fields set up in the following structure:
<input type="text" id="revenue-1" />
<input type="text" id="revenue-2" />
<input type="text" id="revenue-3" />
<input type="text" id="revenue-4" />
<input type="text" id="revenue-5" />
I get the values by using the following code:
$("input[id^='revenue-']").keyup(function(e) {
var revenue = $("#revenue-"+formNumber).val();
});
Here is what I want to do, I want to get the values and increment each time.
For example, if revenue-1 is 90 and revenue-2 is 100 the total value of those fields automatically?
Basically, I want to get all the numeric values of all of the fields to add up each time I enter a value on the form and it will display elsewhere.
Thank you,
Kevin Davis
Consider the following.
$(function() {
function calcTotal() {
var c = 0;
$("[id^='revenue']").each(function() {
var v = $(this).val();
if (parseInt(v)) {
c += parseInt(v);
}
});
return c;
}
$("[id^='revenue']").keyup(function(event) {
console.log(event.key, calcTotal());
});
});
input[type='text'] {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="revenue-1" />
<input type="text" id="revenue-2" />
<input type="text" id="revenue-3" />
<input type="text" id="revenue-4" />
<input type="text" id="revenue-5" />
This examines each of the fields, and if they have a number entry, will combine them with any other fields.
Remember that Text Fields result in String content. So if the user enters 1, the .val() will respond with "1", a String. So to perform a math calculation, we need to use parseInt() to cast it as a Integer.
See More: https://api.jquery.com/each/

Disable many fields by name javascript

This is my question:
I got an jsp page, this jsp has many text fields like this:
<html:text property="cicPF" maxlength="9" style="text-transform: uppercase;" onfocus="disableIfeFields()"/>
So I want to disable some of this text fields when the focus it's in a specific field
But no one of this fields has "id" label, and I can't modify it to include it.
May I disable the fields usig their given names, no one of this repeats the same name.
for example with a function like this:
function disableIfeFields(){
document.getElementsByName("numIdentificacionPF").disabled = true;
}
thanks
You need to loop through the list and disable all the fields you want that way, used input to show example:
function disableIfeFields() {
document.getElementsByName("numIdentificacionPF").forEach((e) => {
e.disabled = true;
});
}
<html:text property="cicPF" maxlength="9" style="text-transform: uppercase;" />
<input onfocus="disableIfeFields()" type="text" name="fname">
<input type="text" name="numIdentificacionPF">
<input type="text" name="numIdentificacionPF">
<input type="text" name="numIdentificacionPF">
<input type="text" name="numIdentificacionPF">
<input type="text" name="numIdentificacionPF">
Maybe like this:
function disableIfeFields(){
document.querySelectorAll('[property="cicPF"]')[0].disabled = true;
}
disableIfeFields();
<input type="text" property="cicPF" maxlength="9" style="text-transform: uppercase;" onfocus="disableIfeFields()"/>
Hopefully the following should help. Because the selection result is a list of elements you will have to loop through the results.
Please note that since you said no input repeats the same name, I'm using querySelectorAll, which might be a more suitable method after all…
var inputs = document.querySelectorAll('input[type="text"]');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].id === 'label') {
continue;
}
inputs[i].disabled = true;
}

jquery increment input values

Using Jquery I need to add all values of input.
Using jquery each is there any way to use regix in element name
like
items[regix_goes_here][debit]
I need values of all input and I want them incremented using each.
My code
<input name="items[1][debit]" type="number">
<input name="items[341][debit]" type="number">
<input name="items[31][debit]" type="number">
<input name="items[431][debit]" type="number">
First, assign a class to your inputs, for example:
<input class="js-inc" name="items[1][debit]" type="number">
<input class="js-inc" name="items[341][debit]" type="number">
<input class="js-inc" name="items[31][debit]" type="number">
<input class="js-inc" name="items[431][debit]" type="number">
Now you can increment all of them, without even jquery. Use .value to access the value as a string. Use Number("..") to convert it to a number. Add one to it, and assign it back.
var inputs = document.querySelectorAll("input.js-inc")
inputs.forEach(function(input) {
input.value = Number(input.value) + 1
})
Here's a live example
If you want to sum all the values of inputs with name="items[X][Y]", you can filter them by testing if their name attribute matches this /items\[\d+\]\[debit\]/ Regex.
This is how should be your code:
var sum = 0;
$('input[type="button"]').click(function() {
$('input').each(function() {
if ($(this).attr('name') && $(this).attr('name').match(/items\[\d+\]\[debit\]/)) {
sum += $(this).val() ? parseInt($(this).val()) : 0;
}
});
console.log(sum);
});
Demo:
var sum = 0;
$('input[type="button"]').click(function() {
$('input').each(function() {
if ($(this).attr('name') && $(this).attr('name').match(/items\[\d+\]\[debit\]/)) {
sum += $(this).val() ? parseInt($(this).val()) : 0;
}
});
console.log(sum);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="items[1][debit]" type="number" value="2">
<input name="items[341][debit]" type="number" value="2">
<input name="items[31][debit]" type="number" value="2">
<input name="items[431][debit]" type="number" value="2">
<input type="button" value="SUM" />

jQuery: How to add float values in multiple fields using class name

Using jQuery, I have float values in fields with similar class names "score"and I just want to make a function that will add all float values in those fields and assign the result to "field5".
<input id="field1" type="text" class="score">2.5</input>
<input id="field2" type="text" class="score">6.02</input>
<input id="field3" type="text" class="score">1</input>
<input id="field4" type="text" class="score">4.03</input>
<input id="result" type="text" class="result"></input>
I made the script below but it doesn't work even though the function executes.
$(.score).on('change',function(){
var total = 0
$(this).each(function(){
total += this.value;
});
});
$('#result').val(total);
});
Lot of issues in your code:
JS:
$(".score").on('keyup', function () {
var total = 0
$(".score").each(function () {
total += parseFloat(this.value);
});
$('#result').val(total);
});
HTML
<input id="field1" type="text" class="score" value="1"/>
<input id="field2" type="text" class="score" value="1.2"/>
<input id="field3" type="text" class="score" value="1.4"/>
<input id="field4" type="text" class="score" value="3.1"/>
<input id="result" type="text" class="result" value=""/>
Demo: http://jsfiddle.net/GCu2D/839/
input is a self closing tag. You should use it like in this example
You should iterate on $(".score") instead of $(this) to get all input values. Latter will give only the current input's value.
Use parseFloat to convert the string type into float. By default you get string value from the .value. In order to add them, you need to convert them to float
Your selector $(.score) is invalid. Use $(".score") .
$('#result').val(total); should be inside the event handler.
First of all, I believe .change() is used with dropdowns. Try using .keydown() to detect a change in an input box.
There are a few errors in your code -
var total = 0;
Semicolon is missing.
$('#result').val(total);
This will assign the value and will not show it. If you wish to display teh value as well, use
$('#result').append(total);
$(document).ready(function(){
$(".score").on('change',function(){
var total = 0.00;
$(".score").each(function(){
if(undefined != $(this).val() && "" != $.trim($(this).val()))
total += parseFloat($(this).val());
});
$('#result').val(total);
});
});
I finally figured it out. Thanks guys!
function getResult(){
var total = 0;
$('.score').each(function(){
var checkval= parseFloat(this.value);
if(!isNaN(checkval)) total += checkval;
});
$('#result').val(total.toFixed(2));
}

How to get the difference of two numbers from the input box without page submittal using Codeigniter?

I have three input boxes, of which two are for entering values (any number) and one is for getting results (the difference of the two). How can I get the result without using page submission using Codeigniter?
You can use jQuery for that.
<input type="text" id=first" name="firstInput" />
<input type="text" id="second" name="secondInput" />
<input type="text" id="third" name="thirdInput" />
//jquery
$(document).ready(function() {
var first = parseInt($("#first").val(), 10);
var second = parseInt($("#second").val(), 10);
var thirdVal = first - second;
$("#third").val('');
$("#third").val(thirdVal);
});
Hope it helps
without exactly knowing how the result is being called you could use on onblur on the second number input/ first.
<input name="number" id="num_0" type="text" />
<input name="number" id="num_1" type="text" onblur="getResult()" />
<input name="number" id="num_2_result" type="text" />
script to get result derived for num_0 and num_1
function getResult(){
var number = document.getElementsByName('number');
var result = parseInt(number[0].value,10) - parseInt(number[1].value,10);
// if is a number display reuslt
if(!isNaN(result)){
number[2].value = result;
}
}

Categories