在模态fadeOut后提交表格,可以通过以下步骤实现:
以下是一个示例代码,演示了如何在模态fadeOut后提交表格:
HTML代码:
<!-- 模态框 -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<form id="myForm">
<!-- 表单元素 -->
<input type="text" id="name" name="name" placeholder="姓名">
<input type="email" id="email" name="email" placeholder="邮箱">
<button type="submit" id="submitBtn">提交</button>
</form>
</div>
</div>
<!-- 按钮,用于打开模态框 -->
<button id="openModalBtn">打开模态框</button>
JavaScript代码:
// 获取模态框、关闭按钮和提交按钮的元素
var modal = document.getElementById("myModal");
var closeBtn = document.getElementsByClassName("close")[0];
var submitBtn = document.getElementById("submitBtn");
// 点击按钮打开模态框
document.getElementById("openModalBtn").addEventListener("click", function() {
modal.style.display = "block";
});
// 点击关闭按钮或模态框外部区域关闭模态框
closeBtn.addEventListener("click", function() {
modal.style.display = "none";
});
window.addEventListener("click", function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
});
// 点击提交按钮后的处理函数
submitBtn.addEventListener("click", function(event) {
event.preventDefault(); // 阻止表单的默认提交行为
// 获取表单数据
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
// 发送表单数据到服务器
var formData = new FormData();
formData.append("name", name);
formData.append("email", email);
var xhr = new XMLHttpRequest();
xhr.open("POST", "服务器端处理表单数据的URL", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 根据服务器返回的结果进行处理
var response = xhr.responseText;
// 在模态框中显示成功或失败的消息
// 或进行其他操作
}
};
xhr.send(formData);
});
请注意,上述代码中的服务器端处理表单数据的URL需要根据实际情况进行替换。另外,还可以根据具体需求进行进一步的优化和改进,例如添加表单验证、错误处理等。
领取专属 10元无门槛券
手把手带您无忧上云