JavaScript – 東京発、雲に乗って

2024年1月12日2024年1月12日

【JavaScript】SortableJSで簡単に並べ替えUIを作る

JavaScriptのライブラリ「SortableJS」を使えば
ドラッグ＆ドロップでリストの並び順を変えたりウィンドウの配置を入れ替えたり
といったUIをとても簡単に作ることができます。

SortableJS

デモ：

１．りんご

２．いちご

３．バナナ

４．スイカ

５．佐藤太郎

コード：

<div id="sort_demo1">
<div style="background-color:#ffc0c0;">１．りんご</div>
<div style="background-color:#ffffc0;">２．いちご</div>
<div style="background-color:#c0ffc0;">３．バナナ</div>
<div style="background-color:#c0ffff;">４．スイカ</div>
<div style="background-color:#c0c0ff;">５．佐藤太郎</div>
</div>

<style>
#sort_demo1 div {
  cursor: pointer;
  margin: 2px;
}
</style>

<script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
<script>
window.onload = function() {
  Sortable.create(sort_demo1, {
    sort: 1,
    group: {
      name: 'sort_demo1',
      pull: true,
      put: true
    },
    animation: 150,
    onEnd: function(evt) {
      // ここで並び変えた状態を変数に保持したり、サーバーに送信したりする
    }
  });
}
</script>

</div>

<style>

#sort_demo1 div {

cursor: pointer;

margin: 2px;

}

</style>

window.onload = function() {

Sortable.create(sort_demo1, {

sort: 1,

group: {

name: 'sort_demo1',

pull: true,

put: true

animation: 150,

onEnd: function(evt) {

// ここで並び変えた状態を変数に保持したり、サーバーに送信したりする

}

});

}

</script>

2020年9月7日2023年2月7日

【jQuery】フォームの入力値をトリム＆半角変換

数字を入力されたら即計算するようなフォームで使用

// トリム & 全角を半角に
$('input:text').each(function(key, val) {
  var str = $(this).val();

  str = str.trim();

  var str2 = str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {
    return String.fromCharCode(s.charCodeAt(0) - 65248);
  });
  $(this).val(str2);
});

// トリム & 全角を半角に

$('input:text').each(function(key, val) {

var str = $(this).val();

str = str.trim();

var str2 = str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {

return String.fromCharCode(s.charCodeAt(0) - 65248);

});

$(this).val(str2);

});

2020年2月16日2023年2月2日

【JavaScript】別ウィンドウを開く際にPOSTでパラメータを送る

別ウィンドウを開く際にPOSTでパラメータを送るには、
window.openで空のページを開いてから
そこに対してSUBMITを行います。

ページ上のフォームからもできますし、
フォームのないページでもPOSTできます。

まずは、ページ上のフォームからSUBMITする場合：

JavaScript

function post_open() {
  window.open('', 'new_window');
  document.form1.action = 'page2.php';
  document.form1.method = 'POST';
  document.form1.target = 'new_window';
  document.form1.submit();
}

function post_open() {

window.open('', 'new_window');

document.form1.action = 'page2.php';

document.form1.method = 'POST';

document.form1.target = 'new_window';

document.form1.submit();

}

HTML

<form name="form1">
<input type="hidden" name="param1" value="hoge"/>
<input type="hidden" name="param2" value="hage"/>
<input type="button" value="送信" onclick="post_open();"/>
</form>

</form>

開いたウィンドウに名前をつけて、
その名前をtargetで指定するだけなので難しくないですね。

次に、フォームのないページでPOSTする場合：
※jQueryを使っています。

JavaScript

function post_open() {
  window.open('', 'new_window');

  // フォームを動的に生成
  var html = '<form id="temp_form" style="display:none;">';
  var data = {
    'param1': 'hoge'
   ,'param2': 'hage'
  };
  for(var x in data) {
    if(data[x] == undefined || data[x] == null) {
      continue;
    }
    var _val = data[x].replace(/'/g, '\'');
    html += "<input type='hidden' name='" + x + "' value='" + _val + "' >";
  }
  html += '</form>';
  $("body").append(html);

  $('#temp_form').action = 'page2.php';
  $('#temp_form').method = 'POST';
  $('#temp_form').target = 'new_window';
  $('#temp_form').submit();

  // フォームを削除
  $('#temp_form').remove();
}

function post_open() {

window.open('', 'new_window');

// フォームを動的に生成

var html = '<form id="temp_form" style="display:none;">';

var data = {

'param1': 'hoge'

,'param2': 'hage'

};

for(var x in data) {

if(data[x] == undefined || data[x] == null) {

continue;

}

var _val = data[x].replace(/'/g, '\'');

html += "<input type='hidden' name='" + x + "' value='" + _val + "' >";

}

html += '</form>';

$("body").append(html);

$('#temp_form').action = 'page2.php';

$('#temp_form').method = 'POST';

$('#temp_form').target = 'new_window';

$('#temp_form').submit();

// フォームを削除

$('#temp_form').remove();

}

2017年11月21日2017年11月21日

【JavaScript】連想配列の要素を削除

var hash = {'key1' : 'val1', 'key2' : 'val2', 'key3' : 'val3'};

1	var hash = {'key1' : 'val1', 'key2' : 'val2', 'key3' : 'val3'};

この連想配列の要素「key2」を削除する

delete hash['key2'];

1	delete hash['key2'];

2017年9月7日2017年9月7日

【JavaScript】テキストボックスに何か入力されたら即イベント実行させる

たとえば絞込検索などで、1文字入力されるごとに検索処理を実行させたいとき、
イベントのトリガーには

onInput

onInput

を使用します。

.addEventListener('input', 関数 );

1	.addEventListener('input', 関数 );

jQueryなら

.on('input', 関数 );

1	.on('input', 関数 );