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');

    $('#v开发者_StackOverflowoucher-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

---

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>');

});

---

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>');

---

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>');
});

---

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.