前回までに、プラグインのハコを作成しました。
つまりは、ダッシュボードにメニューを追加、クリックすることで自作のページを表示することができるような実装を行いました。
そして、今回はアンケートのための質問と回答するためのボタンを作成するJSプログラムを作成しました。
JSでフォーム作成
できたものは下のようなものです。
＜入力前＞
＜入力後＞
下の部分に質問とボタンが表示されています。
これを投稿画面に挿入しようという考えです。
まずはHTMLで質問などの入力部品を作成
<table id="questionTable">
<tr>
<td>
<font size="3">Input Question: </font>
</td>
<td>
<input id="questionMessage" type="text" maxlength="30" size="35" placeholder="質問内容を記入します"/>
</td>
</tr>
<tr>
<td>
<font size="3">Input Answer: </font>
</td>
<td>
<input id="ansText0" data-ans="0" type="text" maxlength="12" size="12"/>
</td>
</tr>
</table>
<button type="button" onclick="addRow(this)">項目追加</button>
<button type="button" onclick="createForm()">作成</button>
<button type="button" onclick="deleteForm()">削除</button>
そして、質問の数を増やすためのボタン、フォームの作成ボタン、作成したコンポーネントの削除ボタンと用意しました。
具体的なJSの実装は下のようになっています。
// フォーム作成フラグ
let isCreated = false;
// ボタンのカウンタ
let num = 0;
// 質問の回答項目を追加
function addRow(button) {
num++;
let table = document.getElementById("questionTable");
// テーブに行を追加
let row = table.insertRow(table.rows.length);
let col1 = row.insertCell(0);
let col2 = row.insertCell(1);
col1.innerHTML = 'Input Answer: ';
col2.innerHTML = '';
}
// 作成したアンケートの入力フォームを生成
function createForm() {
if (isCreated) {
return;
}
let question = document.getElementById("questionMessage").value;
let table = document.getElementById("questionTable");
let inputs = table.getElementsByTagName("input");
// 文言を表示するためのpタグを作成
let messageElement = document.createElement("p");
messageElement.innerText = question;
// フォームを出力するためのdivタグにフォームを追加する
let dom = document.getElementById("result");
dom.appendChild(messageElement);
for(let i = 0; i < inputs.length; i++) {
console.log(inputs[i].dataset.ans);
let but = document.createElement("button");
but.innerText = inputs[i].value;
but.dataset.ans = inputs[i].dataset.ans
dom.appendChild(but);
};
isCreated = true;
}
// 作成したフォームを削除
function deleteForm() {
document.getElementById("result").innerHTML = "";
isCreated = false;
}
こんな感じで実装しました。
でわでわ。。。
関連ページ
- WordPress プラグイン作成〜DBを使用する〜
- PHP PDO 〜MySQLにアクセスする〜
- PHP Ajax 〜DBに登録したデータを受信する〜
- Google Maps API PHP連携 〜マップ情報をDBに登録する〜
- PHP Image File 〜iPhoneやAndroidでの画像送受信の問題〜
- AngularJS Routing 〜PHPをWeb APIにする〜
- WordPress PHPカスタム〜根本的に見た目を変える〜
- WordPress PHPカスタム〜根本的に見た目を変える2〜
- Eclipse PHPプラグイン 〜ElipseでWordPress環境を構築〜
- WordPress テスト実装 〜heade-test.phpを表示〜
- AngularJS + PHP 〜WordPressと連携する〜
- AngularJS + PHP 〜AngularJSの実装〜
- AngularJS + PHP 〜AngularJSの実装2〜
- WordPress 処理解析 ～index.phpを眺める～
- WordPress Plugin NewStatPress ～アクセス解析プラグインAPIを使う～
- WordPress 処理解析 ～ログイン処理を調べる～
- WordPressカスタム〜アンケートボタンを追加する(設計)〜
- WordPressカスタム〜プラグインの作成〜
- WordPressカスタム〜ダッシュボードのプラグイン画面作成〜
- WordPressカスタム〜ダッシュボードのプラグイン画面作成２〜
- WordPressカスタム〜ダッシュボードのプラグイン画面作成3〜
- WordPress プラグイン作成〜アンケート作成プラグインを作る〜
