Adding comments into database with PHP (Using AJAX to prevent page reload)

Question

I'm trying to make a comments system which adds to the database using PHP and AJAX without having to reload the page (if I reload the page it will pick another film suggestion at random).

At the moment it doesn't seem to work - when I click "Submit comment" it reloads the page (loading a different film) and nothing is inserted to the database.

I'd also like to be able to have the comment appear in the comments section below after submission if possible.

Thanks for your help

yourfilm.php (the process page that displays a film, specified by options selected on a form on the previous page)

<?php //recaptcha_process.php 
    require_once("php/checklog.php");
    require_once('php/functions.php'); 
    require_once('php/db_connect.php');

    include_once("php/home_start_logged.php");  

    if (!$db_server){ 
        die("Unable to connect to MySQL: " . mysqli_connect_error()); 
        $db_status = "not connected"; 
    }else{

        //CODE TO QUERY DATABASE TO GO HERE
        //Capture form data, if anything was submitted
        if (isset($_POST['genreList']) && ($_POST['genreList'] != '')){
            $genre = clean_string($db_server, $_POST['genreList']);
            //create the SQL query
            $query = "SELECT * FROM films WHERE genreID=$genre ";

            //$endquery = " AND (";
            $endquery = "";
            $orFlag = false;

            if (isset($_POST['streamingCheckbox1']) && ($_POST['streamingCheckbox1'] != '')){                   
                $endquery .= " netflix IS NOT NULL";
                $orFlag = true;
            }
            if (isset($_POST['streamingCheckbox2']) && ($_POST['streamingCheckbox2'] != '')){
                if($orFlag){
                    $endquery .= " OR ";
                }
                $endquery .= " lovefilmInstant IS NOT NULL";
                $orFlag = true;
            }
            if (isset($_POST['streamingCheckbox3']) && ($_POST['streamingCheckbox3'] != '')){
                if($orFlag){
                    $endquery .= " OR ";
                }
                $endquery .= " blinkbox IS NOT NULL";
            }               
            if($endquery != "") $query .= " AND (" . $endquery . ")";

            $query .= " ORDER BY (SELECT FLOOR(MAX(filmID) * RAND()) FROM films) LIMIT 0,1;"; 


            //query the database
            mysqli_select_db($db_server, $db_database);
            $result = mysqli_query($db_server, $query);
            if (!$result) die("Database access failed: " . mysqli_error($db_server) . $query);

            //if there are any rows, print out the contents
            if ($row = mysqli_fetch_array($result)) {

                //Whether to display links or not for purchase and streaming
                if ($row['netflix'] == null){
                    $netflixLink = "";
                }else{
                    $netflixLink = "<a href='" . $row['netflix'] . "'>" . "<img class='streamingLogo' src='images/netflix_logo.jpg' alt='Watch on Netflix'></a>";
                }
                if ($row['lovefilmInstant'] == null){
                    $lovefilmLink = "";
                }else{
                    $lovefilmLink = "<a href='" . $row['lovefilmInstant'] . "'>" . "<img class='streamingLogo' src='images/Lovefilm_logo.jpg' alt='Watch on LoveFilm'></a>";
                }
                if ($row['blinkbox'] == null){
                    $blinkboxLink = "";
                }else{
                    $blinkboxLink = "<a href='" . $row['blinkbox'] . "'>" . "<img class='streamingLogo' src='images/blinkbox_logo.jpg' alt='Watch on Blinkbox'></a>";
                }
                if ($row['itunes'] == null){
                    $iTunesLink = "";
                }else{
                    $iTunesLink = "<a href='" . $row['itunes'] . "'>" . "<img class='streamingLogo' src='images/itunes_logo.jpg' alt='Buy now on iTunes'></a>";
                }
                if ($row['googlePlay'] == null){
                    $googleplayLink = "";
                }else{
                    $googleplayLink = "<a href='" . $row['googlePlay'] . "'>" . "<img class='streamingLogo' src='images/googleplay_logo.jpg' alt='Buy now on Google Play'></a>";
                }               
                if ($row['amazon'] == null){
                    $amazonLink = "";
                }else{
                    $amazonLink = "<a href='" . $row['amazon'] . "'>" . "<img class='streamingLogo' src='images/amazon_logo.jpg' alt='Buy now on Amazon'></a>";
                }


                //Body content for film             
                $str_result = "<section>
                                <div class='sectionColumnThird'>
                                    <img class='poster' src='images/posters/" . $row['poster'] . ".jpg'>
                                </div>
                                <div class='sectionColumnTwoThirds'>
                                    <h2>" . $row['filmName'] . "</h2>
                                    <p class='filmDate'>(" . $row['filmYear'] . ")</p>
                                    <a class='formButton' href='#comments'>Jump to comments</a>
                                </div>
                               </section>
                               <section>
                                   <h3>Not interested?</h3>
                                   <a class='formButton' href='#yourfilm.php'>Find another film</a>
                               </section>
                               <section>
                                <h3>Rating</h3>
                                <p><span class='bold'>IMDB:</span> " . $row['ratingIMDB'] . "</p>
                                <p><span class='bold'>Rotten Tomatoes:</span> " . $row['ratingRottenTomatoes'] . "</p>
                                <p><span class='bold'>Metacritic:</span> " .  $row['ratingMetacritic'] . "</p>
                               </section>
                               <section>
                                <h3>Synopsis</h3>
                                <p>" . $row['synopsis'] . "</p>
                               </section>
                               <section>
                                <h3>Trailer</h3>
                                <div class='videoWrapper'>
                                    <iframe src='//www.youtube.com/embed/" . $row['trailer'] . " ' frameborder='0' allowfullscreen></iframe>
                                </div>
                               </section>
                               <section>
                                <h3>Cast & Crew</h3>
                                <p><span class='bold'>Director:</span> " . $row['director'] . "</p>
                                <p><span class='bold'>Writers:</span> " . $row['writer'] . "</p>
                                <p><span class='bold'>Cast:</span> " . $row['cast'] . "</p>
                               </section>
                               <section>
                                <h3>Details</h3>
                                <p><span class='bold'>Certificate:</span> " . $row['certificate'] . "</p>
                                <p><span class='bold'>Country:</span> " . $row['country'] . "</p>
                                <p><span class='bold'>Language:</span> " . $row['language'] . "</p>
                               </section>
                               <section>
                                <h3>Streaming Services</h3>"
                                . $netflixLink . $lovefilmLink . $blinkboxLink ."
                               </section>
                               <section>
                                <h3>Buy now</h3>"
                                . $iTunesLink . $googleplayLink . $amazonLink ."
                               </section>
                               <section>
                                <form id='frmFilmComments' action='yourfilm.php' method='post'>
                                    <a id='comments' class='anchor'></a><h3>Comments</h3>
                                    <p><span class='bold'>Did you like " . $row['filmName'] ."?</span></p>
                                    <select class='selectbox' name='yesornoList'>
                                        <option value='Yes'>Yes</option>
                                        <option value='No'>No</option>
                                    </select>

                                    <p id='commentResult'></p>
                                    <p><span class='bold'>Provide your feedback here:</span></p>
                                    <textarea id='commentBox' class='insertComment' rows='2' cols='30' name='comment'></textarea><br>
                                    <input class='formButton' type='submit' id='submitComment' name='submitComment' value='Submit comment' /> 
                                </form>";

                $filmID=$row['filmID'];

                mysqli_free_result($result);



                //Print out Like it - Comments              
                $likeitQuery = "SELECT * FROM comments
                                JOIN users on users.userID = comments.userID
                                WHERE likeit='Yes' AND filmID=$filmID"; 
                $likeitResult = mysqli_query($db_server, $likeitQuery); 
                if (!$likeitResult) die("Database access failed: " . mysqli_error($db_server)); 
                while($row = mysqli_fetch_array($likeitResult)){ 
                    $str_likedcomments .= "<p>" . $row['username'] . " - " . $row['commDate'] . "<br>"
                                          . $row['comment'] . "<br>
                                          &#x25B2;(" . $row['upvotes'] . ") ǀ &#x25BC; (" . $row['downvotes'] . ")</p>"; 
                } 
                mysqli_free_result($likeitResult);
                $likedcomments = "<div class='half subSection'>
                                    <h4>Liked it</h4>"
                                    . $str_likedcomments . 
                                 "</div>";



                //Print out disike it - Comments
                $dislikeitQuery = "SELECT * FROM comments
                                JOIN users on users.userID = comments.userID
                                WHERE likeit='No' AND filmID=$filmID"; 
                $dislikeitResult = mysqli_query($db_server, $dislikeitQuery); 
                if (!$dislikeitResult) die("Database access failed: " . mysqli_error($db_server)); 
                while($row = mysqli_fetch_array($dislikeitResult)){ 
                $str_dislikedcomments .= "<p>" . $row['username'] . " - " . $row['commDate'] . "<br>"
                                      . $row['comment'] . "<br>
                                      &#x25B2;(" . $row['upvotes'] . ") ǀ &#x25BC; (" . $row['downvotes'] . ")</p>";  
                } 
                mysqli_free_result($dislikeitResult);
                $dislikedcomments = "<div class='half subSection'>
                                    <h4>Disliked it</h4>"
                                    . $str_dislikedcomments . 
                                 "</div>";


            }else{
                $str_result = "<section><h3>Sorry</h3><p>We couldn't find any films that match your terms. </br> <a href='home.php'>Please try again.</a></p></section>";
            }


        }else{
            $str_result = "<section><h3>Sorry</h3><p>No genre was chosen.</br><a href='home.php'>Please try again.</a></p></section>";

        }

    $message = $str_result . $likedcomments . $dislikedcomments . "<section/>";

    }

    //Comments
    $userID = $_SESSION['userID'];
    $likeit = $_POST['yesornoList'];
    $comment = clean_string($db_server, $_POST['commentBox']);

    //Get any submitted comments and insert 

     if ($comment != '') { 
         $query = "INSERT INTO comments (userID, filmID, comment, likeit) VALUES ($userID, $filmID, $comment)"; 
         mysqli_select_db($db_server, $db_database); 
         mysqli_query($db_server, $query) or 
                        die("Insert failed: " . mysqli_error($db_server)); 
         $message = "Thanks for your comment!"; 
     } 

    require_once('php/db_close.php');

?>


            <div id="top" class="content container headerMargin">
                <div class="content wrapper">    
                   <?php echo $message; ?>
                </div>
            </div>

<?php 
require_once('php/home_end.php');
?>

addCommentAJAX.js

$("#submitComment").click( function() {
 $.post( $("#frmFilmComments").attr("action"), 
         $("#frmFilmComments :input").serializeArray(), 
         function(info){ $("#commentResult").html(info); 
   });
 clearInput();
});

$("#frmFilmComments").submit( function() {
  return false; 
});

function clearInput() {
    $("#frmFilmComments :input").each( function() {
       $(this).val('');
    });
}

home_start_logged.php is simply a header template, I won't post it all but it contains:

<script src="js/addCommentAJAX.js" type="text/javascript"></script>

EDIT: Added more specific info about the error (see above).

What do you mean by : "At the moment it doesn't seem to work " post a specific problem bro :) — Awlad Liton
– Awlad Liton, Commented Dec 31, 2013 at 17:57
"At the moment it doesn't seem to work" ... how? Post errors. — Digital Chris
– Digital Chris, Commented Dec 31, 2013 at 17:57

zerzer · Accepted Answer · 2013-12-31 18:09:47Z

1

there is not enough data to make an exact solution, but i see two problems :

1 - you are not preventing the default form submit in your submit function event.preventDefautlt() or just change the input type attribut in your form to button rather than submit

2 - if you wan't the comment that the user just sent to show up then you can use the function append() to make it show at the end of the comment section this is the fastest way to do this rather than waiting for it to show from the database

answered Dec 31, 2013 at 18:09

zerzer

6122 gold badges8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

jb93 Over a year ago

I changed the <input> to <button> and the new addCommentAJAX.js is as follows:

$("#submitComment").click( function( event ) { event.preventDefault(); $.post( $("#frmFilmComments").attr("action"), $("#frmFilmComments :input").serializeArray(), function(info){ $("#commentResult").html(info); }); clearInput(); }); $("#frmFilmComments").submit( function( event ) { event.preventDefault(); return false;	 }); function clearInput() { $("#frmFilmComments :input").each( function( event ) { event.preventDefault(); $(this).val(''); }); }

Unfortunately it still refreshes

zerzer Over a year ago

not <input> change the <input type="submit" > to <input type="button">

jb93 Over a year ago

Sorry, I just tried changing it to <input type="button">. The page does not reload now, now nothing happens. I've checked the database and nothing has been submitted

zerzer Over a year ago

now nothing get into the database because you are miss using .serializeArray() you are posting multiple arrays i would suggest to use .serialize()

jb93 Over a year ago

Unfortunately, no change

Jordan · Accepted Answer · 2013-12-31 18:02:24Z

0

So what is probably happening here is that you haven't used event.preventDefault() This will stop your submit button from reloading the page, which will allow your ajax code and your code posting the comment to finally get run.

http://api.jquery.com/event.preventdefault/

The idea behind preventDefault is that it stops the submit button from doing its default behavior, which is submitting a form and reloading the page.

answered Dec 31, 2013 at 18:02

Jordan

1,4338 silver badges14 bronze badges

3 Comments

jb93 Over a year ago

The new addCommentAJAX.js is as follows:

$("#submitComment").click( function( event ) {  event.preventDefault();  $.post( $("#frmFilmComments").attr("action"),           $("#frmFilmComments :input").serializeArray(),           function(info){ $("#commentResult").html(info);     });  clearInput(); });   $("#frmFilmComments").submit( function( event ) {  event.preventDefault();   return false;	 });   function clearInput() { 	$("#frmFilmComments :input").each( function( event ) { 		 event.preventDefault(); 	   $(this).val(''); 	}); }

Unfortunately it still refreshes

Jordan Over a year ago

@jb93 You shouldn't need the last preventDefault, but I doubt that is causing the issue, I will try to get back to you.

jb93 Over a year ago

I removed the last preventDefault but unfortunately you were right. I really appreciate your help!

Momin · Accepted Answer · 2013-12-31 18:17:13Z

0

can you change this

$("#submitComment").click( function() {
 $.post( $("#frmFilmComments").attr("action"), 
         $("#frmFilmComments :input").serializeArray(), 
         function(info){ $("#commentResult").html(info); 
   });
 clearInput();
});

to

function onclicksth() {
 $.post( $("#frmFilmComments").attr("action"), 
         $("#frmFilmComments :input").serializeArray(), 
         function(info){ $("#commentResult").html(info); 
   });
 clearInput();
}

and change submitComment type to button? There is a better way to do this too:

   //rough code including the submit and post data
 $('form.frmFilmComments').on('submit', function() {
                        if(confirm('Do u want to input that field')){
                        fields-=1;
                        var obj = $(this), 
                            url = obj.attr('action'),
                            method = obj.attr('method'),
                            data = {};
                        $("#hdnlstcount").val(fields);
                        //console.log(fields);
                        obj.find('[name]').each(function(index, value) {

                            var obj = $(this),
                                name = obj.attr('name'),
                                value = obj.val();
                            data[name] = value;
                        });
                        $.ajax({
                            url: url,
                            type: method,
                            data: data,
                            success: function(response2) {
                                //do sth with success response
                            }
                        });
                        return false; //disable refresh
                                             clearInput();
                        }
                    });

answered Dec 31, 2013 at 18:17

Momin

86812 silver badges22 bronze badges

2 Comments

jb93 Over a year ago

I changed the input type to button and I tried your code too - now when I click "Submit comment" nothing happens (at least it doesn't reload now!) I checked the database and nothing has been submitted

Momin Over a year ago

what about the second one?its for submit type input?

Collectives™ on Stack Overflow

Adding comments into database with PHP (Using AJAX to prevent page reload)

3 Answers 3

5 Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related