javascript - 在html中重新打印表单输入

Question

所以我正在为自己设计一个网站，它通过表单从用户那里获取用户输入，在数据库中搜索相同的内容，并返回预期的输出。

下面显示的是我的 HTML 代码。

<%@ page import="java.sql.*"%>
<%@ include file="DBConn.jsp" %>
<%@ page  import = "java.sql.*"%>
<%

String ID,time,result,obj;
Statement stmt,stmt2;
ResultSet rs;
String SQL="";
String k="key";
String w="wallet";
String p="pen";
String a="atm";

ID="";
time="";    
result="";

String save=request.getParameter("bSave");
String delete=request.getParameter("BDelete");
String search=request.getParameter("BSearch");

stmt = con.createStatement(); 

if (search!=null) 
    {
    obj=request.getParameter("ID");
    if(obj.equals(k))
    {
       ID="05447646";
    }
    else if(obj.equals(w))
    {
       ID="05447647";
    }
    else if(obj.equals(p))
    {
       ID="05447649";
    }
    else if(obj.equals(a))
    {
       ID="05447650";
    }
        rs=stmt.executeQuery("Select * from tablename1 where ID='"+ ID +"'");
        while(rs.next()) {
            ID=rs.getString("ID");
            time=rs.getString("time");  }

    }
 %>

<!DOCTYPE HTML>

<html>
    <head>
        <title>Intelli-Track Search Interface</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <link href="1.css" rel="stylesheet" />
        <style type="text/css">
                #Head1{
    position: absolute;
    width: 100%;
    top: 126px;
    visibility: visible;
    left: 4px;
}

                #tab1 {
    position: absolute;
    width: 780px;
    height: 408px;
    z-index: 1;
    left: 1px;
    top: 272px;
    right: auto;
}
        #apDiv1 {
    position: absolute;
    width: 403px;
    height: 408px;
    z-index: 1;
    left: auto;
    top: 200px;
    right: -1px;
}
        .center1 {
    text-align: center;
}
        #apDiv1 .indent-1 {
    text-align: center;
    font-size: 44px;
}
        #apDiv1 p {
    text-align: center;
}
        </style>
        <script src="js/jquery-1.8.3.min.js"></script>
        <script src="css/5grid/init.js?use=mobile,desktop,1000px"></script>
        <script src="js/init.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
        $("#login_frm").submit(function(){

             //remove previous class and add new "myinfo" class
            $("#msgbox").removeClass().addClass('myinfo').text('Validating Your Login ').fadeIn(2000);


            this.timer = setTimeout(function () {
                $.ajax({
                    url: 'check.jsp',
                    data: 'un='+ $('#login_id').val() +'&pw=' + $('#password').val(),
                    type: 'post',
                    success: function(msg){
                        if(msg != 'ERROR') // Message Sent, check and redirect
                        {               // and direct to the success page

                            $("#msgbox").html('Login Verified, Logging in.....').addClass('myinfo').fadeTo(900,1,
                              function()
                              {
                                 //redirect to secure page
                                 document.location='login.jsp?user='+msg;
                              });

                        }
                        else
                        {
                            $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
                            {
                              //add message and change the class of the box and start fading
                              $(this).html('Sorry, Wrong Combination Of Username And Password.').removeClass().addClass('myerror').fadeTo(900,1);
                            });

                        }
                    }

                });
            }, 200);
            return false;
        });     

    });

 </script> 
        <noscript>
            <link rel="stylesheet" href="css/5grid/core.css" />
            <link rel="stylesheet" href="css/5grid/core-desktop.css" />
            <link rel="stylesheet" href="css/5grid/core-1200px.css" />
            <link rel="stylesheet" href="css/5grid/core-noscript.css" />
            <link rel="stylesheet" href="css/style.css" />
            <link rel="stylesheet" href="css/reset.css" />
            <link rel="stylesheet" href="css/structure.css" />
            <link rel="stylesheet" href="css/style-desktop.css" />
        </noscript>
        <!--[if lte IE 9]><link rel="stylesheet" href="css/ie9.css" /><![endif]-->
        <!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
        <!--[if lte IE 7]><link rel="stylesheet" href="css/ie7.css" /><![endif]-->

    </head> <body>
    <form name="form1" method="post" action="">
     </form>
    <nav id="nav">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="intel.html">About Intelli-Track</a></li>
                    <li><a href="signout.jsp">Logout</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
<div class="image-centered" id="Head1">
<header> <h1 align="center">Welcome to <strong>Intelli-Track</strong> Search Interface</h1><hr>
</header>

</div>

<div id="tab1">
            <table align="center" width="800" style="border:10px solid #d2d2d2">
<tr><th align="center"><h3><u>Object</u></h3></th><th width="234" align="center"><h3><u>Tag-ID</u></h3></th>
<th width="394" align="center"><h3><u>Last Accessed Date and Time</u></h3></th></tr>
<tr></tr>
<tr><td align="center"><script type="text/javascript">

        </script>
        </td><td align="center"><%=ID%></td>
<td align="center"><%=time%></td>
</tr>
</table>
</div>

    <div id="apDiv1">
      <p>&nbsp;</p>
      <h3 class="indent-1"> <span class="center1">Object Finder</span>      </h3>
      <form name="form2" width=70% method="post" action="">
      <p>
        <label for="ID">Enter object to be searched:</label>
        </p>
        <p>
          <input type="text" name="ID" id="IDd">
        </p>
        <p>
          <input name="BSearch" type="submit" class="button-big" value="Search">
                  </p>
      </form>
      <p>&nbsp;</p>
    </div>
     </body>
</html>

这是实际页面的样子：

在此处输入图像描述

那么这个页面的基本作用是，当用户在表单中输入一个值（有效值为 pen,key,atm,wallet）时，它会检索 pen 访问的最后时间和 TAG_ID，它已经存储在数据库。虽然我可以轻松检索这两个值。我不知道如何在第一列“OBJECT”中打印对象的名称，它应该再次打印有效的对象（如笔、钱包、ATM、钥匙）

我应该在这部分代码中放什么来实现相同的效果。：

<table align="center" width="800" style="border:10px solid #d2d2d2">
    <tr><th align="center"><h3><u>Object</u></h3></th><th width="234" align="center"><h3><u>Tag-ID</u></h3></th>
    <th width="394" align="center"><h3><u>Last Accessed Date and Time</u></h3></th></tr>
    <tr></tr>
    <tr><td align="center"><script type="text/javascript">


     what goes here ..???

            </script>
            </td><td align="center"><%=ID%></td>
    <td align="center"><%=time%></td>
    </tr>
    </table>

我曾尝试使用 Document.getElementbyID 但这不起作用......！！是的，也没有验证..!!

score 0 · Accepted Answer

Object Finder简单地说，如果我没记错的话，您想显示在文本框中输入的文本吗？

如果是，那么您已经在 JSP 中将其作为字符串检索，obj=request.getParameter("ID");因此只需使用<%= obj %>您想要显示该值的任何位置，例如：

<tr>
    <td align="center">
        <%= obj %>
    </td>
...

score 0 · Accepted Answer

我已经整理了一个相同的解决方案，我让数据库本身存储对象名称以及 tag_id。

因此，在那之后，我只是使用选择查询检索了数据库值，并将其发布在表中。

rs=stmt.executeQuery("Select * from tablename1 where ID='"+ ID +"'");
        while(rs.next()) {
            obj1=rs.getString("objj"); 
            ID=rs.getString("ID");
            time=rs.getString("time");  }

然后使用 .. 打印相同的内容！！

<table align="center" width="800" style="border:10px solid #d2d2d2">
    <tr><th align="center"><h3><u>Object</u></h3></th><th width="234" align="center"><h3><u>Tag-ID</u></h3></th>
    <th width="394" align="center"><h3><u>Last Accessed Date and Time</u></h3></th></tr>
    <tr></tr>
    <tr><td align="center"><%=obj1%></td><td align="center"><%=ID%></td>
    <td align="center"><%=time%></td>
    </tr>
    </table>

所以这解决了我的问题。

javascript - 在html中重新打印表单输入

2 回答 2

Related

Reference