js之同一页面中的多表单提交

最新推荐文章于 2022-09-08 18:47:16 发布

gamedev˚

最新推荐文章于 2022-09-08 18:47:16 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：【编程语言】➣ js 文章标签： javascript 表单

欢迎转载，注明作者和出处就好！如果有任何问题或文章存在明显的谬误，请留言说明原因谢谢，我也可以知道原因，不断进步！

本文链接：https://blog.youkuaiyun.com/Coder__CS/article/details/71076022

【编程语言】➣ js 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用Java和HTML实现的同一页面内多个表单的提交与处理方法。通过设置三个表单并利用JavaScript进行表单验证，确保用户输入有效数据。提交后，服务器端通过request.getParameter()方法获取表单数据，并展示提交结果。

主要应用参数的传递，通过传递参数值得不同获取不同的信息。首先设置3个显示表单数据的对象(text1,text2,text3)，并且设置其初始值为空字符串，其次通过request.getParameter()方法请求对应的表单参数，如果请求的参数不为空空字符串，则将参数赋给相应的对象，最后通过表单元素提交后相应的信息。

index.jsp

<%@ page contentType="text/html; charset=gbk" language="java" import="java.sql.*" errorPage="" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>同一个页中的多表单提交</title>
<link href="Css/Css.css" rel="stylesheet" type="text/css">
</head>
<script language="javascript" type="">
function Mycheck(){
if(form1.text1.value=="")
{alert("请输入表单的内容！！！");form1.text1.focus();return;}
form1.submit();
}
</script>
<script language="javascript" type="">
function Mycheck1(){
if(form2.text2.value=="")
{alert("请输入表单的内容!!");form2.text2.focus();return;}
form2.submit();
}
</script>
<script language="javascript" type="">
function Mycheck2(){
if(form3.text3.value=="")
{alert("请输入表单的内容!!!");form3.text3.focus();return;}
form3.submit();
}
</script>
<%
request.setCharacterEncoding("gb2312");
String text1="";
String text2="";
String text3="";
String message="";
if(request.getParameter("text1")!=null){
text1=request.getParameter("text1");
message="提交了第1个表单，提交内容为"+text1+"";
}
if(request.getParameter("text2")!=null){
text2=request.getParameter("text2");
message="提交了第2个表单，提交内容为"+text2+"";
}
if(request.getParameter("text3")!=null){
text3=request.getParameter("text3");
message="提交了第3个表单，提交内容为"+text3+"";
}



%>
<body>
<table width="368" height="261" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td background="images/00.jpg"><table width="303" height="112" border="0" align="left" cellpadding="0" cellspacing="0">
      <tr>
        <td width="48">&nbsp;</td>
        <td width="255" align="right"><table border="0" cellspacing="0" cellpadding="0" align="center">
          <tr>
            <td width="288"><form name="form1" method="post" action="?formid=1">
        表单1：
            <input name="text1" type="text" class="text" value="<%=text1%>">
            <input type="button" name="submit1" value="提交" onClick="Mycheck();">
            </form></td>
          </tr>
          <tr>
            <td><form name="form2" method="post" action="?formid=2">
        表单2：
            <input name="text2" type="text" class="text" value="<%=text2%>">
            <input type="button" name="submit2" value="提交" onClick="Mycheck1();">
            </form></td>
          </tr>
          <tr>
            <td><form name="form3" method="post" action="?formid=3">
        表单3：
            <input name="text3" type="text" class="text" value="<%=text3%>">
            <input type="button" name="submit3" value="提交" onClick="Mycheck2();">
            </form></td>
          </tr>
          <tr>
            <td height="10" align="center">
            <%if(!message.equals("")){%>
            <%=message%>，
            <a href="#" onClick="javascript:history.go(-1);">返回</a>
            <%}%>
            </td>
          </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

Css.css

/* CSS Document */
td {
    font-size: 9pt;
}

input.text {
    height: 20;
    border: 1px solid;
}

input.button {
    width: 40;
    height: 18;
    border: 1px solid;
}

input.file {
    width: 300;
    border: 1px solid;
}

textarea {
    border: 1px solid;
}

A {
    text-decoration: none;
    color: black;
}

A:hover {
    text-decoration: underline;
    color: red;
}

A.nq {
    text-decoration: none;
    color: black;
}

A.nq:hover {
    text-decoration: underline;
    color: white;
}

text {
    height: 20;
    border: 1px solid;
}