У меня возникла проблема с получением формы для отправки и отображения комментария без обновления страницы (на месте), но когда я нажимаю на кнопку, она выводит меня в начало страницы, но не выполняет никаких действий. вставить в базу данных и, таким образом, не отображать комментарии на странице.
Предполагается разместить комментарий в соответствующем месте с эффектом затухания.
Кредиты и демо для скрипта: оригинальный скрипт здесь
Скрипт, предоставленный в ссылке выше, работает, если я пытаюсь сделать это, поскольку он приходит, но мне пришлось изменить его, чтобы он соответствовал моим потребностям, и это то, что у меня есть.
Форма:
<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?>
Это работает:
$(document).ready(function() { //var form = $('#form'); //var submit = $('#submit'); $('#submit').on('click', function(e) { e.preventDefault(); // the rest of your code goes here }) });
Ваш обработчик события jQuery ссылается на несуществующий объект jQuery. Попробуйте заменить первую строку обработчика событий следующим:
form.on('submit', function(e) {