使用Jquery .ajax向PHP提交模态表单 [英] Modal form Submission to PHP using Jquery .ajax

问题描述

我正在尝试使用php，jquery .ajax将模态表单发布到表中，但它永远无法正常工作..尝试使用Firebug进行调试，但我看不到任何错误.我通过使用表单action ="notes_functions.php"测试了表单，效果很好.

I am trying to post a modal form to a table using php, jquery .ajax but it never works.. tried debugging using firebug and i don't see any errors. i tested the form by using form action="notes_functions.php" and it worked fine.

Profile.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

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()而不是单击(对于按输入提交等)，并返回false来阻止常规提交.您还需要确保绑定事件的代码在创建form元素之后运行.最简单的方法是将其放入文档就绪处理程序中.

You should really be using .submit() rather than click (for submit-by-enter, etc.) and returning false to block conventional submits. You also need to make sure the code to bind the events runs after the form element is created. The easiest way to do this is to put it in the document ready handler.

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

并将添加"按钮更改为:

And change the ADD button to be:

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

这篇关于使用Jquery .ajax向PHP提交模态表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！