jquery - 提交后在同一页面的表格中显示 html 表单值

Question

当我单击“保存”按钮时，出现错误，数据正在保存为数据库，但数据未显示在表内的 UI 页面中，表单数据值显示但立即隐藏。

这是我的代码

<form action ="/EmployeesStatus/empformsubmit"method="post">
        <table>
        
         <tr id="rowid">
          <td> <input type="hidden" id="empemailid" name="empemailname" value="${showid}" readonly="readonly"> </td> 
          
          <td> <strong> PROJECT NAME </strong> </td>
          <td class="s1"> <select id="listid" name="projectlist" class="projid" style="width:165px;padding:3px;" onchange="GetSelectedTextValue(this)"></select> </td>
          
          <td> <strong> TASK NAME </strong> </td>
          <td class="s1"> <select id="taskid" name="tasklist" class="tasksid" style="width:165px;padding:3px;"> </select></td>  
          
          <td> <strong> COMPLETE HOURS </strong> </td>
          <td class="s1"> <input type="text" id="emphours" name="hours" class="completehrs"> </td> 
          
           <td> <strong> COMPLETE DATE </strong> </td>
           <td class="s1"> <input type="date" id="date" name="dates" style="width:165px"> </td> 
         </tr>
           
         <tr>
            <td> <input type="submit" value="Submit" id="btn1" /> </td> 
            <td> <input type="button" value="LOGOUT" onclick="logoutPage()" id="btn2"/></td>
            <td> <input type="button" value="VIEW TASK LIST" onclick="viewemployeetasklist()" id="btn3"/></td>
         </tr>
         
        </table>
        </form>
        
        <table border="2px" id="table1">
            <tbody>
                <tr>
                <th> PROJECT ID </th>
                <th> TASK ID </th>
                <th> HOUR </th>
                </tr>
            </tbody>
        </table>
        
        <script type="text/javascript">
        
        $("#btn1").click(function(){
        
            var tbdy = $('#table1').children('tbody');
            var tables = tbdy.length ? tbdy : $('#table1');
            var name111 = $('.projid').val();
            var email111 = $('.tasksid').val();
            var dob111 = $('.completehrs').val();
            $("#table1").show();
            tables.append('<tr><td>'+name111+'</td><td>'+email111+'</td> 
           <td>'+dob111+'</td></tr>');
           })
           </script>

我尝试使用jquery但没有得到完美的解决方案

提前谢谢你。

Answer 1

当您提交表单时，页面会重新加载。尝试触发提交事件并阻止重新加载。

你的问题不太清楚...如果你想显示表单提交到达的数据，你可以这样做:

$('form').on('submit', function(e) {
    e.preventDefault();

    //YOUR CODE HERE

    return false;
});

https://jsfiddle.net/alexdant91/f7Lmh1jd/2/

“点击保存按钮时出现错误”请与我们分享该错误，因为我们看不到任何与数据库相关的代码。

由于您的问题不太清楚，如果这不是您需要的，请告诉我们更多信息。