jQuery 文字数制限を行う

jQuery

文字数制限を100文字以内、AjaxでAPIに送信するという内容

jQuery

$(function() {
    // 初期状態はアラートを隠す
    $('#count_allert').hide();

    // 100文字制限の入力フォーム
    $('#weapon_textarea').on('input', function() {
        var cnt = $(this).val().length;
        if (101 > cnt) {
            $('#save').fadeIn();
            $('#count_allert').hide();
        } else {
            $('#save').fadeOut();
            $('#count_allert').show();
        }
    });
});





$("#save").click(function() {
 // CSRFトークンの取得
 $.ajaxSetup({
     timeout: 3000,
     headers: {
         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
     }
 });

 // 変数設定
 var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
 var weapon = $('textarea[name="weapon"]').val();


 // Ajax設定 ============================================================================
 $.ajax({
             type:     'get',
             datatype: 'json',
             url:      '/saveWeaponAjax',
             timeout:  3000,
             data: {
                 _token: CSRF_TOKEN,    
                 userId: userId,        
                 userWeapon:  userWeapon
             }
 })

 // Ajax成功時の処理 ===========================
 .done(function(data,textStatus,jqXHR) {
     location.reload();
 })
 // Ajax通信失敗時の処理 ========================
 .fail(function(data) {
     console.log('saveWeaponAjax() Ajax Error');
 });
});

HTML

<textarea style="width:600px; height:200px;" name="weapon" id="weapon_textarea" placeholder="100文字まで入力できます"></textarea>
<span id="count_allert" style="font-size:12px; color:red">文字数制限を超えました。</span>

<div class="submit">
    <a href="" id="cancel">キャンセル</a>
    <a href="" id="save">保存する</a>
</div>