SSブログ

Input formの数値に電卓風カンマ追加 [HTML/CSS/JavaScript]


 input formの入力データに電卓風に数値入力毎にその時の桁数で3桁毎にカンマを追加するスクリプトを作成してみた。Key入力されたイベント(onKeyUp)でtoLocateStringメソッドを使用してカンマを追加、その後入力フォームに戻すようにしている。
IE11,Chrome,Firefox,Operaで動作するが、Safariでは動作しなかった。
//javascript部
function insertComma() {
	var num = document.getElementById("dt").value; //入力データ取得
	num = num.replace(/,/g,"");  //カンマ削除
	var dsp = new Number(num);
	document.getElementById("dt").value = dsp.toLocaleString();  //入力フォームに表示
}
//html部
 

実際の動作



Javascript で日付の妥当性チェック [HTML/CSS/JavaScript]


 これまで、WEB入力された日付入力の妥当性チェックを行うめ、各月の日数(28,29,30,31日)、閏年のチェックを自力でコーディングしていた。しかしDateクラスのオブジェクトから日付に関する年/月/日/曜日の値を取得するメソッドを使用すると簡単に日付のチェックができることが判った。実際のコードは以下。
//妥当性チェック関数
function chkDate() {
  var chkdate = document.getElementById("indate").value;
  //yyyy/mm/dd形式のチェック
  if(!chkdate.match(/^\d{4}\/\d{2}\/\d{2}$/)){
    alert("日付の形式が違います。"); 
    document.getElementById("indate").focus();   
    return false;
  }
  if(chkdate.getFullYear() == y &&chkdate.getMonth() == m-1 &&chkdate.getDate() == d){
    // getMonthは0~11のためm-1とする
    return true;
  } else {
    alert("日付に間違いがあります。"); 
    document.getElementById("indate").focus();   
    return false;
  }
}

Button clickで項目の表示・非表示制御(clickで引数渡し) [HTML/CSS/JavaScript]


 テーブル表示したとき、特定項目はクリックした時のみ表示したい場合がある(下図参照)。しかしclickした行の情報を引数として渡さなければ、idセレクターで指定することができない。この機能を実装したときの備忘録。
実際のサンプルはここ
上が通常時、下がフォルダボタンをクリックしたとき。
sample1.png
Javascript部


HTML部
Rep.No 発信日 件名 添付File
試16/1 2016/07/15 件名1 1 files <br> 1_1_test.pdf
試16/2 2016/07/16 件名2 2 files 2_1_test.pdf 2_2_test.pdf


ファイルのアップロードをボタン一つで実現 [HTML/CSS/JavaScript]


 ファイルアップロードを行う場合ブラウザでファイル選択ボタンの配置が違い、下図のようにブラウザによって見た目が変わってしまう。

fileup.png

そこでファイル選択ボタンを非表示にして、アップロードボタンのみでにできるようなのでここを参照に作ってみた。

test.png
Javascript部
/*--------------------------------
    ダミーボタンを押した時の処理
----------------------------------*/
$(function(){
  $('.submit_button11').click(function() {
    var key = $(this).attr("id");
    $('#file_'+key).click();
    return false;
  });
  $('input[type="file"]').change(function(){
    var files = this.files;
    var key = this.id;
    key = key.split("_");
    var key_id = key[1];
    uploadFiles(files, key_id);
    return false;
  });
});
 
/*------------------------------
  アップロード処理
--------------------------------*/
function uploadFiles(files, key_id) {
  var fd = new FormData();
  // ファイル情報を追加する
  fd.append("MAX_FILE_SIZE", 18000000);	//Max 18MBに制限
  fd.append("file", files[0]);
  fd.append("key_id", key_id);
  // Ajaxでアップロード処理をするファイルを渡す
  $.ajax({
    url: './upload.php',
    type: 'POST',
    data: fd,
    processData: false,
    contentType: false,
    success: function(res) {
    var tg = res.split(",");
    var key_id = tg[1];
    var error_msg = tg[2];
    if(error_msg != "0") {
    alert("Error: "+error_msg);
  }
  location.href="./edit.php?rno="+key_id;
  return false;
  }
});
 return false;
}

PHP部(upload.php)
$link = new SQLite3(DB_NAME);
$id = $_POST['key_id'];
$updir = "./data/";
$filename = $_FILES['file']['name'];
if($_FILES["file"]["error"] <> UPLOAD_ERR_OK) {
  if($_FILES['file']['error'] == UPLOAD_ERR_FORM_SIZE){
    $error_msg= 'File size 18Mbyteを超えています。';
  } elseif($_FILES['file']['error'] == UPLOAD_ERR_NO_FILE){
    $error_msg = 'Fileが選択されていません。';
  } elseif($_FILES['file']['error'] == UPLOAD_ERR_INI_SIZE) {
    $error_msg = 'File size '.ini_get('upload_max_filesize') . 'を超えています。';
  } else {
    $error_msg = 'その他のエラーが発生しました。';
  }
} else {
  $sql = "INSERT INTO t_file(rep_id, file_name) VALUES('".$id."','".$filename."') ";
  unset($result);
  $result = $link->query($sql);
  $last_id = $link->lastInsertRowid();
  if(move_uploaded_file($_FILES['file']['tmp_name'], $updir.$last_id."_".$filename)==TRUE){
    $error_msg = "0";
  } else {
    $error_msg = "File Upload失敗";
  }
  print $filename.",".$_POST['key_id'].",".$error_msg;
  exit;

html部




SQLite3 INSERT後のrowid取得 [SQLite]


 データ追加後のrowidを知りたい場合があるが、SQLite3の日本語サンプルページが少ないので備忘録として記載。
$link = new SQLite3(DB_NAME);
$sql = "INSER INTO table_name(field_name1, field_name2) VALUE(field_vale1, fiels_value2) "
$result = $link->query($sql);
$last_id = $link->lastInsertRowid();

PHP SQLite3のDELETEで削除できない [SQLite]


 PHP7 + SQLite3の環境でDELETEでレコードが削除できいことがあった。SQLite3を起動して直接SQLiteコマンドを発行すると、削除ができるのでSQL文に誤りは無い。Warning: SQLite3::query(): Unable to execute statement: database is locked inのエラーが発生しているが、lockした覚え無い。
試行錯誤して色々試してみた結果、理由が良く分からないがSQL文を実行する前に結果変数をunsetすると削除できた。
var_dump($result); //追加
$sql = "DELETE FROM table_name WHERE field='".$xx."' ";
$result = $link->query($sql);

PHPで配列をdefineで指定する [PHP]


 PHPで配列を定数にしたい場合があるが、difineで配列を指定することができない仕様になっている。
そこで配列の代わりにCSV形式にしてdefine指定し、使用する際CSVから配列に戻す方法で実装した時のメモ。
//定数宣言
define("JOUSU","定数1,定数2,定数3");

//定数使用側
$jousu = str_getcsv(JOUSU);
// $jousu[0] : 定数1, $jousu[1] : 定数2,  $jousu[2] : 定数3

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。