如何在单击提交按钮时显示隐藏表,并在php中的数据库表中插入数据?

时间:2017-06-09 06:30:07

标签: javascript php jquery html mysql

我有一个用于输入项目名称和工作表名称的项目名称和工作表名称将保存在项目表中。基于此,我将空值插入另一个表格'数据'。我正在使用可编辑的表来更新数据库中的这些空值。我希望隐藏此表,直到提交项目名称和工作表名称,并且一旦提交了值,则只显示表格。我已经尝试了很多但是在点击提交按钮后,我的表格会一直显示,直到页面重新加载,并且在加载完成后会显示消息。我的代码部分如下所示。

    <script>
     $(function(){
     $('button#showit').on('click',function(){  
    $('#myform').show();
     });
     });
    </script>
    <form class="form-horizontal" action="db.php" id="#form1" 
     onSubmit="function();" method="post">

    <input type="text" class="form-control1" name="projectname" 
   id="projectname" required >
    <input type="text" class="form-control1" name="sheetname" id="sheetname" 
    required >
    <button type="submit" name="submit" id="button" class="btn-
     success btn" >Submit</button>
        </form>
      <div class="tab-content"  id="myform" style="display:none">
     <div class="tab-pane active" id="horizontal-form">
     <?php 

       $s4 = "SELECT * FROM data ORDER BY data_id DESC LIMIT 1";
     $res = mysqli_query($bd, $s4);
    while ($row = mysqli_fetch_array($res))
                                 {
                            ?>  
   <table class="table table-bordered" style="width:50%;">
    <thead>
    <tr>
    <th>Sr.no</th>
    <th>Column Name</th>

       </tr>
     </thead>
     <tbody>

   <tr class="odd">
    <td>1</td>
     <td id="d1:<?php echo $row['data_id']; ?>" contenteditable="true"><?php 
    echo $row['d1']; ?></td>          
   </tr>

   .
   .
    .
   </tbody>
    </table>
   <?php } ?>
   </div>
   </div>
 on db.php I have used to get back on my previous page
    <script>
                    alert('Sheet Created Successfully');
                    window.location.href='index.php?success';

   </script>

2 个答案:

答案 0 :(得分:0)

我的代码无法帮助你,也许你应该重新调整一些东西,但是,这里有一些帮助:

$('#firstform').submit(function () {
//handle here a function to send data to db.php, then:
sendData();
$('#firstform').hide();
$('#hidedform').show();
     return false;
    });

如果您控制提交按钮不刷新页面,则可以隐藏第一个表单并显示第二个表单。如果您发布更多代码,我会尝试更清楚。

(“return false”使提交功能不刷新页面)

here are another post about not refreshing...maybe it helps

答案 1 :(得分:0)

<!-- Example of jQuery Reference -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<!-- Your Hiding Script -->
<script type='text/javascript'>
    $(document).ready(function(){
      $("#AddNewRecord").hide();
    });
</script>

<!-- Your Markup -->
<table border="1" cellpadding="2" id="AddNewRecord">
    <tr style="width:25px;">
        <td>Site</td>
    </tr>
</table>