年齢範囲の確認

Question

AGE_FROMの入力がAGE_TOを超えないようにする検索パネルの年齢範囲を追加しました。 AGE_TOはまた、AGE_FROMにのみ入力すると正確な年齢が表示されるはずです（明確になるように）。

ここは私のJavaScriptファイルです。それは働いていないと私はそれを動作させる方法や、それをトリガーする方法を考え出す苦労しています：

<script type="text/javascript"> 
    $(document).ready(function() { 
    }); 

    $('#btnAdvanceSearch').click(function() { 
     var age_from = document.getElementById('txtAGE').value; 
     var age_to = document.getElementById('txtTO').value; 

     if (age_from > age_to && age_to !== "") { 
      alert('Invalid Age range!'); 
     } 

    } 
    ) 
</script> 

私は助けのいずれかの種類をいただければと思います。前もって感謝します。 検索ボタンのIDはbtnAdvanceSearchです

Answer 1

入力を整数に解析する必要があります。 d ocument.getElementById（ 'txtAGE'）。value文字列を返します。ですので、整数に変換する必要があります。

$('#btnAdvanceSearch').click(function() { 
 
    var age_from = parseInt(document.getElementById('txtAGE').value); 
 
    var age_to = parseInt(document.getElementById('txtTO').value); 
 

 
    if (age_from > age_to && age_to !== "") { 
 
     alert('Invalid Age range!'); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='text' id='txtAGE'> 
 
<input type='text' id='txtTO'> 
 
<button type='button' id='btnAdvanceSearch'>click</button>

Answer 2

それらの前に+を添加することによりintに入力値を変換します。また、数字のみを許可するように入力type="number"を設定することもできます。

$(function(){ 
 
    $('#btnAdvanceSearch').click(function() { 
 
    var age_from = +$('#txtAGE').val(); 
 
    var age_to = +$('#txtTO').val(); 
 
      
 
    if (age_from > age_to && age) 
 
     alert('Invalid Age range!');     
 
    })  
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type='number' id='txtAGE' placeholder='FROM'/> 
 
<input type='number' id='txtTO' placeholder='TO'/> 
 
<input type='button' id='btnAdvanceSearch' value='Search'/>

Answer 3

私の2セント：

function getAgeRange(from, to) { 
 
    function constructRange(from, to) { 
 
    if (!from || from < 1) { 
 
     return null 
 
    } 
 
    
 
    if (to === '' || from === to) { 
 
     return [from, from] 
 
    } 
 
    
 
    if (from > to) { 
 
     return null 
 
    } 
 
    
 
    return [from, to] 
 
    } 
 
    
 
    var range = constructRange(from, to) 
 
    
 
    if (range) { 
 
    return range.map(function(x) { 
 
     return parseInt(x) 
 
    }) 
 
    } 
 
    
 
    return range 
 
} 
 

 
jQuery(document).ready(function() { 
 
    jQuery('#btnAdvanceSearch').click(function() { 
 
    var from = jQuery('#txtAGE').val() 
 
    var to = jQuery('#txtTO').val() 
 
    \t 
 
    var range = getAgeRange(from, to) 
 
    
 
    if (!range) { 
 
     alert('Invalid Age range!') 
 
     return false 
 
    } 
 
    
 
    if (range[0] == range[1]) { 
 
     alert('Search exact age: ' + range[0]) 
 
     return true 
 
    } 
 
    
 
    alert('Search in age range: ' + range[0] + ' - ' + range[1]) 
 
    return true 
 
    }) 
 
}) 
 

 
// quick tests 
 
assert('Empty fields gives null', getAgeRange('', ''), null) 
 
assert('Age can\'t be 0', getAgeRange('0', ''), null) 
 
assert('Age can\'t be negative', getAgeRange('-1', ''), null) 
 
assert('If only age given, return [age, age]', getAgeRange('1', ''), [1, 1]) 
 
assert('If age equals to, return [age, age]', getAgeRange('1', '1'), [1, 1]) 
 
assert('If to is greater than age, return [age, to]', getAgeRange('1', '2'), [1, 2]) 
 
assert('If age is greater than to, return null', getAgeRange('2', '1'), null) 
 

 

 
function assert(message, x, y) { 
 
    function equals(x, y) { 
 
    if (y== null) { 
 
     return x === y 
 
    } 
 
    
 
    return x.reduce(function(acc, value, key) { 
 
     return value == y[key] 
 
    }, false) 
 
    } 
 
    
 
    if (!equals(x, y)) { 
 
    console.error('Failed: ' + message + '. Expected: ' + x + ' but got ' + y) 
 
    } 
 
    else { 
 
    console.info('Success: ' + message) 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="number" id="txtAGE" /> 
 
    <input type="number" id="txtTO" /> 
 
    <button id="btnAdvanceSearch">Search</button>