jQueryでフォームの値変更がうまくいかない

    <form id="salary_form" name="salary_form">
        <input type="text" id="min">
        <input type="number" id="max">
     <input type="hidden" name="s" id="salary_range">
        <input type="submit">
    </form>

上記のような金額の下限と上限を入力するフォームがあり、

$('#salary_form').submit(function(){
        var min = $('#min').val();
        var max = $('#max').val();

        if(min === '' && max === ''){
            $('#salary_range').remove();
        }
        else if(min !== '' && max !== ''){
            if(min > max){
                $('#salary_range').val(max + '__' + min);
            } else {
                $('#salary_range').val(min + '__' + max);
            }
        }
        else if(min !== '' && max === ''){
            $('#salary_range').val(min + '__' + max);
        }
        else if(min === '' && max !== ''){
            $('#salary_range').val(min + '__' + max);
        }
    });

のようにサブミットボタンを押すと入力された上限と下限を整形してhiddenのvalueに挿入されるようにしました。
jQueryの４つにわかれている条件分岐の中で唯一２段めの

if(min !== '' && max !== ''){
            if(min > max){

の部分がうまく動作しません。いつでも動作しないわけではなく、したりしなかったりという状況です。
これは、下限と上限とも空白ではなく数値が入力された状態で、かつ上限よりも下限のほうが大きい時に

$('#salary_range').val(max + '__' + min);

mixとmaxを入れ替えて表示するようにしたかったのですが、入れ替わらずに(min + '__' + max)で表示されます。例をあげると
下限100、上限5で入力された場合下限が上限よりも大きいので下限と上限をいれかえて(5__100)と表示したいのに(100__5)と表示されます。
そしてさきほども言及しましたがこれが予想通り動作したりしなかったりします。
なにが問題なのでしょう？？

s-show

2017/04/29 13:56

「金額の下限と上限を入力」とありますが、 <input type="number" id="min"> ではなく <input type="text" id="min"> にしている理由はどのようなものでしょうか？　これだと、半角数値以外が入力される恐れがあり、入力された値のチェックに一手間かける必要が生じます（JSでは全角数値は数値として扱われません）。

行動規範の内容に同意します

回答2件

ベストアンサー

文字列を整数に直さず文字列のまま比較しているからではないかと思うので、parseInt関数で整数に直すことで解決すると思いますが、いかがでしょうか？

HTML
1<html>
2<head>
3    <meta charset="UTF8">
4    <title>タイトル</title>
5    <style type="text/css">
6        * {
7            margin: 0;
8            padding: 0;
9        }
10
11        .bar2 {
12            width: 210px;
13            height: 280px;
14            font-size: 14px;
15            display: inline-block;
16            background-color: #fff2de;
17            position: relative;
18        }
19
20        .opinion {
21            position: absolute;
22            top: 5px;
23            left: 70px;
24        }
25
26        .text {
27            position: absolute;
28            top: 50px;
29            left: 15px;
30            height: 170px;
31        }
32
33        .submit {
34            position: absolute;
35            top: 85%;
36            left: 37%;
37        }
38    </style>
39</head>
40<body>
41<form id="salary_form" name="salary_form">
42    <input type="text" id="min">
43    <input type="number" id="max">
44    <input type="text" name="s" id="salary_range">
45    <input type="submit">
46</form>
47<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
48<script>
49    $('#salary_form').submit(function () {
50        var min = $('#min').val();
51        var max = $('#max').val();
52
53        if (min === '' && max === '') {
54            $('#salary_range').remove();
55        }
56        else if (min !== '' && max !== '') {
57            if (parseInt(min) > parseInt(max)) {
58                $('#salary_range').val(max + '__' + min);
59            } else {
60                $('#salary_range').val(min + '__' + max);
61            }
62        }
63        else if (min !== '' && max === '') {
64            $('#salary_range').val(min + '__' + max);
65        }
66        else if (min === '' && max !== '') {
67            $('#salary_range').val(min + '__' + max);
68        }
69        return false;
70    });
71</script>
72</body>