CODEWITHSUNDEEP
javascriptjquery
Bryan Rance
Bryan Rance

Reputation: 181

Jquery subtracting different values

I have a function where I have three input fields. where if I input values anywhere on my textfield, it will subtract each textfield that has value to my totalNumber variable.

var totalNumber = 3;
var textFieldsLeft = 0;
var textFieldsHasValue = 0;

<input type = "text" id = "first">
<input type = "text" id = "second">
<input type = "text" id = "third">

how can I do with jquery where if I input something with input id ="first", the value of textFieldLeft will be = 2 and the textFieldsHasValue = 1 and for totalNumber = 2.

here is my jquery code

$(this).keyup(function(){
  countValue = $(this).val().length;
  //alert(getText);
  if(countValue != 0){
    console.log('Yes indeed it has a value');
    $(this).css(colorBlue);
    //alert(id);


    }
});

I need this to track down how many fields left that has not been filled out yet.

Upvotes: 2

Views: 540

Answers (5)

Sravan
Sravan

Reputation: 18647

<input type = "text" id = "first" class = "myclass">
<input type = "text" id = "second" class = "myclass">
<input type = "text" id = "third" class = "myclass">

  var count = 0
  var all_count = 0
  $('.myclass').each(function() {
       all_count = all_count + 1
        if ($(this).val() == '') {
              count = count + 1
        }
    });

var non_empty = all_count - count
"The total empty text fields are" +count 
"The total text fields are" +all_count 
"The total non empty text fields are"+non_empty

Upvotes: 0

歐津柏
歐津柏

Reputation: 94

Add a class to all three inputs and then bind an event to the class then, when one of the inputs triggers the event textFieldsLeft = totalNumber -1; textFieldsHasValue ++;

var totalNumber = 3;
var textFieldsLeft = 0;
var textFieldsHasValue = 0;

$('.txtbox').on('input', function(){
  countValue = $(this).val().length;
  //alert(getText);
  if(countValue != 0){
    console.log('Yes indeed it has a value');
    $(this).css('color', 'Blue');
   

    }
  check_txtField();
});

function check_txtField()
{
   textFieldsLeft= 0;
   textFieldsHasValue =0;
  $('.txtbox').each(function(){
    if($(this).val().length){
         textFieldsHasValue ++;
          textFieldsLeft = totalNumber - textFieldsHasValue;
    }
  })
  console.log('textFieldsLeft : ', textFieldsLeft, 'textFieldsHasValue : ', textFieldsHasValue);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type = "text" id = "first" class='txtbox'/>
<input type = "text" id = "second" class='txtbox'/>
<input type = "text" id = "third" class='txtbox'/>

Upvotes: 0

skip405
skip405

Reputation: 6279

I would suggest you didn't hardcode the inputs number in the variable but to find the length of the inputs in JS as well.

Secondly, I'd suggest you employ only one event listener, instead of listening all of the inputs (aka. delegated event)

Take a look:

HTML:

<div class="inputs">
  <input type = "text" id = "first">
  <input type = "text" id = "second">
  <input type = "text" id = "third">
</div>

JS:

var $inputs = $("input[type='text']");
var totalNumber = $inputs.length; //find the total number using .length

function checkInputs () {
  var textFieldsHasValue = 0;

    $inputs.each(function(i, el){
    if( "" !== $(el).val() ) {
        textFieldsHasValue++;
    }
  });

  var textFieldsLeft = totalNumber - textFieldsHasValue;

  console.log('totalNumber', totalNumber);
  console.log('textFieldsLeft', textFieldsLeft);
  console.log('textFieldsHasValue', textFieldsHasValue);
}

$('.inputs').on('keyup change', 'input', checkInputs); //add listeners to the parent div, but listen for inputs change

Also I am listening for both the keyup and change events, as a user may rightclick and paste the value without a keyboard.

The working example of the code can be seen here - https://jsfiddle.net/skip405/ouxdwjeo/

Upvotes: 1

Cosmin
Cosmin

Reputation: 2214

Check out this FIDDLE . I've also added a timeout function not to calculate each time a key is pressed.

Note that I've added a class to each textbox, but that is not a must. Check it out yourself how you can select all of them without a class. ( it's easy )

<input class="fields" type = "text" id = "first">
<input class="fields" type = "text" id = "second">
<input class="fields" type = "text" id = "third">

Upvotes: 0

Mohd Abdul Mujib
Mohd Abdul Mujib

Reputation: 13928

Just set a common class to all the inputs and then perform the aforementioned logic on their change event.

HTML:-

<input type="text" id = "first" class="inps">
<input type="text" id = "second" class="inps">
<input type="text" id = "third" class="inps">

JS:-

var totalNumber = 3;
var textFieldsLeft = 0;
var textFieldsHasValue = 0;


$(".inps").on("change", function(){
  textFieldsHasValue = 0;
  $(".inps").each(function(){
    if($(this).val() !==''){
       textFieldsHasValue++;
    }
  });
  textFieldsLeft = totalNumber - textFieldsHasValue;
});

NOTE:- Polluting the global scope is a bad practice, and should be avoided.

Upvotes: 1

Related Questions