AJAX：フォーム送信するコメントを投稿する

Question

私は、ページをリフレッシュせずに（インプレース）コメントを送信して表示する際に問題が発生しましたが、ボタンをクリックすると、ページには表示されませんが、アクションは実行されず、データベースには挿入されず、ページにコメントが表示されません。

コメントは、フェード効果で適切な場所に配置することになっています。スクリプトの

クレジットとデモ：彼は上記のリンクをint提供Original Script Here

スクリプトそれが来るように私はそれをしようが、私は私のニーズに合わせてそれを変更しなければならなかった、これは私が持っているものであれば、動作します。

フォーム：フォームと同じページに配置

<div class="comment-form"> 
    <form id="form" action="" method="post"> 
     <div class="top-form"> 
      <span class="parent name"> 
       <input class="field" type="hidden" name="Name" value="<?php echo $_SESSION["UserName"]; ?>" /> 
       <input class="field" type="text" name="Name" value="<?php echo $_SESSION["UserName"]; ?>" disabled="disabled"> 
      </span> 
      <span class="parent name"> 
       <input class="field" type="hidden" name="ID" value="<?php echo $_SESSION["UserID"]; ?>" /> 
       <input class="field" type="text" name="ID" value="<?php echo $_SESSION["UserID"]; ?>" disabled="disabled"> 
      </span> 
      <span class="parent last"> 
       <input class="field" type="hidden" name="PageID" value="<?php echo $_GET['PageID']; ?>" /> 
       <input class="field" type="text" name="PageID" value="<?php echo $_GET['PageID']; ?>" disabled="disabled"> 
      </span> 
      <div class="clear"></div> 
     </div> 
     <div class="bottom-form"> 
     <label>Choose an Option</label> 
     <select id="commentbox" name="comment" class="bs-select form-control"> 
      <option disabled selected value> -- Options -- </option> 
      <option value="First Option">First Option</option> 
      <option value="Second Option">Second Option</option> 
      <option value="Third Option">Third Option</option> 
     </select> 
     <button class="btn btn-icon submit" name="btn-sumbit" type="submit" id="submit" value="Post Message"><span class="icon"></span>Post Message</button> 
     </div> 
    </form> 
</div> 

<div class="comments"> 
    <div class="section-title"> 
     <h3>Messages</h3> 
    </div> 
    <ul class="level-1"> 
    <div class="comment-block"> 
    <?php echo $postedcomments; ?> <!-- loads previous comments on page load. it works. --> 
    </div> 
    </ul> 
</div> 

スクリプト

。

<script> 
$(document).ready(function(){ 
    var form = $('form'); 
    var submit = $('#submit'); 

    form.on('btn-submit', function(e) { 
    // prevent default action 
    e.preventDefault(); 
    // send ajax request 
    $.ajax({ 
     url: 'data/queries/comment-insert.php', 
     type: 'POST', 
     cache: false, 
     data: form.serialize(), //form serialized data 
     beforeSend: function(){ 
     // change submit button value text and disabled it 
     submit.val('Posting...').attr('disabled', 'disabled'); 
     }, 
     success: function(data){ 
     // Append with fadeIn see http://stackoverflow.com/a/978731 
     var item = $(data).hide().fadeIn(800); 
     $('.comment-block').append(item); 

     // reset form and button 
     form.trigger('reset'); 
     submit.val('Post Message').removeAttr('disabled'); 
     }, 
     error: function(e){ 
     alert(e); 
     } 
    }); 
    }); 
}); 
</script> 

クエリ

コメント-insert.php

<?php 
if (isset($_SERVER['HTTP_X_REQUESTED_WITH'])): 
include_once 'include/dbconfig.php'; 
include_once 'include/dbconnection.php'; 
$conn = dbconnect(); 

if (!empty($_POST['comment'])) { 
     $Name = mysqli_real_escape_string($conn, $_POST['Name']); 
     $PageID = mysqli_real_escape_string($conn, $_POST['PageID']); 
     $ID = mysqli_real_escape_string($conn, $_POST['ID']); 
     $Comment = mysqli_real_escape_string($conn, $_POST['comment']); 

     $sql = "INSERT INTO comments 
     (PageID, PosterID, PosterName, PostDate, Comment) 
     VALUES 
     ('$PageID', '$ID', '$Name', now(), '$Comment')"; 

     mysqli_query($conn, $sql) or die("Error: ".mysqli_error($conn));  
} 
?> 

<li><span class='comment'> 
<span class='picture'> 
<span><img src='users/images/<?php echo $_SESSION['Image'] ?>'></span> 
</span> 
<span class='content'><span class='title'><b><?php echo $Name ?></b>, Said:</span><br><?php echo $Comment ?></span> 
<span class='clear'></span> 
</span> 
</li> 

<?php 
    mysqli_close($conn); 
endif?> 

Answer 1

これは動作します：デベロッパーコンソールで

$(document).ready(function() { 
    //var form = $('#form'); 
    //var submit = $('#submit'); 

    $('#submit').on('click', function(e) { 
     e.preventDefault(); 
     // the rest of your code goes here 
    }) 
}); 

Answer 2

あなたのjQueryのイベントハンドラが存在しないjQueryオブジェクトを参照します。これでイベントハンドラの最初の行を交換してみてください：

form.on('submit', function(e) {