JavaScript｜VB.NET-TIPS などプログラミングについて

■JavaScript

[2025/01/18] [PR] (No.)
[2021/09/01] JavaScript タイマーの使い方（setTimeout, setInterval, clearTimeout, clearInterval） (No.280)
[2021/08/26] JavaScript jQueryの使い方（カスタム属性）HTMLタグに任意の属性を付加する方法 (No.279)
[2021/07/16] JavaScript IndexedDB の使い方７（カーソル処理内での外部関数の実行） (No.277)
[2021/07/05] JavaScript ウインドウのどこをクリックしてもイベント発生の方法 (No.276)
[2021/06/21] JavaScript jQuery w2ui.form を使ったフォーム処理の方法その２（actions） (No.275)

≪ [1] [2] [3] [4] [5] [6] [7] [8] ≫

- 2025/01/18
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
- CM

2021/09/01

JavaScript タイマーの使い方（setTimeout, setInterval, clearTimeout, clearInterval）

何秒後かに何かの処理を行いたい、もしくは一定時間毎に何かの処理をしたい場合に JavaScript では以下の関数を使います。

関数	書式	説明
setTimeout	id = setTimeout(func, timeval) id :タイムアウト処理の識別ID func :タイムアウト時に実行する関数 timeval:タイムアウト時間（ミリ秒）	タイムアウト時の関数設定を行う
setInterval	id = setInterval(func, timeval) id :タイマー処理の識別ID func :タイマー時間毎に実行する関数 timeval:タイマー時間（ミリ秒）	タイマー処理の関数設定を行う
clearTimeout	clearTimeout(id) id :タイムアウト処理の識別ID	タイムアウト処理を中止するここで指定される id は setTimeout で返されたものを指定
clearInterval	clearInterval(id) id :タイマー処理の識別ID	タイマー処理を中止するここで指定される id は setInterval で返されたものを指定

今回は、これらの関数を使って指定時間が過ぎた時に何かの処理を行うものと、ある一定時間ごとに処理を繰り返すものの例を記したいと思います。

■指定時間が過ぎた時に何かの処理を行う簡単な例（タイムアウト処理）

以下の例では「タイマー開始」 button タグのクリックイベントでタイムアウト処理を行う関数 StartTimeout を呼出しています。
StartTimeout ではタイムアウト関数である TimeoutProc を宣言してそれを setTimeout に渡すことでタイムアウト処理が開始されます。
setTimeout のタイムアウト時間はミリ秒での指定なので、10秒の場合は1000倍した10000を指定します。

「タイマー開始」をクリックするとボタンが押下不可になり、5秒後に「タイムアウト!」のメッセージが表示され、「タイマー開始」が押下可能となります。

<html>
<head>
<meta charset="utf-8">
<title>Timer - 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <h2>Timer - 1</h2>
	<button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button>
</body>
<script type="text/javascript">
function StartTimeout() {
	//ボタン押下不可設定
	$("#StartButton").attr("disabled", true);
    //タイムアウト関数宣言
    var TimeoutProc = function() {
        alert("タイムアウト!");
		//ボタン押下許可設定
		$("#StartButton").attr("disabled", false);
    };
    var timeoutVal = 5 * 1000; //5秒
    //タイムアウトの設定
    setTimeout(TimeoutProc, timeoutVal);
}
</script>
</html>

■指定時間が過ぎる前にタイムアウト関数の実行を止める簡単な例

上記の例に「タイマー停止」ボタンを設置し「タイマー開始」で設定されたタイムアウト処理の中断を行います。
「タイマー開始」で呼ばれる StartTimeout では setTimeout でタイムアウト関数を設定しますが、戻り値として返されるタイムアウトidを変数に退避します。

「タイマー停止」で呼ばれる StopTimeout ではタイムアウトidを clearTimeout に渡してタイムアウト処理を中止します。

<html>
<head>
<meta charset="utf-8">
<title>Timer - 2</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <h2>Timer - 2</h2>
	<button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button>
	<button type="button" id="StopButton"  onclick="StopTimeout();" disabled="disabled">タイマー停止</button>
</body>
<script type="text/javascript">
var id;
//タイマー開始
function StartTimeout() {
	//開始ボタン不可、停止ボタン許可設定
	$("#StartButton").attr("disabled", true);
	$("#StopButton").attr("disabled", false);
    //タイムアウト関数宣言
    var TimeoutProc = function() {
        alert("タイムアウト!");
		//開始ボタン許可、停止ボタン不可設定
		$("#StartButton").attr("disabled", false);
		$("#StopButton").attr("disabled", true);
    };
    var timeoutVal = 5 * 1000; //5秒
    //タイムアウトの設定
    id = setTimeout(TimeoutProc, timeoutVal);
}
//タイマー停止
function StopTimeout() {
    //タイムアウトの停止
    clearTimeout(id);
	//開始ボタン許可、停止ボタン不可設定
	$("#StartButton").attr("disabled", false);
	$("#StopButton").attr("disabled", true);
}
</script>
</html>

■一定時間ごとに処理を繰り返す簡単な例

一定時間ごとに繰り返す処理と言えば、時計の様に時刻を表示する処理があります。
これを実現するため「タイマー開始」ボタンを設置し、それをクリックすることで1秒毎に現在時刻を表示する例を示します。

以下の例では「タイマー開始」ボタンのクリックイベントでタイマー処理を行う関数 setInterval を呼出しています。 StartTimeout ではタイマー関数である TimeProc を宣言してそれを setInterval に渡すことでタイムアウト処理が開始されます。

このソースでは一旦「タイマー開始」ボタンのクリックすると止める手立てがありませんので、ずっと時刻表示が続きます。（なおブラウザの再読込で最初の状態になりますが...）

<html>
<head>
<meta charset="utf-8">
<title>Timer - 3</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <h2>Timer - 3</h2>
	<button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button>
	<br /><br />
	時刻：<span id="ptime"></span>
</body>
<script type="text/javascript">
var id;
//タイマー開始
function StartTimeout() {
	//ボタン押下不可設定
	$("#StartButton").attr("disabled", true);
    //タイマー関数宣言
    var TimeProc = function() {
		//Dateオブジェクトを作成する
		var dateobj = new Date();
		//時刻表示
		$("#ptime").text(dateobj.toTimeString());
    };
    var timeoutVal = 1 * 1000; //1秒
    //タイマーの設定
    id = setInterval(TimeProc, timeoutVal);
}
</script>
</html>

■一定時間ごとの処理を途中で止める簡単な例

上記の例ではタイマー処理を中断できなかったので「タイマー停止」ボタンを設置し、「タイマー開始」で設定されたタイマー処理の中断を行います。
「タイマー開始」で呼ばれる StartTimeout では setInterval でタイムアウト関数を設定しますが、戻り値として返されるタイマーidを変数に退避します。

「タイマー停止」で呼ばれる StopTimeout ではタイマーidを clearInterval に渡してタイマー処理を中止します。

<html>
<head>
<meta charset="utf-8">
<title>Timer - 4</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <h2>Timer - 4</h2>
	<button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button>
	<button type="button" id="StopButton"  onclick="StopTimeout();" disabled="disabled">タイマー停止</button>
	<br /><br />
	時刻：<span id="ptime"></span>
</body>
<script type="text/javascript">
var id;
//タイマー開始
function StartTimeout() {
	//開始ボタン不可、停止ボタン許可設定
	$("#StartButton").attr("disabled", true);
	$("#StopButton").attr("disabled", false);
    //タイマー関数宣言
    var TimeProc = function() {
		//Dateオブジェクトを作成する
		var dateobj = new Date();
		//時刻表示
		$("#ptime").text(dateobj.toTimeString());
    };
    var timeVal = 1 * 1000;	//1秒
    //タイマーの設定
    id = setInterval(TimeProc, timeVal);
}
//タイマー停止
function StopTimeout() {
    //タイマーの停止
    clearInterval(id);
	//開始ボタン許可、停止ボタン不可設定
	$("#StartButton").attr("disabled", false);
	$("#StopButton").attr("disabled", true);
}
</script>
</html>

ここまでは setInterval や setTimeout の引数としての関数を別の変数で宣言した後で、それぞれの関数に渡していました。その引数のところに無名関数として直接に宣言する方法もありますので、上のソースを変更してみます。

<html>
<head>
<meta charset="utf-8">
<title>Timer - 4 - 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <h2>Timer - 4 - 1</h2>
	<button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button>
	<button type="button" id="StopButton"  onclick="StopTimeout();" disabled="disabled">タイマー停止</button>
	<br /><br />
	時刻：<span id="ptime"></span>
</body>
<script type="text/javascript">
var id;
//タイマー開始
function StartTimeout() {
	//開始ボタン不可、停止ボタン許可設定
	$("#StartButton").attr("disabled", true);
	$("#StopButton").attr("disabled", false);

    var timeVal = 1 * 1000;	//1秒
    //タイマーの設定(関数宣言を共に)
    id = setInterval(function() {
		//Dateオブジェクトを作成する
		var dateobj = new Date();
		//時刻表示
		$("#ptime").text(dateobj.toTimeString());
    }, timeVal);
}
//タイマー停止
function StopTimeout() {
    //タイマーの停止
    clearInterval(id);
	//開始ボタン許可、停止ボタン不可設定
	$("#StartButton").attr("disabled", false);
	$("#StopButton").attr("disabled", true);
}
</script>
</html>

JavaScript
0CM

- 2021/08/26
JavaScript jQueryの使い方（カスタム属性）HTMLタグに任意の属性を付加する方法
以前以下の記事にてテーブルの行タグである <tr> にカスタム属性を付加することを行いました。

⇒JavaScript jQueryで table の操作する方法その４・データ行の追加と削除

今回は、別のタグにカスタム属性を追加する例を記したいと思います。

■このページの内容

カスタム属性の付け方

カスタム属性の簡単な例

複数の button タグのクリックイベントでのカスタム属性の取得の例

1個のタグに複数のカスタム属性を宣言した例

■カスタム属性の付け方

以下の例では button タグに data-index と名前を付けたカスタム属性を付加しています。

<button name="button1" type="button" data-index="1" >ボタン</button>

カスタム属性のタグ名は data- の後に任意で小文字の英数文字で指定します。文字列の中にハイフンを入れても良いようです。

このカスタム属性を参照するには jquery では data() または attr() 関数を使います。以下の様な感じです。

var index1 = $("button[name=button1]").data("index"); //data()の場合は"data-"を省略 var index2 = $("button[name=button1]").attr("data-index");

■カスタム属性の簡単な例

以下の例は button を2個設置し、最初の button にカスタム属性「data-index」を設定します。さらに、2番目の button のクリックイベントで最初の button のカスタム属性を取得し、表示しています。

<html> <head> <meta charset="utf-8"> <title>Custom Tag attribute - 1</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <h2>Custom Tag attribute - 1</h2> <button name="button1" type="button" data-index="10" >ボタン1</button> <button name="button2" type="button" onclick="getCustomTag();false;" >ボタン2</button> </body> <script type="text/javascript"> function getCustomTag() { //[button1]の[data-index]の取得 var index1 = $("button[name=button1]").attr("data-index"); var index2 = $("button[name=button1]").data("index"); //表示(同じ値が表示される) alert("data-index:" + index1 + " , " + index2); } </script> </html>

■複数の button タグのクリックイベントでのカスタム属性の取得の例

以下の例では button を4個設置し、各ボタンのイベント処理で、自分自身のカスタム属性の値を取得する例を示します。

<html> <head> <meta charset="utf-8"> <title>Custom Tag attribute - 2</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <h2>Custom Tag attribute - 2</h2> <button name="button-attr" type="button" data-index="1" >ボタン1</button> <button name="button-attr" type="button" data-index="2" >ボタン2</button> <button name="button-attr" type="button" data-index="3" >ボタン3</button> <button name="button-attr" type="button" data-index="4" >ボタン4</button> </body> <script type="text/javascript"> //ページが読込まれた直後に実行 $(document).ready(function() { //name属性が"button-attr"のクリックイベント設定 $(document).on("click","button[name=button-attr]",function() { //[data-index]の取得 var index = $(this).attr("data-index"); alert("data-index:" + index); return false; }); }); </script> </html>

■1個のタグに複数のカスタム属性を宣言した例

以下では1個の button タグの中に複数のカスタム属性を宣言した例を示します。
実際問題として、1個のタグに各種の情報を持ちたい場合は想定されるので、やってみました。
「data-d1」「data-d2」としたカスタム属性を宣言しています。各ボタンをクリックした時に3個のカスタム属性を取得し表示しています。

<html> <head> <meta charset="utf-8"> <title>Custom Tag attribute - 3</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <h2>Custom Tag attribute - 3</h2> <button name="button-attr" type="button" data-index="1" data-d1="001" data-d2="101">ボタン1</button> <button name="button-attr" type="button" data-index="2" data-d1="002" data-d2="102">ボタン2</button> <button name="button-attr" type="button" data-index="3" data-d1="003" data-d2="103">ボタン3</button> <button name="button-attr" type="button" data-index="4" data-d1="004" data-d2="104">ボタン4</button> </body> <script type="text/javascript"> //ページが読込まれた直後に実行 $(document).ready(function() { //name属性が"button-attr"のクリックイベント設定 $(document).on("click","button[name=button-attr]",function() { //[data-index]の取得 var index = $(this).attr("data-index"); var d1 = $(this).attr("data-d1"); var d2 = $(this).attr("data-d2"); alert("data-index:" + index + " data-d1:" + d1 + " data-d2:" + d2); return false; }); }); </script> </html>

関連する記事
⇒JavaScript 何に使う
⇒JavaScript jQueryの使い方（セレクタ）
⇒JavaScript jQueryの使い方（セレクタ）その２
⇒JavaScript jQueryの使い方（セレクタ）その３・セレクタの存在確認
⇒JavaScript jQueryの使い方（セレクタ）その４・複数セレクタの存在確認
⇒JavaScript jQueryでJavascriptファイルを動的に変更する方法
- JavaScript
- 0CM
- 2021/07/16
JavaScript IndexedDB の使い方７（カーソル処理内での外部関数の実行）
以前、以下の記事でカーソルを使って「オブジェクトストア」に登録された全てのデータを取得する方法について説明しましたが、カーソル処理の中と、全てのデータを取得した後の処理をどうするのかには触れていませんでした。

⇒JavaScript IndexedDB の使い方５（カーソル処理）

全データ取得関数 getAllData の中で直接データ処理を記述してもいいのですが、汎用性を持たせるために、カーソル処理用と全データ取得後の関数を引数として渡し、それぞれの処理で実行する様に変更してみます。

■全データ取得関数にカーソル処理用と全データ取得後の関数を引数として渡す

<html> <head> <meta charset="utf-8"> <title>test IndexedDB - cursor - function</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> // ブラウザ対応宣言 window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction; window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange; // データベース(IDBDatabase)インスタンス var db; // データベース名 var dbName = "TestDB"; // オブジェクトストア名 var objStoreName = "Test1"; /** * DB接続処理 */ function openDB() { // データベースオープン:[名称:TestDB] var request = indexedDB.open(dbName); //オープンが正常の場合の関数宣言 request.onsuccess = function(event) { //データベースインスタンス保存 db = event.target.result; console.log("DBオープンOK"); }; //エラーの場合の関数宣言 request.onerror = function(event){ console.log("DBオープンエラー"); }; } /** * 全データ取得処理 */ function getAllData(funcCursor = null, funcDataEnd = null) { //トランザクション var transaction = db.transaction(objStoreName, 'readonly'); //オブジェクトストアにアクセスします。 var objectStore = transaction.objectStore(objStoreName); //カーソル開始 var request = objectStore.openCursor(); //カーソルで対応するデータが存在した場合の処理 request.onsuccess = function(event) { var cursor = event.target.result; if(cursor) { if (funcCursor) { //関数が指定された場合、カーソル処理 funcCursor(cursor.value); } //次のカーソルへ cursor.continue(); } else { //これ以上のデータは存在しない if (funcDataEnd) { //関数が指定された場合、全データ取得後処理 funcDataEnd(); } } }; //カーソル取得エラーの場合の関数宣言 request.onerror = function(event) { console.log('取得失敗。event:', event); }; } //レコードデータ退避 var rec = []; //カーソル処理 function cursorProc(data) { rec.push(data); } //全データ取得後処理 function dataEndProc() { var str = "<p>"; for (var i = 0; i < rec.length; i++) { str += "id:" + rec[i]["id"] + "<br />"; } str += "</p>"; //id="dataarea"の div タグの中身をクリア・設定 $("#dataarea").empty(); $("#dataarea").append(str); } //全データ取得処理 function getAllDataProc() { rec = []; //各関数を引数にして処理CALL getAllData(cursorProc, dataEndProc); } </script> </head> <body> <h2>test IndexedDB - cursor - 3</h2> <button id="buttonOpen" onclick="openDB()">DBオープン</button> <button id="buttonGet" onclick="getAllDataProc()">全データ取得</button> <br /> <div id="dataarea"> </div> </body> </html>

カーソル処理用関数 cursorProc はカーソル処理の中からカーソルデータ内のレコードデータを渡す様に引き数にレコードデータを持ちます。 cursorProc の処理は特になく、静的変数に配列データとして退避します。

全データ取得後処理関数 dataEndProc は保存された配列のレコードデータを順次 id のみの一覧を作成し div タグ内に設定します。

実際の全データ取得処理ではこれらの関数を引数に渡して getAllData を呼出しています。

カーソル開始のリクエスト openCursor もそうなのですが、IndexedDB の各メソッドを呼び出した後で処理が成功した時には非同期に onsuccess の定義関数が呼ばれます。

この「非同期」が厄介で、プログラムを組む上で連続的な感じでは記述できません。リクエストを発行したタイミングと、その後必要とされる処理が別のタイミングで実行されるため、うまく記述しなければなりません。

それで、後処理を別関数として定義し、リクエストを発行する関数に渡してやることになりました。（これの例として上のプログラムが在るわけですが…）

以上で、全てのデータを読込んだ後で行いたい場合に別関数を与えて行う方法を説明しましたが、もし、2個のオブジェクトストアが存在し、1個目のオブジェクトストアを全て読込んだ後で、更に2個目のオブジェクトストアを全て読込んで処理を行いたい場合はどうすればいいのでしょうか。
これに付いての対処の方法は次回の記事で説明したいと思います。

関連する記事
⇒JavaScript IndexedDB の使い方１（データベースオープン）
⇒JavaScript IndexedDB の使い方２（データ追加）
⇒JavaScript IndexedDB の使い方３（データ取得）
⇒JavaScript IndexedDB の使い方４（全データ取得）
⇒JavaScript IndexedDB の使い方５（カーソル処理）
⇒JavaScript IndexedDB の使い方６（データ削除）
- JavaScript
- 0CM
- 2021/07/05
JavaScript ウインドウのどこをクリックしてもイベント発生の方法
今回は ウインドウ のどこをクリックしてもイベントを発生させる方法について説明します。
WEBページで表示している ウインドウ どこでもとは body タグの中身の全てのことになります。

そこで body タグのクリックイベントに関数を定義すればいいことになります。以下の様な宣言をページが全てロードされたタイミングで行うことになります。

document.body.onclick = function ( event ) { ... }

これを使った例として以下に HTML ファイル側のソースを示します。

■bodyタグのクリックイベントに関数を定義

<html> <head> <meta charset="utf-8"> <title>test Event body click - 1</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(function () { //ウインドウ内クリックでの処理 document.body.onclick = function ( event ) { alert("document.body.onclick...event"); } }); </script> </head> <body> <h2>test Event body click - 1</h2> <p>ウインドウのどこをクリックしてもイベント発生</p> </body> </html>

これを実行しますと確かにクリックするとアラートが表示されるのですが、場所が限定されています。
h2 タグ及び p タグの上あたりでクリックする場合のみクリックイベントが発生する様です。
FireFox の開発環境の「インスペクター」タブで見てみると body の領域は縦方向に狭い領域となっています。

これは当然の結果であり body の縦方向の領域の指定が無いので p タグの領域までとなっています。
これを改善するには body の縦方向の領域の指定を行います。

■bodyタグの縦方向の領域を定義

<html> <head> <meta charset="utf-8"> <title>test Event body click - 2</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(function () { //ウインドウ内クリックでの処理 document.body.onclick = function ( event ) { alert("document.body.onclick...event"); } }); </script> <style> /*クラスのスタイル宣言*/ .whole{ width: 100%; height: 100%; } </style> </head> <body class="whole"> <h2>test Event body click - 2</h2> <p>ウインドウのどこをクリックしてもイベント発生</p> </body> </html>

body の縦方向の領域の指定をスタイルによりウインドウの100％と指定しましたので、ウインドウのほぼすべてでクリックイベントが発生します。

■buttonタグのクリックイベントとダブった場合について

p タグの下に button タグを置いて、そのクリックイベントと body のクリックイベントのタイミングに付いて確認します。

3個のボタンの1個をクリックすると、ボタンクリックイベントが発生した後で body のクリックイベントが発生します。

2個のイベントが連続して発生しますので、注意が必要です。

<html> <head> <meta charset="utf-8"> <title>test Event body click - 3</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(function () { //ウインドウ内クリックでの処理 document.body.onclick = function ( event ) { alert("document.body.onclick...event"); } //ボタンクリック処理 $('.cbutton').on('click', function( event ) { alert(event.currentTarget.innerText + "onclick...event"); }); }); </script> <style> /*クラスのスタイル宣言*/ .whole{ width: 100%; height: 100%; } </style> </head> <body class="whole"> <h2>test Event body click - 3</h2> <p>ウインドウのどこをクリックしてもイベント発生</p> <button class="cbutton">ボタン１</button> <button class="cbutton">ボタン２</button> <button class="cbutton">ボタン３</button> </body> </html>

関連する記事
⇒JavaScript 何に使う
⇒JavaScript jQueryの使い方（セレクタ）
⇒JavaScript jQueryの使い方（セレクタ）その２
⇒JavaScript 関数の宣言について(function)
⇒JavaScript jQueryでJavascriptファイルの動的に変更する方法
- JavaScript
- 0CM

2021/06/21

JavaScript jQuery w2ui.form を使ったフォーム処理の方法その２（actions）

前回は簡単な例を示してフォームコンポーネントである w2ui.form ついて説明をしました。
今回はフォームオブジェクトの actions プロパティについて説明をしていきます。

actions は各ボタン毎のプロパティ名と関数宣言をオブジェクト配列として宣言を行います。
[ボタン名プロパティ]は HTML の中の button タグの name 属性との一致が必要です。

//[actions]プロパティの宣言のみ抜粋
        actions: {
            [ボタン名プロパティ１]: function () {
                [関数宣言１];
            },
            [ボタン名プロパティ２]: function () {
                [関数宣言２];
            },
            [ボタン名プロパティ３]: function () {
                [関数宣言３];
            },
			...
        }

前回の記事から例を以下に示します。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
</head>
<body>
    <div id="testForm" style="width: 500px">
        <div class="w2ui-page page-0">
            <div class="w2ui-field">
                <label>名前:</label>
                <div>
                    <input name="name" maxlength="100" size="40"/>
                </div>
            </div>
            <div class="w2ui-field">
                <label>住所:</label>
                <div>
                    <input name="address" maxlength="100" size="40"/>
                </div>
            </div>
            <div class="w2ui-field">
                <label>備考:</label>
                <div>
                    <textarea name="comment" style="width: 300px; height: 50px;"></textarea>
                </div>
            </div>
        </div>
        <div class="w2ui-buttons">
            <input type="button" value="リセット" name="reset"/>
            <input type="button" value="保存" name="save"/>
        </div>
    </div>

</body>
<script>
$(function () {
    $('#testForm').w2form({
        name   : 'testForm',
		header : 'Test Form',
        fields : [
            { field: 'name'   , type: 'text', required: true },
            { field: 'address', type: 'text', required: true },
            { field: 'comment', type: 'text'}
        ],
        actions: {
            reset: function () {
                this.clear();
            },
            save: function () {
                this.save();
            }
        }
    });
});
</script>
</html>

「リセット」ボタンの処理はフォームオブジェクトの actions プロパティの中の reset プロパティで宣言された関数がコールされます。また、「保存」ボタンの処理は actions プロパティの中の save プロパティで宣言された関数がコールされます。

reset プロパティの関数でフォームオブジェクトの clear メソッドをコールしています。

//[clear]メソッドのコール方法
clear( [ field1, field2, ... ] )

・field1, field2, ... ：クリアされるフィールドを指定
・引数が無い場合      ：全てのフィールドがクリアされる
                        更に record オブジェクトがクリアされ、 recid が「0」クリア

save プロパティの関数でフォームオブジェクトの save メソッドをコールしています。

//[save]メソッドのコール方法
save( [ postData ] , [ callBack ] )

・postData ：全フィールドのデータの他に追加されるデータ宣言
・callBack ：「save」処理されたプログラムから戻った時にコールされる関数宣言
             (通常は PHP でのプログラムを想定していますが、
              callBack 関数の引数に PHP からの戻り値が返される様にします)

上記の HTML ファイルをロードしデータ入力後「保存」ボタンをクリックすると何も起こりませんが、「ウエブ開発ツール」の「コンソール」を見ると以下の様に表示されます。

「ERROR: Form cannot be saved because no url is defined.」のメッセージで save 用の url が宣言されていないエラーが表示されます。
そのため url を宣言してやらないといけないのですが、以下の様に行います。

//フォームオブジェクトの[url]プロパティの宣言方法
    url  : {
        save   : save用のPHPプログラムのurl,
        get    : get用のPHPプログラムのurl,
        delete : delete用のPHPプログラムのurl,
    },

・「save」「get」「delete」はそれぞれ処理用のプロパティで、処理される「url」を宣言

そこで「save」を宣言する様にしたソースを示します。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
</head>
<body>
    <div id="testForm" style="width: 500px">
        <div class="w2ui-page page-0">
            <div class="w2ui-field">
                <label>名前:</label>
                <div>
                    <input name="name" maxlength="100" size="40"/>
                </div>
            </div>
            <div class="w2ui-field">
                <label>住所:</label>
                <div>
                    <input name="address" maxlength="100" size="40"/>
                </div>
            </div>
            <div class="w2ui-field">
                <label>備考:</label>
                <div>
                    <textarea name="comment" style="width: 300px; height: 50px;"></textarea>
                </div>
            </div>
        </div>
        <div class="w2ui-buttons">
            <input type="button" value="リセット" name="reset"/>
            <input type="button" value="保存" name="save"/>
        </div>
    </div>

</body>
<script>
$(function () {
    $('#testForm').w2form({
        name   : 'testForm',
		header : 'Test Form',
        fields : [
            { field: 'name'   , type: 'text', required: true },
            { field: 'address', type: 'text', required: true },
            { field: 'comment', type: 'text'}
        ],
	    url  : {
	        save   : 'form-act-2.php',
	    },    
        actions: {
            reset: function () {
                this.clear();
            },
            save: function () {
                this.save();
            }
        }
    });
});
</script>
</html>

なお「save」に宣言された PHP プログラムはテストとして、文字列をテキストファイルに書き出すだけの処理です。（動作したかを確認するだけですので、簡単なものにしました。）

<?php
// 固定の文字列を「form-act-2.txt」ファイルに登録
file_put_contents("form-act-2.txt", "0123456789\n");
exit();
?>

上記の HTML ファイルをロードし各データを入力後「保存」ボタンをクリックし「ウエブ開発ツール」の「コンソール」を見ると以下の様に表示されます。（PHP のプログラムで「form-act-2.txt」ファイルは作成されました。）

「コンソール」には以下のエラーが表示されます。

ERROR: server communication failed. The server should return
Object { status: "success" } OR Object { status: "error", message: "error message" 
 , instead the AJAX request produced this:  
Object { status: "parsererror", error: SyntaxError, rawResponseText: "" }

w2ui.form では AJAX でこの「save」の url を処理していて、処理結果として「status」と「message」を返す必要がある様です。
それでは、先ほどの PHP プログラムをエラーを返すだけのものに変更してみます。

<?php
header('Content-type: application/json');
print json_encode(array("status"=>"error", "message"=>"エラー発生!!"));
?>

再度、「保存」ボタンをクリックすると以下の様な表示になります。
なお「エラー発生!!」のメッセージは自動で表示されます。

再度、先ほどの PHP プログラムを成功を返すだけのものに変更してみます。

<?php
header('Content-type: application/json');
print json_encode(array("status"=>"success"));
?>

再度、「保存」ボタンをクリックするとチラッとメッセージが表示される様ですがそのままなにも起こりません。このままでは、成功したのかがはっきりしませんので、その対応を行います。

フォームオブジェクトの actions プロパティの中の save プロパティで宣言された関数の中の save メソッドを以下の様に変更します。

■save プロパティで宣言された関数の中の save メソッドを宣言

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
</head>
<body>
    <div id="testForm" style="width: 500px">
        <div class="w2ui-page page-0">
            <div class="w2ui-field">
                <label>名前:</label>
                <div>
                    <input name="name" maxlength="100" size="40"/>
                </div>
            </div>
            <div class="w2ui-field">
                <label>住所:</label>
                <div>
                    <input name="address" maxlength="100" size="40"/>
                </div>
            </div>
            <div class="w2ui-field">
                <label>備考:</label>
                <div>
                    <textarea name="comment" style="width: 300px; height: 50px;"></textarea>
                </div>
            </div>
        </div>
        <div class="w2ui-buttons">
            <input type="button" value="リセット" name="reset"/>
            <input type="button" value="保存" name="save"/>
        </div>
    </div>

</body>
<script>
$(function () {
    $('#testForm').w2form({
        name   : 'testForm',
		header : 'Test Form',
        fields : [
            { field: 'name'   , type: 'text', required: true },
            { field: 'address', type: 'text', required: true },
            { field: 'comment', type: 'text'}
        ],
	    url  : {
	        save   : 'form-act-2.php',
	    },    
        actions: {
            reset: function () {
                this.clear();
            },
            save: function () {
	            this.save({}, function (data) {
	                if (data.status === "success") {
	                    alert("OK !!");
	                    return;
	                }
	                else if (data.status === "error") {
	                    console.log("ERROR: "+ data.message);
	                    return;
	                }
	            });
            }
        }
    });
});
</script>
</html>

これを実行させると以下の様な表示になります。フォームの中央に薄く「Saving...」の表示が在ることがわかります。（”現在処理中”的な表示でしょうか）

以上、データ登録の簡単な処理方法を示しましたが、実際の場合にはデータ登録の処理が必要になりますが、今回はここまでとします。

昨日に続いてデータの処理に付いて追記します。

■save メソッドで渡されるデータについて

上記の HTML ファイルで「保存」ボタンをクリックした時に save メソッドで渡されるデータは HTTP の POST データとして以下の様な感じで渡されます。

{
    cmd     : 'save',		//コマンドとしての「save」
    name    : フォーム名,
    recid   : レコードID,	//設定しなければ「0」
    record  : {				//レコードデータ
        field1 : value1,	//フィールド1データ
        ...
        fieldN : valueN		//フィールドNデータ
    }
}

それでは、先ほどの PHP プログラムにHTTPリクエスト変数を調べる様に変更してみます。

<?php
//  HTTP リクエスト変数
$strREQ = print_r($_REQUEST, true);
file_put_contents("form-act-2.txt", $strREQ);
//  成功を返す
header('Content-type: application/json');
print json_encode(array("status"=>"success", "message"=>"OK!!"));
?>

結果「form-act-2.txt」は以下の様に JSON データの形式の内容になります。（[request] => は1行で出力されていたのですが、見やすく改行しました）

Array
(
    [request] => {
		"cmd":"save",
		"recid":0,
		"name":"testForm",
		"record":{
			"name":"田中太郎",
			"address":"東京都△△区",
			"comment":"あああああああああああああああ"
		}
	}
)

データ登録処理としてはデータベースのテーブル等に登録することになると思いますが $_REQUEST["request"] の JSON データを連想配列に変換して扱うことになります。
テスト PHP プログラムとしては以下の様な感じになると思います。

<?php
//  JSON データ変換
$arrREQ = json_decode($_REQUEST["request"], true);
//  レコードデータ配列のみ
$arrRec = $arrREQ["record"];
$strRec = "name   :" . $arrRec["name"] . "\n";
$strRec.= "address:" . $arrRec["address"] . "\n";
$strRec.= "comment:" . $arrRec["comment"] . "\n";
file_put_contents("form-act-2.txt", $strRec);
//  成功を返す
header('Content-type: application/json');
print json_encode(array("status"=>"success", "message"=>"OK!!"));
?>

■このページの内容

■指定時間が過ぎた時に何かの処理を行う簡単な例（タイムアウト処理）

■指定時間が過ぎる前にタイムアウト関数の実行を止める簡単な例

■一定時間ごとに処理を繰り返す簡単な例

■一定時間ごとの処理を途中で止める簡単な例

関連する記事

■このページの内容

■カスタム属性の付け方

■カスタム属性の簡単な例

■複数の button タグのクリックイベントでのカスタム属性の取得の例

■1個のタグに複数のカスタム属性を宣言した例

関連する記事

■全データ取得関数にカーソル処理用と全データ取得後の関数を引数として渡す

関連する記事

■bodyタグのクリックイベントに関数を定義

■bodyタグの縦方向の領域を定義

■buttonタグのクリックイベントとダブった場合について

関連する記事

■save プロパティで宣言された関数の中の save メソッドを宣言

■save メソッドで渡されるデータについて

関連する記事