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

- 2025/03/13
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
- CM
- 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ファイルを動的に変更する方法
PR
- JavaScript
- 0CM
- 2021/07/29
PHP 標準関数その４・文字列の分割（explode）で空文字列を処理して再認識した件について
文字列の分割を行う関数の説明は以下の記事で行いましたが、今回は少し気になった件に付いて記します。

⇒PHP 標準関数その1・文字列の分割・結合を行う関数（explode, implode）について



■一般的なexplode関数の使い方

先ずは explode 関数の一般的な使い方ですが、以下の様なソースを作成します。

<?php /* f1-explode.php */ // 分割する文字列 $str = "東京,名古屋,京都,大阪"; // 分割処理 $arr = explode(",", $str); // 配列の内容表示 echo "<pre>"; var_dump($arr); echo "</pre>"; ?>

これをブラウザで実行すると以下の表示になります。

array(4) { [0]=> string(6) "東京" [1]=> string(9) "名古屋" [2]=> string(6) "京都" [3]=> string(6) "大阪" }

変数「$arr」に指標「0」から順にカンマで分割された文字列が設定されています。
これ自体は特に問題は無いのですが explode 関数に渡す文字列が null または 空文字列(長さが 0 の文字列) の場合はどうなるのでしょうか。

■nullをexplode関数で分解処理

それでは早速やってみます。上記のソースの文字列を null に変えます。

<?php $str = null; // 分割処理 $arr = explode(",", $str); // 配列の内容表示 echo "<pre>"; var_dump($arr); echo "</pre>"; ?>

これをWindowsコマンドプロンプトで実行すると以下の表示になります。

array(1) { [0]=> string(0) "" }

KEYが「0」で内容が空文字列の要素が「1件」の配列が返されます。
なお null の部分を空文字列に変更しても同様の結果となります。

<?php $str = ""; // 分割処理 $arr = explode(",", $str); // 配列の内容表示 echo "<pre>"; var_dump($arr); echo "</pre>"; ?>

この結果から文字列に何かのデータが設定されていて、それを分解して使う場合、 null または 空文字列 だと1件の文字列が在ることになってしまいます。

もし、それでもいいのならば問題にはならないのですが、不都合であれば、分解処理の前に対象文字列を null または 空文字列 の判定を行って別処理を行う必要があります。
- PHP
- 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個のタグに複数のカスタム属性を宣言した例

関連する記事

■一般的なexplode関数の使い方

■nullをexplode関数で分解処理

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

関連する記事

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

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

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

関連する記事

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

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

関連する記事