条件が自分の値を検証していない場合

Question

条件を満たしていない値を取得しようとしている場合（GETをクリック）、条件を満たしてから最後のテーブルに行を追加します。それを修正するには？

$(document).ready(function(){ 
 
var a=''; 
 
var b=''; 
 
var c=''; 
 
var d=''; 
 
$('#getrow').click(function(){ 
 
a = $('#empname').val(); 
 
b = $('#age option:selected').val(); 
 
c = $('#gender option:selected').val(); 
 
d = $('#salary option:selected').val(); 
 

 
if(a!=null && b!=null && c!=null && d!=null){ 
 
    alert('Passed'); 
 
    //alert(a+" "+b+" "+c+" "+d); 
 
    $('#final').append('<tr height=\"25\"><td>'+a+'</td><td>'+b+'</td><td>'+c+'</td><td>'+d+'</td></tr>'); 
 

 
    $('#empname').val(' '); 
 
    $('#age').val(' '); 
 
    $('#gender').val(' '); 
 
    $('#salary').val(' '); 
 
} 
 
    else{ 
 
    alert('Failed'); 
 
    } 
 
    
 

 
}); 
 
});

table,tr,th,td{ 
 
     border:1px solid #dddddd; 
 
     border-collapse:collapse; 
 
    } 
 
\t .td-bg{ 
 
\t background:#006597; 
 
\t color:#fff; 
 
\t opacity:0.7; 
 
\t cursor:pointer; 
 
\t } 
 
\t .block-header{ 
 
\t background:#006597; 
 
\t color:#fff; 
 
\t 
 
\t } 
 
\t .block-header th{ 
 
\t text-align:center; 
 
\t } 
 
\t .active{ 
 
\t background:#006597; 
 
\t color:#fff; 
 
\t } 
 
\t .addrow{ 
 
\t width:10%; 
 
\t height:100px; 
 
\t background:#006597; 
 
\t float:left; 
 
\t text-align:center; 
 
\t color:#fff; 
 
\t line-height:100px; 
 
\t cursor:pointer; 
 
\t word-wrap: break-word; 
 
\t overflow:hidden; 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table style="width:45%; float:left;" id="table-txt"> 
 
     <tr height="25" class="block-header"> 
 
     <th width="25%">Name</th> 
 
     <th width="25%">Age</th> 
 
     <th width="25%">Gender</th> 
 
     <th width="25%">Salary</th> 
 
     </tr> 
 
     <tr height="25"> 
 
     <td><input type="text" style="width:100%;" id="empname" placeholder="EMP Name"/></td> 
 
     <td><select style="width:100%;" id="age"><option disabled selected>Select Age</option><option>20+</option></select></td> 
 
     <td><select style="width:100%;" id="gender"><option disabled selected>Select Gender</option><option>Male</option><option>Female</option></select></td> 
 
     <td><select style="width:100%;" id="salary"><option disabled selected>Select Salary</option><option>4LPM+</option><option>5LPM+</option></select></td> 
 
     </tr> 
 
     </table> 
 
\t <div class="addrow" id="getrow">GET RECORD</div> 
 
\t <table style="width:45%; float:right;" id="final"> 
 
     <tr height="25" class="block-header"> 
 
     <th width="25%">Name</th> 
 
     <th width="25%">Age</th> 
 
     <th width="25%">Gender</th> 
 
     <th width="25%">Salary</th> 
 
     </tr> 
 

 
     
 
     
 
     </table>

Answer 1

if (a.trim()) { 
    // is not empty or whitespace 
} 

$(document).ready(function(){ 
 
var a=''; 
 
var b=''; 
 
var c=''; 
 
var d=''; 
 
$('#getrow').click(function(){ 
 
a = $('#empname').val(); 
 
b = $('#age option:selected').val(); 
 
c = $('#gender option:selected').val(); 
 
d = $('#salary option:selected').val(); 
 

 
if(a.trim() && b.trim() && c.trim() && d.trim()){ 
 
    alert('Passed'); 
 
    //alert(a+" "+b+" "+c+" "+d); 
 
    $('#final').append('<tr height=\"25\"><td>'+a+'</td><td>'+b+'</td><td>'+c+'</td><td>'+d+'</td></tr>'); 
 

 
    $('#empname').val(' '); 
 
    $('#age').val(' '); 
 
    $('#gender').val(' '); 
 
    $('#salary').val(' '); 
 
} 
 
    else{ 
 
    alert('Failed'); 
 
    } 
 
    
 

 
}); 
 
});

table,tr,th,td{ 
 
     border:1px solid #dddddd; 
 
     border-collapse:collapse; 
 
    } 
 
\t .td-bg{ 
 
\t background:#006597; 
 
\t color:#fff; 
 
\t opacity:0.7; 
 
\t cursor:pointer; 
 
\t } 
 
\t .block-header{ 
 
\t background:#006597; 
 
\t color:#fff; 
 
\t 
 
\t } 
 
\t .block-header th{ 
 
\t text-align:center; 
 
\t } 
 
\t .active{ 
 
\t background:#006597; 
 
\t color:#fff; 
 
\t } 
 
\t .addrow{ 
 
\t width:10%; 
 
\t height:100px; 
 
\t background:#006597; 
 
\t float:left; 
 
\t text-align:center; 
 
\t color:#fff; 
 
\t line-height:100px; 
 
\t cursor:pointer; 
 
\t word-wrap: break-word; 
 
\t overflow:hidden; 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table style="width:45%; float:left;" id="table-txt"> 
 
     <tr height="25" class="block-header"> 
 
     <th width="25%">Name</th> 
 
     <th width="25%">Age</th> 
 
     <th width="25%">Gender</th> 
 
     <th width="25%">Salary</th> 
 
     </tr> 
 
     <tr height="25"> 
 
     <td><input type="text" style="width:100%;" id="empname" placeholder="EMP Name"/></td> 
 
     <td><select style="width:100%;" id="age"><option disabled value='' selected>Select Age</option><option>20+</option></select></td> 
 
     <td><select style="width:100%;" id="gender"><option disabled value='' selected>Select Gender</option><option>Male</option><option>Female</option></select></td> 
 
     <td><select style="width:100%;" id="salary"><option disabled value='' selected>Select Salary</option><option>4LPM+</option><option>5LPM+</option></select></td> 
 
     </tr> 
 
     </table> 
 
\t <div class="addrow" id="getrow">GET RECORD</div> 
 
\t <table style="width:45%; float:right;" id="final"> 
 
     <tr height="25" class="block-header"> 
 
     <th width="25%">Name</th> 
 
     <th width="25%">Age</th> 
 
     <th width="25%">Gender</th> 
 
     <th width="25%">Salary</th> 
 
     </tr> 
 

 
     
 
     
 
     </table>