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

【问题标题】：Modal form Submission to PHP using Jquery .ajax使用 Jquery .ajax 向 PHP 提交模态表单
【发布时间】：2013-12-12 03:51:37
【问题描述】：

我正在尝试使用 php、jquery .ajax 将模态表单发布到表中，但它从不工作.. 尝试使用 firebug 进行调试，但我没有看到任何错误。我使用 form action="notes_functions.php" 测试了表单，效果很好。

配置文件.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;




 }

?>

【问题讨论】：

检查$('form.noteform').serialize() 是否正常工作。在您的 php 脚本中添加一些调试：ajax 调用是通过脚本还是由于其他原因而失败？检查 firebug 中的网络调试以检查您的 ajax 调用是否正常工作。
谢谢.. 会尝试并让您知道。

标签： php jquery ajax forms

【解决方案1】：

您确实应该使用 .submit() 而不是单击（用于按输入提交等）并返回 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;
    });
});

并将添加按钮更改为：

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

【讨论】：