jQuery练习:使用jQuery获取表单数据,使用弹窗显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery练习: 获取表单数据</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#myForm').submit(function(e) {
e.preventDefault(); // 阻止表单的默认提交行为
var formData = $(this).serialize(); // 序列化表单数据为查询字符串
alert('提交的数据为: ' + formData); // 使用弹窗显示表单数据
});
});
</script>
</head>
<body>
<form id="myForm">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
这段代码使用jQuery获取表单数据,并在用户点击提交按钮时阻止表单的默认提交行为,然后使用alert()
函数弹出一个包含表单数据的警告框。这是一个简单的示例,用于演示如何在实际应用中使用jQuery来处理表单数据。
评论已关闭