CODEWITHSUNDEEP
javascriptjqueryhtml
Shaoz
Shaoz

Reputation: 10653

How to stop adding row in tables when there are no values to add in jquery

I'm adding rows in a table with jquery but now I want to stop the addition when the input boxes are empty. For the moment it keeps adding rows even when the boxes are empty. My code below doesn't work, I dont know how to stop it. Can someone help me, please.

Here's my code:

$('#voucher-btn').click(function(e){
    var scratchPan = $('#scratch-panel'),
            serNum = $('#serial-num');

    $('#voucher-list > tbody').append('<tr><td>'
                                      + scratchPan.val() 
                                      +'</td><td>'+ serNum.val() 
                                      +'</td></tr>');

    if($('#scratch-panel').val() === ''|| $('#serial-num').val() === '' ){
        return false;
    }
});

HTML:

<ul>
  <li>
   <label>Scratch Panel</label>
   <input type="text" id="scratch-panel" />
  </li> 
  <li>
   <label>Serial Number</label>
   <input type="text" id="serial-num" />
  </li>
  <li><button id="voucher-btn" type="submit" title="Apply">Apply</button></li>
</ul>

<table id="voucher-list">
<thead>
  <tr>
    <th>$Value One</th><th>$Value Two</th><th>$Value Three</th>
  </tr>
</thead>
<tbody></tbody>

Thank you very much

Upvotes: 0

Views: 1338

Answers (4)

Z. Zlatev
Z. Zlatev

Reputation: 4820

You actually are trying to stop it, but after it has already added a new row. It should be like:

$('#voucher-btn').click(function(e){
    var scratchPan = $('#scratch-panel'),
            serNum = $('#serial-num');

    if ( ! scratchPan.val().length || ! serNum.val().length  ) return; //use return false; only if you need to halt the default behavior of the element

    $('#voucher-list > tbody').append('<tr><td>'
                                      + scratchPan.val() 
                                      +'</td><td>'+ serNum.val() 
                                      +'</td></tr>');
});

Upvotes: 3

Jason Brant
Jason Brant

Reputation: 182

I may be reading this wrong, but shouldn't you check and see if the input boxs are empty -before- you do the addition of the rows to the table? If you put your blank check before your addition and returned if either input box was blank, then it would not add an additional row.

Upvotes: 0

Ruan Mendes
Ruan Mendes

Reputation: 92274

Not sure I understand the question correctly, but I think you should just move your empty check to before you add the row. 

$('#voucher-btn').click(function(e){
    var scratchPan = $('#scratch-panel'),
            serNum = $('#serial-num');

    if(scratchPan.val() === ''|| serNum .val() === '' ){
        return false;
    }
    $('#voucher-list > tbody').append(
       '<tr><td>'+ scratchPan.val() +'</td><td>'+ serNum.val() +'</td></tr>');

});

Upvotes: 3

amp343
amp343

Reputation: 1046

In the function you posted, your condition is evaluated AFTER you have already appended the table rows. So, even if your conditional check finds that the inputs are empty, the table rows have already been added, so it's no help.

To get what you're looking for, you need to move the evaluation:

if($('#scratch-panel').val() === ''|| $('#serial-num').val() === '' ){
    return false;
}

...ABOVE the append statement:

$('#voucher-list > tbody').append('<tr><td>'
                                      + scratchPan.val() 
                                      +'</td><td>'+ serNum.val() 
                                      +'</td></tr>');

Upvotes: 3

Related Questions