2

here is a snippet of the code, I'm trying to append the new comment to the end of the last comment, I used .val to capture the value of the entry, but when I click the submit button it doesn't add it to the selector that I used in appendTo (I'm just trying it with the title first knowing that I can get the rest to work if I can get the title going), thanks for your help, really new to this.

     <div class="row newCommentForm" style="display:none" id="newCommentForm">
        <div class="comments-form col-md-6">
            <h2 class="title">Add your comment</h2>
            <form>
                <div class="form-group">
                    <label for="addCommentTitle">Title</label>
                    <input type="text" class="form-control" id="addCommentTitle" placeholder="Title">
                </div>
                <div class="form-group">
                    <label for="addCommentEmail">Email</label>
                    <input type="email" class="form-control" id="addCommentEmail" placeholder="Email">
                </div>
                <div class="form-group">
                    <label for="addCommentContent">Content</label>
                    <textarea type="text" class="form-control" id="addCommentContent" placeholder="Content"></textarea>
                 </div>

                <button type="submit" class="btn btn-default" id="newCommentSubmissionButton">Submit</button>
            </form>

        </div>

    </div>

and here's the javascript that's not working:

        sabio.page.startUp = function ()
    {
        var commentTitle = $('#addCommentTitle').val();                
        var commentEmail = $('#addCommentEmail').val();
        var commentContent = $('#addCommentContent').val();  
       $('#displayCommentsButton').on('click', function (event)
        {
            $(".comments").show();
            $('html, body').animate(
            {
                scrollTop: $(".comments").offset().top
            }, 2000);
            event.preventDefault();
        }
        );

        $('#addCommentButton').on('click', function (event)
        {
             $('#newCommentForm').show();
             event.preventDefault();
         }
         );

         $('#newCommentSubmissionButton').on('click', function (event)
         {
             $("<p>" + commentTitle + "</p>").appendTo('.row commentsContainer');
                event.preventDefault();
         }

             );
ranah
  • 707
  • 1
  • 6
  • 11
  • this should do it `$('.row.commentsContainer').append("

    " + commentTitle + "

    ");` NOTICE: fot this to work, you need something like `
    ` in your html code
    – GrafiCode Oct 15 '15 at 21:56
  • 2
    I think the only thing causing you problems is ('.row commentsContainer'). commentsContainer is not a tag so you're either missing the '.' if it's a class or '#' if it's an ID. – Gregg Duncan Oct 15 '15 at 22:08

0 Answers0