タグ: jQuery

jQuery通貨区切り・正規表現

2020年4月28日2020年4月28日 | by 優 | にコメントを残す

フォームに入力した時に通貨に自動で区切り文字を行う

1000000
↓
1,000,000

1000000

↓

1,000,000

jQuery

function addCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

function addCommas(x) {

return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

}

x.toString() 正規表現使うのでString型に変換しているよ！🐱

$("input:text[numberOnly]").on("keyup", function() {
    $(this).val(addCommas($(this).val().replace(/[^0-9]/g,"")));
});

$("input:text[numberOnly]").on("keyup", function() {

$(this).val(addCommas($(this).val().replace(/[^0-9]/g,"")));

});

input ty …

の続きを読む

JavaScript

jQuery 値・配列の取得・削除

2020年4月16日2020年4月18日 | by 優 | にコメントを残す

値の取得値を１つだけ取得する JS

var section_id = $('#select_section').val();

1	var section_id = $('#select_section').val();

HTML(Laravel Brade)

<select class="form-control" id="select_section" name="section_id">
    @foreach ($sections as $section)
        <option value="{{ $section->section_id }}">{{ $section->section_name }}</option>
    @endforeach
</select>

@foreach ($sections as $section)

<option value="{{ $section->section_id }}">{{ $section->section_name }}</option>

@endforeach

</select>

配列の値を取得 SELECTボックス複数のSELECTボックスで選択されている同名クラスの値を取得する [crayon-5f2a32 …

の続きを読む

API

jQuery Ajaxの雛形

2020年4月14日2020年4月23日 | by 優 | にコメントを残す

よく使うので雛形をメモしておく #select_userのセレクトボックスで選んだ時に処理が行われる時の例

$("#select_user").change(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 user_id = $('#select_user').val();

        // Ajax設定 ============================================================================
        $.ajax({
                    type:     'get',
                    datatype: 'json',
                    url:      '/getUsers', // パス
                    timeout:  3000,
                    data: {
                        _token:         CSRF_TOKEN,    // CSRFトークン
                        user_id: user_id               // ユーザid
                    }
        })

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

$("#select_user").change(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 user_id = $('#select_user').val();

// Ajax設定 ============================================================================

$.ajax({

type: 'get',

datatype: 'json',

url: '/getUsers', // パス

timeout: 3000,

data: {

_token: CSRF_TOKEN, // CSRFトークン

user_id: user_id // ユーザid

}

})

// Ajax成功時の処理 ===========================

.done(function(data,textStatus,jqXHR) {

console.log(data);

})

// Ajax通信失敗時の処理 ========================

.fail(function(data) {

console.log('Ajax Error');

});

実際の利用例同じ処理が必要な場面があったので共通化した

    /**
    * セレクトした部署に所属するメンバーをAjaxで取得する
    */
    function getSectionStaffs()
    {
        // CSRFトークンの取得
        $.ajaxSetup({
            timeout: 3000,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        // 変数設定
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
        var section_id = $('#select_section').val();
        // Ajax設定 ============================================================================
        $.ajax({
                    type:     'get',
                    datatype: 'json',
                    url:      '/getSectionStaffs',
                    timeout:  3000,
                    data: {
                        _token: CSRF_TOKEN,    // CSRFトークン
                        section_id: section_id   // 部署id
                    }
        })
        // Ajax成功時の処理 ===========================
        .done(function(data,textStatus,jqXHR) {
            $.each(data, function(index, value) {
                $(".section_staffs").last().append($("<option>").val(index).text(value));
            })
            console.log(data);
        })
        // Ajax通信失敗時の処理 ========================
        .fail(function(data) {
            console.log('Ajax Error');
        });
    }

/**

* セレクトした部署に所属するメンバーをAjaxで取得する

function getSectionStaffs()

{

// CSRFトークンの取得

$.ajaxSetup({

timeout: 3000,

headers: {

'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

}

});

// 変数設定

var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

var section_id = $('#select_section').val();

// Ajax設定 ============================================================================

$.ajax({

type: 'get',

datatype: 'json',

url: '/getSectionStaffs',

timeout: 3000,

data: {

_token: CSRF_TOKEN, // CSRFトークン

section_id: section_id // 部署id

}

})

// Ajax成功時の処理 ===========================

.done(function(data,textStatus,jqXHR) {

$.each(data, function(index, value) {

$(".section_staffs").last().append($("<option>").val(index).text(value));

})

console.log(data);

})

// Ajax通信失敗時の処理 ========================

.fail(function(data) {

console.log('Ajax Error');

});

}

    /**
    * 各メンバーの目標設定項目を追加する
    */
    function addPersonTargetAmount() {
        var html = $("#appendStaff").html();
        $("#per_amount_add").append(html);
        getSectionStaffs();
    }

    /**
    * 部署のセレクトボックスを変更した時に所属するメンバーを更新する
    */
    $("#select_section").change(function() {
        $(".staff").remove();
        $('select.section_staffs').children().remove();
        getSectionStaffs();
    });

/**

* 各メンバーの目標設定項目を追加する

function addPersonTargetAmount() {

var html = $("#appendStaff").html();

$("#per_amount_add").append(html);

getSectionStaffs();

}

/**

* 部署のセレクトボックスを変更した時に所属するメンバーを更新する

$("#select_section").change(function() {

$(".staff").remove();

$('select.section_staffs').children().remove();

getSectionStaffs();

});

&nbs …

の続きを読む

JavaScript

ボタンを押すことでデータを取得する

2019年5月27日2020年5月27日 | by 優 | にコメントを残す

jQuery

$(".btn_right").click(function() {
    userId = $(this).data('id');
    userWeapon = $(this).data('weapon');
});

$(".btn_right").click(function() {

userId = $(this).data('id');

userWeapon = $(this).data('weapon');

});

HTML

<span class="btn_right" ><a href="" data-id="150" data-weapon="柔術">ボタン</a></span>

1	<span class="btn_right" ><a href="" data-id="150" data-weapon="柔術">ボタン</a></span>

[YouTube] IT速報よわよわエンジニア優さん 5年後のキャリアについて現役WEBエンジニアが語る童貞を救いたいナンパのすすめ最強ナンパ師優さん恥ずかしい？それ、ゴミだからwww 失恋の …

の続きを読む

JavaScript

jQuery モーダルウィンドウ背景が黒くなるやつ

2019年3月23日2020年5月27日 | by 優 | にコメントを残す

CSS

    /** モーダルを作成**/
    .modal {
	display: none;
	position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
	}
    .modal_bg {
	background-color:rgba(30,51,77,0.9);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
    }
    .modal_container {
        background-image: url('{{asset('/home/images/bg2.png')}}');
        background-repeat: repeat-y;
        position: absolute;
        width: 1200px;
        top: 10%;
    }

/** モーダルを作成**/

.modal {

display: none;

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100vh;

}

.modal_bg {

background-color:rgba(30,51,77,0.9);

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100vh;

}

.modal_container {

background-image: url('{{asset('/home/images/bg2.png')}}');

background-repeat: repeat-y;

position: absolute;

width: 1200px;

top: 10%;

}

.modal_containerが重要

    .modal_bg {
	background-color:rgba(30,51,77,0.9);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
    }
    .modal_container {
        background-image: url('{{asset('./images/bg2.png')}}');
        background-repeat: repeat-y;
        position: absolute;
        width: 1200px;
        top: 10%;
    }

.modal_bg {

background-color:rgba(30,51,77,0.9);

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100vh;

}

.modal_container {

background-image: url('{{asset('./images/bg2.png')}}');

background-repeat: repeat-y;

position: absolute;

width: 1200px;

top: 10%;

}

HTML

<div class="btn_more_quest js_modal_quest_open"><a href="#">もっと見る</a></div>


<div class="modal js_modal_quest">
  <div class="modal_bg js_modal_close"></div>
      <div class="modal_container">
        <div class="bg-inner">
          <h4>進行中のクエスト<div class="btn_more_quest js_modal_close"><a href="#">閉じる</a></div></h4>
          <div class="wide_table_container">
            <table class="wide_table">
              <tr><th width="27%">クエスト名</th><th width="13%">勇者</th><th width="10%">攻略状況</th><th>未踏</th><th style="text-align: right;"><div class="label_bar_container"><div class="label_bar_gross_profit"></div> 予想粗利 <div class="label_bar_sales"></div> 売上</div></th></tr>
              <tr><td>にゃんにゃんランド</td><td>優さん</td><td>3500万</td><td colspan="2"><div class="bar_gross_profit" style="max-width: 50%"></div><div class="bar_sales" style="max-width: 50%"></div></td></tr>
              <tr><td>わんわんランド</td><td>鈴木</td><td>2500万</td><td colspan="2"><div class="bar_gross_profit" style="max-width: 75%"></div><div class="bar_sales" style="max-width: 10%"></div></td></tr>
              <tr><td>魔界</td><td>田中</td><td>2000万</td><td colspan="2"><div class="bar_gross_profit" style="max-width: 30%"></div><div class="bar_sales" style="max-width: 50%"></div></td></tr>
            </table>
          </div>
        </div>
      </div>
  </div>
</div>

<div class="btn_more_quest js_modal_quest_open"><a href="#">もっと見る</a></div>

<h4>進行中のクエスト<div class="btn_more_quest js_modal_close"><a href="#">閉じる</a></div></h4>

<tr><th width="27%">クエスト名</th><th width="13%">勇者</th><th width="10%">攻略状況</th><th>未踏</th><th style="text-align: right;"><div class="label_bar_container"><div class="label_bar_gross_profit"></div> 予想粗利 <div class="label_bar_sales"></div> 売上</div></th></tr>

<tr><td>にゃんにゃんランド</td><td>優さん</td><td>3500万</td><td colspan="2"><div class="bar_gross_profit" style="max-width: 50%"></div><div class="bar_sales" style="max-width: 50%"></div></td></tr>

<tr><td>わんわんランド</td><td>鈴木</td><td>2500万</td><td colspan="2"><div class="bar_gross_profit" style="max-width: 75%"></div><div class="bar_sales" style="max-width: 10%"></div></td></tr>

</table>

</div>

jQuery [crayon-5f2a329801da7175947733 …

の続きを読む

未分類

iframeの高さの自動調整

2017年12月3日2018年12月4日 | by 優 | にコメントを残す

共通コンテンツのSEO対策で実装すべてのiframeを対象にせず、iframe1のidがあるiframeのみ反映させる html

<iframe src="読み込み先パス" frameborder="0" width="100%" scrolling="no" id="iframe1"></iframe>

1	<iframe src="読み込み先パス" frameborder="0" width="100%" scrolling="no" id="iframe1"></iframe>

Widthは100%で高さはjQueryから取得する jQuery [crayon-5f2a3298023d35206 …

の続きを読む

PHP

Ajax jQuery 基本フォーム処理

2017年11月11日2017年11月11日 | by 優 | にコメントを残す

DEMO index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML 5 complete</title>
<link rel="stylesheet" href="css/styles.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
        $('#button').click(function(){
                $.get('api.php', {
                        name   : $('#name').val(),
                        email  : $('#email').val(),
                        goiken : $('#goiken').val(),
                }, function(data){
                        $('#result').html(data.message);
                });
        });

});
</script>

<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<label>お名前</label>
<input type="text" id="name" name="name" value=""><br/>
<label>Eメールアドレス</label>
<input type="text" id="email" name="email" value=""><br/>
<label>ご意見</label>
<textarea id="goiken" name="goiken" value=""></textarea><br/>

<hr/>
<button id="button">Ajax</button>

<p id="result"></p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>HTML 5 complete</title>

<!--[if IE]>

<![endif]-->

$(function(){

$('#button').click(function(){

$.get('api.php', {

name : $('#name').val(),

email : $('#email').val(),

goiken : $('#goiken').val(),

}, function(data){

$('#result').html(data.message);

});

</script>

<style>

article, aside, dialog, figure, footer, header,

hgroup, menu, nav, section { display: block; }

</style>

</head>

<body>

<label>Eメールアドレス</label>

<hr/>

</body>

</html>

api.php

<?php

$ret = array(
                "name"      => htmlspecialchars("{$_GET['name']}", ENT_QUOTES, "utf-8"),
                "email"     => htmlspecialchars("{$_GET['email']}", ENT_QUOTES, "utf-8"),
                "goiken"    => htmlspecialchars("{$_GET['goiken']}", ENT_QUOTES, "utf-8"),
                "message"   => htmlspecialchars("お名前：{$_GET['name']}, Email:{$_GET['email']}, ご意見:{$_GET['goiken']}", ENT_QUOTES, "utf-8")
       );

header( 'Content-Type: application/json; charset=utf-8' );
echo json_encode( $ret );

<?php

$ret = array(

"name" => htmlspecialchars("{$_GET['name']}", ENT_QUOTES, "utf-8"),

"email" => htmlspecialchars("{$_GET['email']}", ENT_QUOTES, "utf-8"),

"goiken" => htmlspecialchars("{$_GET['goiken']}", ENT_QUOTES, "utf-8"),

"message" => htmlspecialchars("お名前：{$_GET['name']}, Email:{$_GET['email']}, ご意見:{$_GET['goiken']}", ENT_QUOTES, "utf-8")

);

header( 'Content-Type: application/json; charset=utf-8' );

echo json_encode( $ret );

[YouTube] IT速報よわよわエンジニア優さん 5年後のキャリアについて現役WEBエンジニアが語る童貞を救いたいナンパのすす …

の続きを読む

PHP

シンプルフォームAPI

2017年11月9日2017年11月11日 | by 優 | にコメントを残す

DEMO index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Simple API Form Ajax</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
        $("#submit").click(function()
        {
                var falseFlag = 0;

                if( document.getElementById('yourName').value == '' )
                {
                        falseFlag = 1;
                }

                if( document.getElementById('email').value == '' )
                {
                        falseFlag = 1;
                }

                if( document.getElementById('goiken').value == '' )
                {
                        falseFlag = 1;
                }

                if(falseFlag == 1)
                {
                        window.alert("未入力の項目がありますよ！");
                        return false;
                }

                $.ajax({
                        url: 'api.php',
                        type: 'post',
                        dataType: 'json',
                        data: {
                                yourName : $('#yourName').val(),
                                email    : $('#email').val(),
                                goiken   : $('#goiken').val()
                        },
                })
                .done(function(response){
                        // フォームデータ表示の削除
                        $('#yourName').val('');
                        $('#email').val('');
                        $('#goiken').val('');

                        // APIに返されたデータを受け取り表示する
                        $('#result').append(response.data);


                        $('#message').append('<strong style="color : green;">ご応募有難う御座います。<strong>');
                })
                .fail(function(){
                        $('#message').append('<strong style="color : red;">送信に失敗しました。時間を置いてもう一度お試し下さい。</strong>');
                })

        });
});
</script>

<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }


</style>
</head>
<body>
        <lable>お名前</label>
        <input type="text" id="yourName" name="yourName" value=""><br/>
        <lable>メールアドレス</label>
        <input type="text" id="email" name="email" value=""><br/>
        <lable>ご意見</label>
        <textarea id="goiken" name="goiken" value=""></textarea><br/>
        <input type="button" id="submit" value="送信"><br/>

        <div id="result" value=""></div>
        <div id="message"></div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Simple API Form Ajax</title>

<!--[if IE]>

<![endif]-->

$(function() {

$("#submit").click(function()

{

var falseFlag = 0;

if( document.getElementById('yourName').value == '' )

{

falseFlag = 1;

}

if( document.getElementById('email').value == '' )

{

falseFlag = 1;

}

if( document.getElementById('goiken').value == '' )

{

falseFlag = 1;

}

if(falseFlag == 1)

{

window.alert("未入力の項目がありますよ！");

return false;

}

$.ajax({

url: 'api.php',

type: 'post',

dataType: 'json',

data: {

yourName : $('#yourName').val(),

email : $('#email').val(),

goiken : $('#goiken').val()

})

.done(function(response){

// フォームデータ表示の削除

$('#yourName').val('');

$('#email').val('');

$('#goiken').val('');

// APIに返されたデータを受け取り表示する

$('#result').append(response.data);

$('#message').append('<strong style="color : green;">ご応募有難う御座います。<strong>');

})

.fail(function(){

$('#message').append('<strong style="color : red;">送信に失敗しました。時間を置いてもう一度お試し下さい。</strong>');

})

});

</script>

<style>

article, aside, dialog, figure, footer, header,

hgroup, menu, nav, section { display: block; }

</style>

</head>

<body>

<lable>メールアドレス</label>

</body>

</html>

api.php

<?php
// API
header('Content-Type: application/json');
$data = "{$_POST['yourName']}さん({$_POST['email']}) ご意見<hr/>{$_POST['goiken']}<hr/>";
echo json_encode( compact('data') );


// メール送信
mb_language("Japanese");
mb_internal_encoding("UTF-8");
$to      = 'kanehiro@sys-guard.com';
$subject = 'アンケートフォーム';

$message = "
お名前：{$_POST['yourName']}さん
メールアドレス：{$_POST['email']}
ご意見:{$_POST['goiken']}
";

$headers = 'From: from@hoge.co.jp' . "\r\n";
mb_send_mail($to, $subject, $message, $headers);

<?php

// API

header('Content-Type: application/json');

$data = "{$_POST['yourName']}さん({$_POST['email']}) ご意見<hr/>{$_POST['goiken']}<hr/>";

echo json_encode( compact('data') );

// メール送信

mb_language("Japanese");

mb_internal_encoding("UTF-8");

$to = 'kanehiro@sys-guard.com';

$subject = 'アンケートフォーム';

$message = "

お名前：{$_POST['yourName']}さん

メールアドレス：{$_POST['email']}

ご意見:{$_POST['goiken']}

$headers = 'From: from@hoge.co.jp' . "\r\n";

mb_send_mail($to, $subject, $message, $headers);

[YouTube] IT速報よわよわエンジニア優さん 5年後のキャ …

の続きを読む

未分類

jQuery toggle() 表示, 非表示を繰り返す

2017年9月28日2018年9月28日 | by 優 | にコメントを残す

toggle() 表示、非表示を繰り返す jQuery

<script>
$(".btn").click(function(){
	$(".box1").toggle(1000, 'linear');
});
</script>

$(".btn").click(function(){

$(".box1").toggle(1000, 'linear');

});

</script>

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>

<style>

.box {

}
	
.box1 {
	width: 150px;
	height: 150px;
	background-color: cornflowerblue;
	display: block;
}
	
.btn{
    display: inline-block;
    text-decoration: none;
    background: #87befd;
    color: #FFF;
    width: 120px;
    height: 120px;
    line-height: 120px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    box-shadow: 0px 0px 0px 5px #87befd;
    border: dashed 1px #FFF;
    transition: .4s;
	margin-top: 100px;
}

.btn:hover{
    background: #668ad8;
     box-shadow: 0px 0px 0px 5px #668ad8;
}

</style>

</head>

<body>

<span class="box1"></span>


<a href="#" class="btn">BUTTON</a>
	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(".btn").click(function(){
	$(".box1").toggle(1000, 'linear');
});
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>無題ドキュメント</title>

<style>

.box {

}

.box1 {

width: 150px;

height: 150px;

background-color: cornflowerblue;

display: block;

}

.btn{

display: inline-block;

text-decoration: none;

background: #87befd;

color: #FFF;

width: 120px;

height: 120px;

line-height: 120px;

border-radius: 50%;

text-align: center;

vertical-align: middle;

overflow: hidden;

box-shadow: 0px 0px 0px 5px #87befd;

border: dashed 1px #FFF;

transition: .4s;

margin-top: 100px;

}

.btn:hover{

background: #668ad8;

box-shadow: 0px 0px 0px 5px #668ad8;

}

</style>

</head>

<body>

<a href="#" class="btn">BUTTON</a>

$(".btn").click(function(){

$(".box1").toggle(1000, 'linear');

});

</script>

</body>

</html>

DEMO [YouTube] IT速報よわよわエンジニア優さん 5年後のキャ …

の続きを読む

JavaScript

anime.js inview.js スクロールイベントアニメーションメモ

2017年9月13日2018年9月13日 | by 優 | にコメントを残す

スクロールで指定した要素が表示された時にclassを追加するある要素までスクロールしたらアクションをさせるJavascriptを作成する時に気をつけること。 anime.js CSSライクでデザイナーに優しい！anime.jsはDOMアニメーションの新定番だ！ invie …

の続きを読む

優技録

タグ: jQuery

JavaScript正規表現

jQuery通貨区切り・正規表現

jQuery 値・配列の取得・削除

jQuery Ajaxの雛形

ボタンを押すことでデータを取得する

jQuery optionの属性値で振る舞いを変える

jQuery モーダルウィンドウ背景が黒くなるやつ

iframeの高さの自動調整

Ajax jQuery 基本フォーム処理

シンプルフォームAPI

jQuery toggle() 表示, 非表示を繰り返す

anime.js inview.js スクロールイベントアニメーションメモ