2013-11-26 41 views
3

我想發表一個模式形式到一個表使用php,jquery .ajax但它從來沒有工作..嘗試調試使用螢火蟲,我沒有看到任何錯誤。我使用表單action =「notes_functions.php」測試了表單,並且它工作正常。模態表單提交到PHP使用jquery .ajax

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; 




} 

?> 
+0

檢查'$( 'form.noteform')序列化()'正常工作。在你的PHP腳本中添加一些調試:ajax調用是否會通向腳本,或者由於其他原因而失敗?檢查firebug中的網絡調試以檢查您的ajax調用是否正常工作。 – Nico

+0

謝謝..會嘗試並讓你知道。 – BEBO

回答

7

你真的應該使用.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" /> 
+0

感謝您的幫助..它完美的工作 – BEBO