Bootstrap模态表单提交不起作用

时间:2016-04-16 14:06:33

标签: php jquery mysql ajax twitter-bootstrap

我需要有人帮我检查一下我是否遗漏了什么。 Bootstrap模式中的表单不会提交。

我的模态(sidebar.php)的HTML代码

<!-- start Joel's modal -->
<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">E-Logbook Entry</h4>
        </div>
    <div class="modal-body">
    <form id="modal-form" method="post" action="notes_functions.php">
       <fieldset>      
      <label>Log Entry</label>
            <textarea rows="4" cols="50" class="form-control" name="note_content" placeholder="What have you learnt today?..."></textarea>
    </form>
</div>
<div class = "modal-footer">
        <button type = "button" class = "btn btn-default" data-dismiss = "modal">
           Close
        </button>
        <input type="submit" name="submit" class="btn btn-default" id="submitnote" value="Submit" />
     </div>
</div>
</div>
</div>
<!-- end Joel's modal -->

PHP文件的代码(notes_functions.php)

<?php
include_once 'database-config.php';

if (isset($_POST['submitnote'])) {

    $noteContent = strip_tags($_POST['note_content']);

    $sql = "INSERT INTO account_notes (note_contents) VALUES ('$noteContent')";
    $dbh->exec($sql);
    echo "New record created successfully";
    echo "Log details = ".$note_contents;
 }
?>

用于提交表单的AJAX代码

<script type="text/javascript">
var frm = $('#modal-form');
frm.submit(function (ev) {
    $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        dataType: "JSON",
        data: frm.serialize(),
        success: function (data) {
            alert('ok');
        }
    });

    ev.preventDefault();
 });
</script>

我似乎无法发现错误: - (

2 个答案:

答案 0 :(得分:1)

您的提交按钮不在表单中。将其放在表单中或将其添加到按钮

form="modal-form"
像这样:

<input type="submit" name="submit" class="btn btn-default" id="submitnote" value="Submit" form="modal-form" />

答案 1 :(得分:0)

两件事: -

1.而不是if (isset($_POST['submitnote'])) {使用if (isset($_POST['submit'])) {

2.在ev.preventDefault();

之前输入$.ajax({