在div中显示javascript变量的值

Question

Good day all,

I have the following html code

<form method="post" action="blog_comment_post.php" id="post_blog_comment">
    <input type="hidden" value="<?php echo $postid; ?>" name="blogid" id="blogid"/>
<textarea name="blog_comment" class="blog_comment_form" id="blog_comment" placeholder="Join the discussion"></textarea>
</form>

and, I have the following javascript code

 <script type="text/javascript">
     $(document).ready(function() {
     $("#post_blog_comment").keypress(function(evt) {
            if(evt.which == 13) {
               var commentform = $("#post_blog_comment");
               var blogid = $("#blogid").val();
               var comment = $("#blog_comment").val();
               $.post("blog_comment_post.php", { blogid: blogid, comment: comment},
                   function(data) {

                    var newmedia =
                    '<div class="blog_comm_hold"> \
                    <div class="user_comment_photo1"></div> \
                    <div class="blog_comment_"> \
                        <div class="blog_com_text">\
                        comment\
                        </div>\
                        </div>\
                    <br>\
                        </div>';

                    commentform.after(newmedia);
                    $('#post_blog_comment')[0].reset();
                });
             }
         });
     });
 </script>

What I am trying to do is have the value that I typed into the textarea field of the form be displayed after the form when the user hits the enter key. The div classes load well but I don't know how to go about getting the actual value from the var variable be displayed too.

The var comment variable as can be seen above is not displaying its value. The variable is found under the blog_com_text div in the above script. I want that when the user hits the enter key, that the value of the above comment variable is loaded inside of the respective div based on the above code. The div classes load well with no issue but how to have the value of the variable be loaded too.

Thanks much.

Answer 1

Here you go with the solution https://jsfiddle.net/xabt3vgt/

 $(document).ready(function() { $("#post_blog_comment").keypress(function(evt) { if(evt.which == 13) { var commentform = $("#post_blog_comment"); var blogid = $("#blogid").val(); var comment = $("#blog_comment").val(); //$.post("blog_comment_post.php", { blogid: blogid, comment: comment}, // function(data) { var newmedia =`<div class="blog_comm_hold"> <div class="user_comment_photo1"></div> <div class="blog_comment_"> <div class="blog_com_text"> ${comment} </div> </div> <br> </div>`; commentform.after(newmedia); $('#post_blog_comment')[0].reset(); //}); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="post" action="blog_comment_post.php" id="post_blog_comment"> <input type="hidden" value="<?php echo $postid; ?>" name="blogid" id="blogid"/> <textarea name="blog_comment" class="blog_comment_form" id="blog_comment" placeholder="Join the discussion"></textarea> </form> 

You just need to uncomment you php ajax call.

Use back tick ` (left to 1) in the keyboard and if you want to add any variable then use ${variable_name} in between the back tick.

Answer 2

Try this

<script type="text/javascript">
 $(document).ready(function() {
 $("#post_blog_comment").keypress(function(evt) {
        if(evt.which == 13) {
           var commentform = $("#post_blog_comment");
           var blogid = $("#blogid").val();
           var comment = $("#blog_comment").val();
           $.post("blog_comment_post.php", { blogid: blogid, comment: comment},
               function(data) {

                var newmedia = $('<div class="blog_comm_hold"><div class="user_comment_photo1" /><div class="blog_com_text" /><br></div>');
                newmedia.find('.blog_com_text').html(comment));
                commentform.after(newmedia);
                $('#post_blog_comment')[0].reset();
            });
         }
     });
 });

You can test with this:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="post_blog_comment"></div> <textarea id="blog_comment"></textarea> <input type="button" value="Go" id="postcomment" /> <script type="text/javascript"> $('#postcomment').click(function() { showcomment(); }); function showcomment() { var comment = $("#blog_comment").val(); var newmedia = $('<div class="blog_comm_hold"><div class="user_comment_photo1" /><div class="blog_com_text" /><br></div>'); newmedia.find('.blog_com_text').html(comment); $('#post_blog_comment').after(newmedia); $("#blog_comment").val(''); } </script>