タグ: 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-5f92ec …

の続きを読む

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

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-5f92ec8044cfc049062117 …

の続きを読む

未分類

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-5f92ec80450ad3127 …

の続きを読む

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 );

の続きを読む

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);

の続きを読む

未分類

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

の続きを読む

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 スクロールイベントアニメーションメモ