Javascript Dialog 自訂輸入視窗 (四) 建立輸入按鈕事件及檢查資料
在上一章 Javascript Dialog 自訂輸入視窗 (三) 使用自訂物件產生輸入視窗 已經建立好表單的輸入內容,接下來就要開始建立按鈕以及檢查的步驟,以下為開始建立的步驟
- 建立輸入按鈕事件
- 建立取消事件程式碼
- 建立清除事件程式碼
- 建立檢查事件程式碼
一、建立輸入按鈕事件
在上一章的程式碼的 CreateInput() 裡面建立了三個按鈕分別為
strReturn += "<button id = 'dialog_cancel'>取消輸入</button>";
strReturn += "<button id = 'dialog_clear'>清除所有資料</button>";
strReturn += "<button id = 'dialog_ok'>確定</button>";
接下來在 CreateDialog() 裡面,建立一個用來放置這三個按鈕處理的 function ,範例取名為 CreateButton () , 接下來就開始將按鈕的事件建立起來
//建立按鈕事件
function CreateButton(){
//確認
let dialog_ok = document.getElementById("dialog_ok");
dialog_ok.addEventListener(
"click",
function(e){
//確認的程式碼
},
false
)
//清除
let dialog_clear = document.getElementById("dialog_clear");
dialog_clear.addEventListener(
"click",
function(e){
//清除的程式碼
},
false
)
//取消
let dialog_cancel = document.getElementById("dialog_cancel");
dialog_cancel.addEventListener(
"click",
function(e){
//取消的程式碼
},
false
)
}
建立好了之後,接下來開始建立裡面要處的程式碼,先以簡單的開始解說
二、建立取消事件程式碼
取消是最簡單的,只要取出原來產生標單的元素,然後清空 innerHTML 就可以了,當按下取消按鈕的時候,因為innerHTML都被清空了,所以表單自動就消失了,程式碼如下
//取消
let dialog_cancel = document.getElementById("dialog_cancel");
dialog_cancel.addEventListener(
"click",
function(e){
if (confirm(ConfirmCancel_Text)){
let mydialog = document.getElementById("mydialog");
mydialog.innerHTML = "";
}
},
false
)
三、建立清除事件程式碼
要如何取得輸入視窗內的元素 ? 最簡單的方式就是所有輸入的元素統一class的標籤,範例中為myDialogInput ,在上並沒有替輸入元素建立class,所以需要再修改一下 CreateInput() 有關建立的標籤,以下為簡略的程式碼,程式過長請自行捲動查看
//一般輸入
// <input type="text" value="" class="inputText">
strDetail += "<input type='text' value='" + Defaule_Value + "' class='inputText myDialogInput'>";
//Radio
strDetail += "<input type='radio' id='" + myId + "' value='" + input_All.getOption_data(i)[j] + "' " + myChecked + " name='radio" + i + "' class='myDialogInput'>";
//CheckBox
strDetail += "<input type='checkbox' id='" + myId + "' value='" + input_All.getOption_data(i)[j] + "' " + myChecked + " name='checkbox" + i + "' class='myDialogInput'>";
// select
strDetail += "<select id='select" + i + "' name='select" + i + "' class='myDialogInput'>";
在 CreateInput() 建立好統一的 class='myDialogInput' 之後,接下來回到剛剛的清除按鈕事件內,使用document.getElementsByClassName("myDialogInput") 便可以將相同的 class 讀取出來,然後再去清除裡面的資料即可,程式碼如下
//清除
let dialog_clear = document.getElementById("dialog_clear");
dialog_clear.addEventListener(
"click",
function(e){
if (confirm(ConfirmClear_Text)){
let myDialogInput = document.getElementsByClassName("myDialogInput");
if (myDialogInput != null){
for (let i=0;i<myDialogInput.length;i++){
if (myDialogInput[i].type == "text" || myDialogInput[i].type == "select-one"){
myDialogInput[i].value = ""
} else if(myDialogInput[i].type == "radio" || myDialogInput[i].type == "checkbox") {
myDialogInput[i].checked = false;
}
// console.log("[" + i +"]:" + myDialogInput[i].value + " ; " + myDialogInput[i].checked + " ; " + myDialogInput[i].type);
}
}
}
},
false
)
四、建立檢查事件程式碼
了解清除的做法之後,檢查就簡單多了,一樣使用document.getElementsByClassName("myDialogInput") 將每個輸入的元素進行判斷及輸出即可,範例輸出是使用 JSON 的方式將資料串接起來,使用 alert 來展示輸出,最後輸入完要關閉視窗,再使用清除的方式把 innerHTML 清空即可,程式碼如下
//確認
let dialog_ok = document.getElementById("dialog_ok");
dialog_ok.addEventListener(
"click",
function(e){
let myDialogInput = document.getElementsByClassName("myDialogInput");
if (myDialogInput != null){
let strInputData = "";
let blnCheckbox = false;
strInputData += "{";
for (let i=0;i<myDialogInput.length;i++){
if(myDialogInput[i].type != "checkbox"){
//如果之前是 checkbox , 然後這次不是 checkbox , 則要加上陣列結尾
if (blnCheckbox){
//去除結尾 ,
if (strInputData.substring(strInputData.length-1,strInputData.length) == ","){
strInputData = strInputData.substring(0,strInputData.length-1);
}
strInputData += "],";
blnCheckbox = false;
}
}
//開始判斷輸入內容
if (myDialogInput[i].type == "text" || myDialogInput[i].type == "select-one"){
strInputData += "'" + myDialogInput[i].type + "':";
strInputData += "'" + myDialogInput[i].value + "',";
} else if(myDialogInput[i].type == "radio"){
if (myDialogInput[i].checked) {
strInputData += "'" + myDialogInput[i].type + "':";
strInputData += "'" + myDialogInput[i].value + "',";
}
} else if(myDialogInput[i].type == "checkbox"){
//如果之前不是 checkbox , 則要加上陣列
if (!blnCheckbox){
strInputData += "'" + myDialogInput[i].type + "':[";
blnCheckbox = true;
}
//填入資料
if (myDialogInput[i].checked) {
strInputData += "'" + myDialogInput[i].value + "',";
}
}
}
//去除結尾 ,
if (strInputData.substring(strInputData.length-1,strInputData.length) == ","){
strInputData = strInputData.substring(0,strInputData.length-1);
}
strInputData += "}";
// console.log("input:" + strInputData);
alert("input:" + strInputData);
//關閉視窗
let mydialog = document.getElementById("mydialog");
mydialog.innerHTML = "";
}
基本上如果是內部自己使用的話,程式到這邊應該就沒問題了,輸出的內容只要傳到統一的變數內再去擷取就可以了,不過如果是要配合別的物件時,可能需要再做所謂的callback自訂事件來處理才能比較完善.
留言
張貼留言