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

Question

我正在尝试使用php，jquery .ajax将模态表单发布到表中，但它永远无法正常工作..尝试使用firebug进行调试，但我没有看到任何错误。 我通过使用表单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;




 }

?>

Answer 1

您确实应该使用.submit（）而不是单击（按输入提交等），然后返回false来阻止常规提交。 您还需要确保绑定事件的代码在创建form元素之后运行。 最简单的方法是将其放入文档就绪处理程序中。

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;
    });
});

并将“添加”按钮更改为：

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