How to find that all input text boxes are empty in table?

Question

I have a html table with data like

<table>
  <tr>
    <td>abc</td>
    <td>781</td>
    <td><input id="barcodedb0" class="hide" type="text" /><input id="barcode0" class="hide" type="text" /></td>
  </tr>
  <tr>
    <td>abc</td>
    <td>781</td>
    <td><input id="barcodedb0" class="hide" type="text" /><input id="barcode0" class="hide" type="text" /></td>
  </tr>
</table>

In JQuery

$('#library_info_tbl tbody').on("keyup", "tr td input:nth-child(2)", function() {
   if(all the textboxes are empty)
    // do something
});

I am trying to find out how will I check that all text boxes in the table are empty.

Note that text boxes with "hide" class are hidden and are used for other purpose.

Please help!!!

Do you want to find empty input's with class hide as well? Also ID's cannot be identical. — Adeel Imran
– Adeel Imran, Commented Dec 12, 2017 at 8:55
You will have to fetch all input. Once you have them, loop over and filter out any and every input that does not satisfy your need. — Rajesh Dixit
– Rajesh Dixit, Commented Dec 12, 2017 at 8:58
@A.Wolff Though an opinionated comment, but instead of giving code, we could explain how to do it and OP can try to figure the code part. If he/she fails then we can give proper code example with explanation. But just my POV — Rajesh Dixit
– Rajesh Dixit, Commented Dec 12, 2017 at 9:01

A.D. · Accepted Answer · 2017-12-12 09:16:44Z

1

You can use this This code will work only for second input.

$('#library_info_tbl tbody').on("keyup", "tr td input:nth-child(2)", function() {
        var oneEmpty = false;
        $("#library_info_tbl tbody tr td input:nth-child(2)").filter(function () {
              return $.trim($(this).val()) == '';
        });
        if(oneEmpty)
        // do something
 });

This code will work only for all input.

$('#library_info_tbl tbody').on("keyup", "tr td input:nth-child(2)", function() {

        if($("#library_info_tbl tbody input:empty").length == $("#library_info_tbl tbody input").length)
        {
        // do something
        }
 });

// Instead of $("#library_info_tbl tbody input:empty") you can also use $("input.hide:empty")

edited Dec 12, 2017 at 9:16

answered Dec 12, 2017 at 9:10

A.D.

2,3722 gold badges17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Soni Rahayu · Accepted Answer · 2017-12-12 08:59:30Z

1

Try this

var allempty = true;
$('.hide').each(function(){
       if($(this).val()!=''){
          allempty = false;
       }else{
          allempty = true;
       }
    });

if(allempty) {
   //this is empty
}

answered Dec 12, 2017 at 8:59

Soni Rahayu

812 bronze badges

1 Comment

Soni Rahayu Over a year ago

it will work for all "hide" class, if you want it works only for textbox, just add another class in the textbox, and replace $('.hide') with $('.otherclass')

Bhavin Solanki · Accepted Answer · 2017-12-12 09:06:30Z

1

you can use input[type=text] as selector :

For i.e. :

var emptyValues = 0;
$('table input[type=text]').each(function(){
   if($(this).val() != ''){
      console.log($(this).val());
      emptyValues = 1;
   }
});
if(emptyValues == 0){
   //enter code here
}

answered Dec 12, 2017 at 9:06

Bhavin Solanki

4,8143 gold badges28 silver badges47 bronze badges

Comments

SmartDev · Accepted Answer · 2017-12-12 09:06:54Z

1

Considering the id of your table is tableId, you could try:

if($("table#tableId input[class!='hide'][value='']").length == $("table#tableId input[class!='hide']").length) {
// do something
}

or simply:

if($("table input[class!='hide'][value='']").length == $("table input[class!='hide']").length) {
// do something
}

answered Dec 12, 2017 at 9:06

SmartDev

2,8821 gold badge20 silver badges23 bronze badges

2 Comments

freelancer Over a year ago

Will it work also for ` ` Blank space ?

SmartDev Over a year ago

No, because ' ' does not mean empty, right? I don't think you can use a selector combined with trim. You should have another approach if you need to check blank spaces also.

freelancer · Accepted Answer · 2017-12-12 09:14:42Z

You can do it by for loop iteration and check each value

function checkEmpty(){
  var elems = $("table input[type=text]");
  var isEmpty = false;
  for(let i=0 ; i < elems.length;i++){
    if($(elems[i]).val().trim() != ''){
      isEmpty = true;
      break;
    }
  }
  $("#isempty").html(isEmpty?'All Not Empty':'All Empty');
  //return isEmpty;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>abc</td>
    <td>781</td>
    <td><input id="barcodedb0" class="hide" type="text" /><input id="barcode0" class="hide" type="text" /></td>
  </tr>
  <tr>
    <td>abc</td>
    <td>781</td>
    <td><input id="barcodedb1" class="hide" type="text" /><input id="barcode1" class="hide" type="text" /></td>
  </tr>
</table>
<input onclick="checkEmpty()" type="button" value="check empty"/>
<div id="isempty"></div>

Care about duplicate id's

Collectives™ on Stack Overflow

How to find that all input text boxes are empty in table?

5 Answers 5

Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related