如何从模态提交数据?

时间:2015-07-25 19:01:41

标签: javascript php jquery html modal-dialog

这些按钮从数据库中回显出来,

当用户点击按钮时,用户将在提交之前看到弹出窗口。 enter image description here

这是我的代码,

    $con = getDbConnect();
    $day = date("l");

    if (mysqli_connect_errno($con)) {
        "Failed to connect to MySQL: " . mysqli_connect_error();
    } else {
        $result = mysqli_query($con, "SELECT * FROM timetableschedule WHERE day='" . $day . "'");

        while ($schedule = mysqli_fetch_array($result)) {
            ?>
  <div class="col-md-3">
    <button class="btn btn-warning" data-toggle="modal" data-target="#myModal" schedule="
    <?php
    echo "<br/>";
    echo $schedule['academicInstitution'] . "<br />";
    echo $schedule['startTime'] . "-" . $schedule['endTime'] .  "hrs<br />";
    echo "<br/>";
    ?>">
    <?php
    echo "<br/>";
    echo $schedule['academicInstitution'] . "<br />";
    echo $schedule['startTime'] . "-" . $schedule['endTime'] .  "hrs<br />";
    echo "<br/>";
    ?>
    </button>
  </div>
          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Insert Today's Activity</h4>
            </div>

            <div class="modal-body">
                <p class="activity"></p>
                <p>Click on the submit button if the above infomation is correct.</p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a class="btn btn-primary btn-ok">Submit</a>
            </div>
        </div>
    </div>
</div>

<script>
    $('#myModal').on('show.bs.modal', function(e) {
        $(this).find('.btn-ok').attr('schedule', $(e.relatedTarget).attr('schedule'));

        $('.activity').html('You have selected: <strong>' + $(this).find('.btn-ok').attr('schedule') + '</strong>');
    });
</script>
  <?php
    }
    mysqli_close($con);
}
?>
</div>

一旦用户点击提交按钮,“academicInstitution”和“duration”将被输入一个名为“myRecord”的数据库。但我不知道如何将提交按钮连接到数据库。

1 个答案:

答案 0 :(得分:0)

  • 如果您需要停留在同一页,请对服务器端php脚本进行ajax调用:http://api.jquery.com/jquery.post/ 这样,您就可以在服务器上执行所需的查询
  • 如果您可以接受重新加载页面,则可以使用html表单

此问题可能对您有用:jQuery Ajax POST example with PHP

注意如果选择ajax post方法,则不一定需要表单元素