ArtDialog 是一個用于創建對話框的 JavaScript 庫,它提供了豐富的配置選項和API來滿足各種需求。在處理表單時,你可以利用 ArtDialog 的特性來實現。
以下是一個簡單的示例,展示如何在 ArtDialog 中處理表單:
<form id="myForm">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">密碼:</label>
<input type="password" id="password" name="password" required>
<br>
<button type="submit">提交</button>
</form>
document.getElementById('myForm').addEventListener('submit', function(event) {
// 阻止表單默認提交行為
event.preventDefault();
// 獲取表單數據
const formData = new FormData(this);
// 創建 ArtDialog 配置對象
const dialogConfig = {
title: '表單提交',
content: `
<div>
<label for="username">用戶名:</label>
<input type="text" id="username" name="username" value="${formData.get('username')}" required>
<br>
<label for="password">密碼:</label>
<input type="password" id="password" name="password" value="${formData.get('password')}" required>
</div>
`,
buttons: {
confirm: {
text: '確認提交',
callback: function() {
// 在這里處理表單數據,例如發送到服務器
console.log('表單數據已提交');
// 關閉對話框
this.close();
}
},
cancel: {
text: '取消',
callback: function() {
// 關閉對話框
this.close();
}
}
}
};
// 顯示 ArtDialog 對話框
art.dialog(dialogConfig);
});
在這個示例中,我們首先監聽了表單的 submit
事件,并阻止了默認的提交行為。然后,我們獲取了表單數據,并創建了一個 ArtDialog 配置對象。在配置對象中,我們設置了對話框的標題、內容和按鈕。在按鈕的 callback
函數中,我們可以處理表單數據,例如發送到服務器。最后,我們使用 art.dialog()
方法顯示了對話框。