CODEWITHSUNDEEP
javascriptjquery
Sunil Chaudhary
Sunil Chaudhary

Reputation: 407

How to check if all textboxes in a row are filled using jquery

I have 3 textboxes in each row. At least one of the rows should be filled completely. All the textboxes in any of the rows should not be empty. I have tried below code, it's for the first row only.

var filledtextboxes= $(".setup_series_form tr:first input:text").filter(function () {
  return $.trim($(this).val()) != '';
}).length;

We want to get the maximum number of non-empty textboxes in any row, TIA.

enter image description here

Upvotes: 0

Views: 449

Answers (2)

NullPointer
NullPointer

Reputation: 7368

You are targeting only first tr here $(".setup_series_form tr:first input:text") so you will not get the expected output.

You have to iterate with every row(tr) inside form and then find the count of text field having not empty values and store in a maxCount variable by comparing it previous tr count.

Here is a working snippet:

$(document).ready(function() {      
    var maxCountInRow =0;
    var rowNumber;
    $(".setup_series_form tr").each(function(index){                        
        var filledtextboxes= $(this).find("input:text").filter(function () {
        return $.trim($(this).val()) != '';
    }).length;
     if(filledtextboxes>maxCountInRow){
     maxCountInRow=filledtextboxes;
     rowNumber=index;
     }
     });  
     console.log("Row Number:"+rowNumber+" having maxCount: "+maxCountInRow);
 
});
.registrant_table{width: 100%;border: 1px solid #ccc;text-align: center;}
.registrant_table tr td{border: 1px solid #ccc;height: 42px;font-weight: bolder;}
.registrant_table input{border: 0px !important;width: 100%;height: 42px;text-align: center;font-weight: normal;}
label.error{color: red !important;}
.err-fields{background-color:red;color: white !important;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="setup_series_form">
<div>
    <table class="registrant_table">
        <tr class="title">
            <td>No</td>
            <td>Official Full Name</td>
            <td>Mobile Contact</td>
            <td>Email</td>
        </tr>
        <tr class="in-fields">
            <td>1</td>
            <td><input type="text" value="sas" name="firstname[]"></td>
            <td><input type="text" value="" name="phone[]"></td>
            <td><input type="text" value="" name="email[]"></td>
        </tr>
        <tr class="in-fields">
            <td>2</td>
            <td><input type="text" value="sas" name="firstname[]"></td>
            <td><input type="text" value="sas" name="phone[]"></td>
            <td><input type="text" name="email[]"></td>
        </tr>
        <tr class="in-fields">
            <td>3</td>
            <td><input type="text" name="firstname[]"></td>
            <td><input type="text" name="phone[]"></td>
            <td><input type="text" name="email[]"></td>
        </tr>                   
    </table>
</div>
</form>

Upvotes: 1

Barmar
Barmar

Reputation: 780974

Loop through all the rows. In each row, get the number of filled boxes. If this is higher than the previous maximum, replace the maximum with this count.

var maxboxes = -1;
var maxrow;
$(".setup_series_form tr").each(function(i) {
    var filledtextboxes = $(this).find("input:text").filter(function () {
      return $.trim($(this).val()) != '';
    }).length;
    if (filledtextboxes > maxboxes) {
        maxboxes = filledtextboxes;
        maxrow = i;
    }
});

Upvotes: 1

Related Questions