使用Jquery .ajax提交Modal表单至PHP

Question

我正在尝试使用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>

这是我的 JavaScript 代码。

$(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;




 }

?>

- BEBO

---

检查 $（'form.noteform'）.serialize（） 是否正常工作。在您的php脚本中添加一些调试：ajax调用是否成功到达脚本或因其他原因而失败？检查Firebug中的网络调试，以确保您的ajax调用正常工作。 - Nico

谢谢，我会尝试并告诉你结果。 - BEBO

Answer 1

你应该使用 .submit() 而不是 click（用于回车提交等），并返回 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" />

- AlliterativeAlice