Bootstrap Modal提交表单

时间:2016-09-18 12:29:10

标签: javascript php jquery forms twitter-bootstrap

我一直在搜索并尝试不同的组合。我会尽力解释我需要什么。我有一个填充了SQL数据的表,最后一列是一个用于打开引导模式的Edit按钮。我已经能够填充表格并创建编辑按钮,将行ID传递给模态的模态,以便在模式上填充所有输入,并在DB上填充实际数据。一切正常。但现在我甚至无法在表单上发布POST,我按下了按钮,没有任何反应。

<?php 
require 'style/header.php';
require 'core/db_connect.php';
?><div class="main">
            <div class="row">
                <table class= "table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th colspan="1" rowspan="1" style="width: 180px;" tabindex="0">BI/CC</th>
                            <th colspan="1" rowspan="1" style="width: 220px;" tabindex="0">Name</th>
                            <th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">Supplier Number</th>
                            <th colspan="1" rowspan="1" style="width: 40px;" tabindex="0">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php
                    $query = "SELECT bicc, name, supplier_number ";
                    $query .= "FROM ext_work_risk ";
                    $result = sqlsrv_query($dbhandle, $query);
                    $i=0;
                    while($fetch = sqlsrv_fetch_array($result))
                    {
                        if($i%2==0) $class = 'even'; else $class = 'odd';                           
                        echo'<tr class="'.$class.'">
                            <td>'.$fetch['bicc'].'</td>
                            <td>'.$fetch['name'].'</td>
                            <td>'.$fetch['supplier_number'].'</td>                                <td><a class="modalButton" data-bicc="'.$fetch['bicc'].'"><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#modal_edit" data-container="body">Edit</button></a></td>
                            </tr>';                         
                        }
                        ?>
                        </tbody>
                    </table>
        </div>
</div>
<div id="modal_edit" class="modal fade" style="font-weight: normal;">
    <div class="modal-dialog">
          <div class="modal-content">

          </div>
    </div>
</div>
<?php require 'style/footer.php' ?>

<!-- Script Part -->
<script type="text/javascript">
    $('.modalButton').click(function(){
        var bicc = $(this).attr('data-bicc');
        $.ajax({url:"modal/ajax_ext_risk_modal_edit.php?bicc="+bicc,cache:false,success:function(result){
            $(".modal-content").html(result);
        }});
    });
</script>

现在&#34; modal / ajax_ext_risk_modal_edit.php&#34; 文件:

<?php
$bicc = $_GET['bicc'];
//DB connect settins
require '../core/db_connect.php';
$query = "SELECT * ";
$query .= "FROM ext_work_risk WHERE bicc='$bicc'";
$result = sqlsrv_query($dbhandle, $query);
$fetch = sqlsrv_fetch_array($result);
?>
  <!-- Modal -->
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Edit Co-Worker</h4>
        </div>
        <div class="modal-body">
        <p>To edit just type the new date in the format <b>YYYY/MM/DD</b> and click save.
          <form class="form-horizontal" role="form" method="POST" action="../core/process_ext_risk_modal.php">
              <div class="form-group">
                <label class="control-label col-sm-4">BI/CC:</label>
                <div class="col-sm-7">
                  <input class="form-control" id="bicc" name="bicc" readonly="readonly" value="<?php echo $fetch['bicc']; ?>">
                </div>
              </div>
              <div class="form-group">
                <label class="control-label col-sm-4">Name:</label>
                <div class="col-sm-7">
                  <input class="form-control" id="name" readonly="readonly" value="<?php echo $fetch['name']; ?>">
                </div>
              </div>
              <div class="form-group">
                <label class="control-label col-sm-4">Sup. Number:</label>
                <div class="col-sm-7">
                  <input class="form-control" id="supplier_number" readonly="readonly" value="<?php echo $fetch['supplier_number']; ?>">
                </div>
              </div> 
          <div class="form-group">
            <label class="control-label col-sm-4">LOTO:</label>
            <div class="col-sm-7">
              <input class="form-control" id="loto" name="loto" <?php $loto = $fetch['loto']->format('Y/m/d'); if ($loto == "2000/01/01") {echo "placeholder='Please insert date'";} else {echo "value='$loto'";} ?>>
            </div>
          </div>
              <div class="form-group">
                <label class="control-label col-sm-4">Lift Platform:</label>
                <div class="col-sm-7">
                  <input class="form-control" id="lift_platform" <?php $lift_platform = $fetch['lift_platform']->format('Y/m/d'); if ($lift_platform == "2000/01/01") {echo "placeholder='Please insert date'";} else {echo "value='$lift_platform'";} ?>>
                </div>
              </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-default btn-success" type="submit" name="submit" value="Submit">Save</button>
        </div>

当我点击“保存”按钮时,没有任何反应。这是 ../ core / process_ext_risk_modal.php 文件:

<?php
include("db_connect.php");
if(isset($_POST["save"])) {
  $id = $_POST['bicc'];
  $data = $_POST['loto'];
  if(sqlsrv_query($dbhandle, "update ext_work_risk set loto='$data' where bicc='$id'"))
  echo 'success';
}
?>

最后一个文件仅用于测试,我将在表单提交中更新更多数据。

谢谢

1 个答案:

答案 0 :(得分:1)

我刚刚发现问题归功于 Fred -ii 提示:

所以这是前面的代码块:

  </form>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  <button type="button" class="btn btn-default btn-success" type="submit" name="submit" value="Submit">Save</button>
</div>

现在纠正了一个:

    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button class="btn btn-default btn-success" type="submit" name="submit" value="Submit">Save</button>
    </div>
 </form>

同时将if(isset($_POST["save"]))更改为if(isset($_POST["submit"]))。主要问题是提交外部表单和在同一个按钮上定义的两种类型。