jQuery - Check empty inputs works but only checks first row in table

Question

I have a table with cells that contain inputs, textareas and selects, and I've used a function to check that the values of these are not empty, which works fine for the first row, but doesn't perform the check for each row in the table, even though I've selected the inputs via the row class they are within (example: $('tr.invoiceItems input').

Any idea how I could ensure that this passes over each row in the table and not just the first?

HTML for first row (using Handlebars templating). Automatically added on page load before others inserted:

{{#each Items}}

    <tr class="invoiceItems">

        <td style="display:none" class="invoiceItemId" value="{{Id}}">{{Id}}</td>

        <td class="descriptionColumn" style="height: 18.5667px">

            <input class="descriptionInput" style="resize:none; margin: 0" rows="1" value="{{Description}}"></input>

        </td>

        <td class="nominalColumn">

            <select class="nominalInput">

                <option value="{{NominalId}}" selected>{{NominalName}}</option>

            </select>

        </td>

        <td class="quantityColumn">

            <input type="number" class="quantityInput" value="{{Quantity}}"></input>

        </td>

        <td class="unitPriceColumn">

            <input type="text" class="unitPriceInput alignRight" value="{{UnitPrice.BaseValue}}"></input>

        </td>

        <td class="subtotalColumn inputDisabled">

            <input type="text" class="itemSubtotal alignRight" value="{{Subtotal.BaseValue}}" disabled></input>

        </td>

        <td class="taxCodeColumn" style="text-align:left; margin-left:4px; padding-left:0;">

            <select class="taxCodeInput">

                <option value="{{TaxCodeId}}" selected>{{TaxCodeName}}</option>

            </select>

        </td>

        <td style="display:none">

            <input class="itemTaxCodeId" value="{{TaxCodeId}}" disabled></input>

        </td>

        <td style="display:none" class="inputDisabled">

            <input type="number" class="itemTaxRate" value="{{TaxRate}}" disabled></input>

        </td>

        <td class="taxValueColumn inputDisabled">

            <input type="text" class="itemTaxValue inputDisabled alignRight" value="{{Tax.BaseValue}}" disabled></input>

        </td>

        <td class="deleteItemColumn">

            <div>

                <a class="deleteInvoiceItem" href="#"><span class="fa fa-times fa-lg"></span></a>

            </div>

        </td>

    </tr>

    {{/each}}

HTML for additional rows added later on click handler:

<tr class="invoiceItems">

<td class="descriptionColumn">

    <input class="descriptionInput editInvoiceItemDescription" style="resize:none" placeholder="Item Description" value=""></input>

</td>

<td style="text-align:left; margin-left:10px; padding-left:0;" class="nominalColumn">

    <select class="nominalInput">

        <option id="defaultNominal" value="">Select Nominal</option>

    </select>

    </td>

<td class="quantityColumn">

    <input type="number" class="quantityInput" placeholder="0" value=""></input>

</td>

<td class="unitPriceColumn">

    <input type="text" class="unitPriceInput alignRight" placeholder="0.00" value=""></input>

</td>

<td class="subtotalColumn inputDisabled">

    <input type="text" class="itemSubtotal inputDisabled alignRight" disabled value="0.00"></input>

</td>

<td class="taxCodeColumn" style="text-align:left; margin-left:4px; padding-left:0;">

    <select class="taxCodeInput">

        <option id="defaultTaxCode" value="">Select Tax Code</option>

    </select>

</td>

<td style="display:none">

    <input class="itemTaxCodeId inputDisabled" disabled></input>

</td>

<td style="display:none">

    <input type="number" class="itemTaxRate inputDisabled" disabled></input>

</td>

<td class="taxValueColumn inputDisabled">

    <input type="text" class="itemTaxValue inputDisabled alignRight" disabled value="0.00"></input>

</td>

<td class="deleteItemColumn">

    <a class="deleteInvoiceItem" href="#"><span class="fa fa-times fa-lg"></span></a>

</td>

JS:

$('#saveInvoice').click(function(e) {
    e.preventDefault();
    var $fields = [ $('tr.invoiceItems input'), $('tr.invoiceItems textarea'), $('tr.invoiceItems select') ];
    var $emptyFields = $fields.filter(function(element) {
        return $.trim(element.val()) === '';
    });
    if (!$emptyFields.length) {
        saveInvoice();
    } else {
        alert('Unable to save invoice. There are incomplete item fields.');
    }
});

Please show us your html code

JensV
– JensV

2017-06-27 11:36:57 +00:00
Commented Jun 27, 2017 at 11:36 — JensV
– JensV, Commented Jun 27, 2017 at 11:36
Done. Sorry, forgot to add

user7138187
– user7138187

2017-06-27 11:40:27 +00:00
Commented Jun 27, 2017 at 11:40 — user7138187
– user7138187, Commented Jun 27, 2017 at 11:40

Gokulan P H · Accepted Answer · 2017-06-27 12:22:04Z

2

Try replacing your script with this it should work.

   $('#saveInvoice').click(function(e) {
            e.preventDefault();
             var $fields = [ $('tr.invoiceItems input'), $('tr.invoiceItems textarea'), $('tr.invoiceItems select') ]
            var $emptyFields;

            for(var i=0;i< $fields.length;i++){
            $emptyFields = $fields[i].filter(function(i,element) {
                return $.trim($(this).val()) === '';
            });
            if ($emptyFields.length) 
            break;
            }
            if (!$emptyFields.length) {
              saveInvoice();
            } else {
                alert('Unable to save invoice. There are incomplete item fields.');
            }
        });

Working Fiddle here: https://jsfiddle.net/20fsvkjg/

answered Jun 27, 2017 at 12:22

Gokulan P H

1,9161 gold badge12 silver badges13 bronze badges

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

5 Comments

user7138187 Over a year ago

Works mostly, but for some reason is ignoring empty .descriptionInput

Gokulan P H Over a year ago

Can you please create a fiddle for your scenario so that I can help you better.

user7138187 Over a year ago

Have done here for you: jsfiddle.net/qe1gcfu1/3, but for some reason clicking on save is doing nothing at all, even with jquery loaded

Gokulan P H Over a year ago

jsfiddle.net/kq9xy07u I have altered this fiddle, just check whether its ok for you.

user7138187 Over a year ago

Okay, not sure why it wasn't working for me earlier but seems to be now. Thanks a lot

Collectives™ on Stack Overflow

jQuery - Check empty inputs works but only checks first row in table

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related