jsp弹窗中提交from表单例子
时间: 2024-02-16 17:05:31 浏览: 229
下面是一个简单的例子,演示如何在JSP弹出窗口中提交表单:
首先,创建一个包含表单的HTML代码,保存为form.html文件:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form id="myForm" action="submit.jsp" method="post">
<label for="name">姓名</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">邮箱</label>
<input type="email" id="email" name="email" required><br><br>
<button type="submit">提交</button>
</form>
</body>
</html>
```
然后,在您的JSP页面中,使用以下JavaScript代码来弹出表单并提交表单:
```javascript
function showForm() {
var formWindow = window.open("form.html", "Form", "width=400, height=400");
formWindow.focus();
}
function submitForm() {
var form = window.opener.document.getElementById("myForm");
form.submit();
window.close();
}
```
在上面的代码中,`showForm()`函数用于弹出表单,与之前的示例相同。另一个函数`submitForm()`用于在弹出窗口中提交表单。它使用`window.opener`对象来获取父窗口中的表单元素,并使用`form.submit()`方法提交表单。最后,它使用`window.close()`方法关闭弹出窗口。
在表单HTML代码中,注意form元素的action属性和method属性。action属性指定表单提交的URL,method属性指定提交的HTTP方法(GET或POST)。在这个例子中,表单将被POST提交到submit.jsp页面。
最后,在您的JSP页面中,添加一个触发提交表单的按钮或链接,并将其与`submitForm()`函数关联:
```html
<button onclick="submitForm()">提交表单</button>
```
当用户点击这个按钮时,表单将被提交到submit.jsp页面,并在弹出窗口中关闭。
阅读全文