【jQuery】フォームの入力項目をボタンで追加する方法(追加する数の上限が決まっている場合限定)

2019-08-21

入力、選択などのinput、selectの項目を追加ボタンで増やす方法のご紹介。管理画面を作成する上で、ちょくちょく必要となるのでメモ代わりにコードを残します。 ボタンをわざわざユーザーに押させるというのはちょっと古いですが、自動認識で増やしていくより、断然手軽です。システムを作る際に、「完成までの速さ」を求めるならこの方法もいいのではないでしょうか。 デモはこちら htmlStart 画像追加 画像アップロード $(function(){ //追加ボタンの動作 $('.add').c...

jQuery(javascript)複数ファイルのアップロード時に容量オーバーの場合はアラートを出す

2019-08-21

2019年現在では、iPhoneとAndroidともにinputタグのfile属性が使えるようになっています\(^o^)/ 前までは、画像をアップするだけなのに、面倒なアプリ開発をしなければいけませんでした…。 スマホのカメラ機能はどんどん解像度が上がっているので、1枚の写真が6メガというのが当たり前です。それに伴いレンタルサーバーの方もスペックが上がってきました。 それでも、レンタルサーバーの場合は転送量の軽減を考えなければいけません。 むやみにファイルをアップロードし放題にしては、サーバーがもちません。 ということで、ファイルを選択した際に、ファイル容量を取得して、 ...

Ajaxでセレクトメニューの内容を非同期で変更する【最短コピペ用jQueryコード】

2019-08-19

フォームを扱うページでは非同期通信を使うことで、 使い勝手が向上することがありますので、jqueryのAjaxは重宝します。 いまさらですが、あまりによく使うので、個人的なメモ代わりに HTML・jQuery・PHPの3点セットを残しておきます\(^o^)/ デモサンプルとして、都道府県のエリア選択を例にしました。 デモはこちら HTML htmlStart 地域区分 --選択-- 北海道 東北 南関東 北関東・甲信 北陸 東海 近畿 中国 ...

目に優しくて電力エコなダークモード(ナイトモード)をサイトやブログに導入する方法。ボタンで非同期切り替え

2019-07-23

今後は導入がスタンダードになりそうなダークモード 2018年頃から有名どころのアプリやサイトで ダークモード(ダークテーマ)への切り替えができるようになってきました。 ダークモードがもたらす効果は以下の2点。 「目の疲れを軽減」 「消費電力の低減」(有機ELディスプレイの場合のみ) TwitterやYoutubeを一日中見ている人にとっては、このダークモードは嬉しい。 背景が真っ白だと、目がチカチカしてきます。 クリエイティブツールのAdobe製品ではダークモードがデフォルトになっていますし、 プログラマーが使うエディタ系のツールもダークモードが人気の様子です...

jquery DataTablesの初期ソートを無効にする。並び順の設定

2019-05-23

CSSフレームワークとして一番需要が広がっているbootstrap。 その中に組み込まれている「jquery DataTables」プラグインがクセがあります。 初期の並び順(ソート)がソースコード順になってくれません。 <DataTablesの初期ソートを無効にする> htmlStart $(function(){ $('#example').dataTable({ "order": [] }); }); //上記のコードが効かなかった場合 $(function(){ $('#example').dataTable({ "aaSorting...

jquery不要のスライダーswiperでページャーとナビゲーションが表示されない!即決

2019-03-24


スライダー(スライドショー)のライブラリは色々ありますが、今回swiperを使用した際に、 ドットアイコンのページャー(ページネイション)が全然表示されなかったので調べてみると… まず、これはHTML側で普通にネットによく転がっているコードです。 これに誤りはありませんでした。 htmlStart htmlEnd 次は、スクリプト側のコードですが、これだとスライダーは動作するものの、ページャーが表示されませんでした。 htmlStart //動作しなかったswiperの古い記述の仕方 var swipe...

jquery(javascript)で複数選択チェックボックスの配列の入力チェックをする手軽な方法

2018-12-07

phpは分かりやすいのですが、javascriptの配列はちょっと独特ですよね? ラジオボタン・チェックボタンの入力チェックの際に、選択がない場合は「undefined」というテキストデータが入ってしまいますし。 今回のテーマは複数選択のチェックボックスを入力チェックする方法についてです。 複数選択のチェックボックスはフォームでよく出てきます。 近年は、jqueryを当たり前のように読み込んでいると思いますので、jqueryありきのコードです。 例えば、エリアの選択で下記のようなHTMLがあったとします。複数選択のチェックボックスを配列で受け取れるようにする場合は、「area...

ボタンを押したらローディング(くるくる回るスピナー)を表示する(ローディング画像不要CSSのみ)

2018-11-26

管理画面でユーザーに画像をアップさせる際、実行ボタンの2度押しを防ぐために必要なローディングの表示。 特に苦労せず設置ができたので、コードを紹介します。ローディング自体はCSSで完結します。画像不要なのが今回のミソです。ボタンを押したらローディング発動の部分だけjqueryです。 [デモサンプル] まずはbodyの下辺りにローディングのHTMLコードをコピペして、フォームのボタンに何らかのクラス名を付けてください。 htmlStart ・ ・ ・ htmlEnd 次はCSSに以下のコードをコピペしてください。...

ページ読込み時に下から上に移動しながらフェードインというリッチなコンテンツ表示を簡単実装

2018-10-29

ページを開いた際にフェードでページ全体を表示する方法はネットに出回っていますが、 「下から上に移動しながらのフェード」これがなかったので、自分で調整したものを残します。 単純に、jqueryのappend関数(コンテンツ追加)でbodyのmargin初期値を50pxなどにして、delay(ディレイ)後にmarginを0にする。 同時にフェード効果とのコラボとなり、非常に心地の良い効果になります。 htmlStart $(function(){ $('head').append( 'body{display:none; margin-top:50px;}' ); ...

JavaScript(jquery)でやっかいなundefined値のif文による空チェック判定【即決】

2018-10-21

jqueryでラジオボタンの値を取得した際にalertで値を確認すると「undefined」と表示され、 if文による空チェックがうまくいかなかったが、調べて解決したので記録のために残しておきます。 htmlStart var hensu = $("input[name='hensu']:checked").val(); //ラジオボタンの値 if(hensu == ""){} //この記述では空のチェックができません htmlEnd いくつかやり方があるようですが、この方法が一番無難だとされているようです。 htmlStart var hensu = $("input[nam...

この記事がお役に立てましたら是非シェアのご協力お願いします。