模态表单使用Jquery .ajax向PHP提交

我试图使用PHP,jquery .ajax将一个模态表单发布到一个表但它永远不会工作..尝试使用firebug进行调试,我没有看到任何错误.我使用form action =“notes_functions.PHP”测试了表单,它工作正常.

Profile.PHP

    <div class="modal-body">

        <form class="noteform" id="notesmodal" method="post">
           <fieldset>      
          <label>Title</label>
                <input type="text" class="form-control" name="note_title" placeholder="Enter a title for your note">
                <label>Note</label>
                <textarea rows="4" cols="50" class="form-control" name="note_content" placeholder="note"></textarea>
                <label>Note type</label>
                <div class="panel-body">
                    <input type="tagsinput" id="teetete" class="tagsinput" value="" />
                </div>                                                  
                <label for="exampleInputFile">Attach a document</label>
                <input type="file" id="exampleInputFile3">
                <p class="help-block">PDF, DOCX and image files are supported.</p>
            <div class="checkBox">
                <label>
                    <input type="checkBox"> Check me out
                    <input type="label" name="note_account" value="<?PHP echo $acctname ?>"/> 
                </label>
            </div>
            <input type="hidden" name="note_creator" value="<?PHP echo $_SESSION['username'];?>"/>
              </fieldset>
             <button class="btn btn-default" id="submitnote" >ADD</button>
        </form>
    </div>

这是我的js代码

$(function(){
  $("button#submitnote").click(function(){
    $.ajax ({
      type:"POST",
      url:"notes_functions.PHP",
      data: $('form.noteform').serialize(),
      success: function(msg){
        $("#thanks").html(msg)
        $("form.noteform").modal('hide');
      },
      error: function(){
        alert("failure");
      }
    });
  });
});

notes_functions.PHP

<?PHP

include_once 'dbconnect.PHP';

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



        $notetitle = strip_tags($_POST['note_title']);
        $noteContent = strip_tags($_POST['note_content']);
        $noteAccount = strip_tags($_POST['note_account']);
        $noteCreator = strip_tags($_POST['note_creator']);

        MysqL_query("INSERT INTO account_notes (note_title, note_contents, note_account, note_creator) 
            VALUES ('$notetitle','$noteContent', '$noteAccount', '$noteCreator') ");

        echo "Name = ".$notetitle;
        echo $noteCreator;




 }

?>

解决方法:

您应该使用.submit()而不是单击(对于submit-by-enter等)并返回false以阻止常规提交.您还需要确保在创建表单元素后运行绑定事件的代码.最简单的方法是将它放在文档就绪处理程序中.

jQuery(document).ready(function ($) {
    $("#notesmodal").submit(function () {
        $.ajax({
            type: "POST",
            url: "notes_functions.PHP",
            data: $('form.noteform').serialize(),
            success: function (msg) {
                $("#thanks").html(msg)
                $("form.noteform").modal('hide');
            },
            error: function () {
                alert("failure");
            }
        });
        return false;
    });
});

并将ADD按钮更改为：

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