前回までに、プラグインのハコを作成しました。
つまりは、ダッシュボードにメニューを追加、クリックすることで自作のページを表示することができるような実装を行いました。
そして、今回はアンケートのための質問と回答するためのボタンを作成する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カスタム〜ダッシュボードのプラグイン画面作成2〜
- WordPressカスタム〜ダッシュボードのプラグイン画面作成3〜
- WordPress プラグイン作成〜アンケート作成プラグインを作る〜