如何在模态中提交按钮时重新加载页面

时间:2018-06-15 17:49:21

标签: javascript php jquery ajax mysqli

我是初学者我正在使用php和javascript。当我点击模态中的更改按钮时,我想刷新页面view_create_journals.php。我在更改按钮中添加了一个功能,但它无法正常工作。我严重困在这里。请给我一些如何解决这个问题的建议。先谢谢你们。代码如下:

view_created_journals.php

        <section>
        <div class="container">
            <div class="panel-group">
                <div class="panel panel-info" style="padding: 10px 10px 10px 10px;">
                    <div class="panel-heading" style="color:black;font-size: 16px;">Plantation Journal Entry Basic Details</div>
                    <div class="panel-body">
                        <form method="post">
                        <div class="table-repsonsive">
                            <table class="table table-bordered" id="item_table1">
                                <thead>
                                    <tr>
                                        <th>Journal No.</th>
                                        <th>Range</th>
                                        <th>Beat</th>
                                        <th>Scheme</th>
                                        <th>Year</th>
                                        <th>Status</th>
                                        <th>Change Status</th>
                                        <th>View</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php 
                                    $query="select * from plantation_journal_basic_details";
                                    $result=mysqli_query($con,$query);
                                    while ($row=mysqli_fetch_assoc($result)) {
                                        $plantation_journal_no=$row['plantation_journal_no'];
                                        $ranges=$row['ranges'];
                                        $beat=$row['beat'];
                                        $scheme=$row['scheme'];
                                        $year=$row['year'];
                                        $status=$row['status'];
                                        echo "<tr>
                                                    <th style='font-weight:300'>$plantation_journal_no</th>
                                                    <th style='font-weight:300'>$ranges</th>
                                                    <th style='font-weight:300'>$beat</th>
                                                    <th style='font-weight:300'>$scheme</th>
                                                    <th style='font-weight:300'>$year</th>
                                                    <th style='font-weight:300'>$status</th>
                                                    <th><a  name='view' id='view' class='btn btn-danger btn-sm'  data-toggle='modal' data-target='#change'>Change Status</a></th>
                                                    <th><a  href='all_details.php?id=".$row['plantation_journal_no']."' name='view' id='view' class='btn btn-info btn-sm'>View</a></th>
                                                </tr>";
                                                if(isset($_POST['status'])){
                                                    $status=$_POST['status'];
                                                    $sql1="UPDATE plantation_journal_basic_details SET status='$status' where plantation_journal_no='$plantation_journal_no';";
                                                    $res=mysqli_query($con,$sql1);
                                                }
                                    }?>
                                </tbody>
                            </table>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="modal fade" id="change" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Change Status</h4>
        </div>
        <div class="modal-body">
            <form action="view_created_journals.php" method="post">
                <label>Status : </label>
                <select name="status" id="status">
                    <option value="Committed">Committed</option>
                    <option value="Edit and Submit">Edit and Submit</option>
                    <option value="Edited and Submitted">Edited and Submitted</option>
                    <option value="Approved">Approved</option>
                </select><br><br>
                <button type="submit" class="btn btn-info" onclick="myFunction()" name="submit_change">Change</button>
        </form>
        <script>
        function myFunction() {
            location.reload();
        }
        </script>
        </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

1 个答案:

答案 0 :(得分:0)

当您POST表单时,您的页面会自动刷新。那是默认的。特别是因为它似乎没有使用任何类型的ajax函数。

尽管如此,要刷新页面,您确实需要使用JavaScript。 PHP会在您请求页面时运行,而javascript会为您提供浏览器中所有更改的元素。

加载页面后PHP停止,它没有做任何新的事情。这就是JS的用武之地。您可以使用Javascript使页面交互。

在JS中重新加载页面:

window.location.reload();

这将重新加载页面。在你的案例中更具体:

你有这个按钮:

<button type="submit" class="btn btn-info" name="submit_change">Change</button>

在脚本底部添加此脚本:

<script>
  document.querySelector('input[name=submit_change]').addEventListener('click', function(e) {
    e.preventDefault();

    window.location.reload();
  });
</script>