Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Apr 2013
    Location
    Kirkland,WA
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Comment box button that posts comments below the box on the page

    Hello!

    I have a comment box and I need it to use javascript code that will make it so when the comment button is clicked, the comment is then displayed below that box.

    This is the HTML Code for the comment box and the button
    Code:
      <aside>
                <h1>Enter a Review</h1>
                <form id="review" name="review">
                   <label id="starL" for="stars">
                      Stars (1 - 4)
                   </label>
                   <input name="stars" id="stars" type="number" value="4"
                          min="1" max="4" step="1" />
                   <label id="commL" for="comment">
                      Comments
                   </label>
                   <textarea name="comment" id="comment" value="comment"></textarea>
                   <label id="userL" for="username">
                      User
                   </label>
                   <input name="username" id="username" type="text" />
                   <input id="addReview" value="Add Review" type="button" />
                </form>
    The comment box form also has sections to add a username and a number of stars for a rating , I need those to be displayed as well.

    Any suggestions?

    Any help is appreciated!

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,112
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Is this what you are trying to do?
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Untitled </title>
    <style type="text/css">
    .commentBox { display:none; width:250px; }
    </style>
    
    </head>
    <body>
    <!-- From: http://www.codingforums.com/showthread.php?t=294091 -->
    <aside>
     <h1><input type="checkbox" onclick="toggle('cmmt0')"> Enter a Review</h1>
     <fieldset id="cmmt0" class="commentBox">
      <form id="review" onsubmit="return false">
       <label id="starL" for="stars"> Stars (1 - 4) </label>
       <input name="stars" id="stars" type="number" value="4" min="1" max="4" step="1" /><br />
       <label id="commL" for="comment"> Comments </label><br />
       <textarea name="comment" id="comment" value="comment" cols="25"></textarea><br />
       <label id="userL" for="username"> User </label><br />
       <input name="username" id="username" type="text" />
       <input id="addReview" value="Add Review" type="button" />
      </form>
     </fieldset>
    </aside>
    
    <script type="text/javascript">
    function toggle(IDS) {
      var sel = document.getElementById(IDS);
      if ((sel.style.display == '')
       || (sel.style.display == 'none')) { sel.style.display = 'block'; }
                                     else { sel.style.display = 'none'; }
    }
    </script>
    
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Apr 2013
    Location
    Kirkland,WA
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    Is this what you are trying to do?
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Untitled </title>
    <style type="text/css">
    .commentBox { display:none; width:250px; }
    </style>
    
    </head>
    <body>
    <!-- From: http://www.codingforums.com/showthread.php?t=294091 -->
    <aside>
     <h1><input type="checkbox" onclick="toggle('cmmt0')"> Enter a Review</h1>
     <fieldset id="cmmt0" class="commentBox">
      <form id="review" onsubmit="return false">
       <label id="starL" for="stars"> Stars (1 - 4) </label>
       <input name="stars" id="stars" type="number" value="4" min="1" max="4" step="1" /><br />
       <label id="commL" for="comment"> Comments </label><br />
       <textarea name="comment" id="comment" value="comment" cols="25"></textarea><br />
       <label id="userL" for="username"> User </label><br />
       <input name="username" id="username" type="text" />
       <input id="addReview" value="Add Review" type="button" />
      </form>
     </fieldset>
    </aside>
    
    <script type="text/javascript">
    function toggle(IDS) {
      var sel = document.getElementById(IDS);
      if ((sel.style.display == '')
       || (sel.style.display == 'none')) { sel.style.display = 'block'; }
                                     else { sel.style.display = 'none'; }
    }
    </script>
    
    </body>
    </html>

    I am not sure what that was supposed to do. I tried it and nothing happened :/ . Sorry if my questions seem unclear, I guess I suck at asking haha.

    I need it so when the add review button is clicked the comments, star rating, and username then display below the box.

  • #4
    New Coder
    Join Date
    Apr 2013
    Location
    Kirkland,WA
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Correction: I was missing a } , go me, anyways I see that just added a little checkbox but that is not what I need, thank you though I am going to save that in case I need that for the future (:

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,112
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Quote Originally Posted by Squeakasaur View Post
    Correction: I was missing a } , go me, anyways I see that just added a little checkbox but that is not what I need, thank you though I am going to save that in case I need that for the future (:
    So change the checkbox to a button ...
    Code:
    // Replace:
     <h1><input type="checkbox" onclick="toggle('cmmt0')"> Enter a Review</h1>
    
    // With:
     <input type="button" onclick="toggle('cmmt0')" value="Enter a Review">

  • #6
    New Coder
    Join Date
    Apr 2013
    Location
    Kirkland,WA
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    So change the checkbox to a button ...
    Code:
    // Replace:
     <h1><input type="checkbox" onclick="toggle('cmmt0')"> Enter a Review</h1>
    
    // With:
     <input type="button" onclick="toggle('cmmt0')" value="Enter a Review">
    So I don't need a new button. Here is what I need to happen:

    When user clicks on <input id="addReview" value="Add Review" type="button" />

    after filling out the form, the comment they made should then be displayed below the comment box and button onto the webpage. Does that make sense?

    Also, thanks for all your help (:

  • #7
    New Coder
    Join Date
    Apr 2013
    Location
    Kirkland,WA
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It seems I may not have been asking the right thing. Here is an example of what I need :

    http://www.htmlcommentbox.com/

    The comment box posts the comments onto the page below the box. The code I have right now just makes a box pop up with a comment...

    Code:
    function CreateComment () {
                var commentContainer = document.getElementById ("commentContainer");
                var comment = document.createComment ("Comment");
                commentContainer.appendChild (comment);
                alert (commentContainer.innerHTML);
            }

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,695
    Thanks
    80
    Thanked 4,511 Times in 4,475 Posts
    I don't to mean to ask a dumb question, but...

    What in the world is the point of this?

    Okay, you have copied the textbox into a comment area. That's trivial.
    But so what? Without server-side code (e.g., PHP/ASP/JSP) that comment will simply go away when the user leaves the page.

    Anyway, it's really dirt simple:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <form id="myForm">
    <textarea name="comment" rows="10" cols="80"></textarea>
    <br/>
    <input type="button" name="copyit" value="Do something silly with the comment" />
    </form>
    <br/>
    <div id="copiedComment"></div>
    
    <script type="text/javascript">
    var form = document.getElementById("myForm");
    
    form.copyit.onclick = 
        function() {
            document.getElementById("copiedComment").innerHTML =
                form.comment.value.replace(/\n/g,"<br/>\n");
        };
    </script>
    </body>
    </html>
    (And hello from Snohomish.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New Coder
    Join Date
    Apr 2013
    Location
    Kirkland,WA
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    I don't to mean to ask a dumb question, but...

    What in the world is the point of this?

    Okay, you have copied the textbox into a comment area. That's trivial.
    But so what? Without server-side code (e.g., PHP/ASP/JSP) that comment will simply go away when the user leaves the page.

    Anyway, it's really dirt simple:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <form id="myForm">
    <textarea name="comment" rows="10" cols="80"></textarea>
    <br/>
    <input type="button" name="copyit" value="Do something silly with the comment" />
    </form>
    <br/>
    <div id="copiedComment"></div>
    
    <script type="text/javascript">
    var form = document.getElementById("myForm");
    
    form.copyit.onclick = 
        function() {
            document.getElementById("copiedComment").innerHTML =
                form.comment.value.replace(/\n/g,"<br/>\n");
        };
    </script>
    </body>
    </html>
    (And hello from Snohomish.)
    Haha well this is just for an assignment I have. I know it seems stupid.

    And also nice to find someone from WA

  • #10
    New Coder
    Join Date
    Apr 2013
    Location
    Kirkland,WA
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Squeakasaur View Post
    Haha well this is just for an assignment I have. I know it seems stupid.

    And also nice to find someone from WA

    Also, I need to do this in an external sheet, I tried it and it didn't work but it did if I put it in the HTML. How can I do this? And how can I make it so multiple comments show?

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,695
    Thanks
    80
    Thanked 4,511 Times in 4,475 Posts
    What is an "external sheet"?

    And multliple comments will only show if they are (a) from the same user and (b) made without moving away from this one page.

    (b) can be overcome by using cookies or local storage.

    But (a) can be overcome ONLY by using server-side coding and storing the comments to a file or (much better) a database.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,695
    Thanks
    80
    Thanked 4,511 Times in 4,475 Posts
    With restrictions (a) and (b), multiple comments are trivial.

    Just change the code I gave you to:
    Code:
    form.copyit.onclick = 
        function() {
            document.getElementById("copiedComment").innerHTML += "<hr/>" +
                form.comment.value.replace(/\n/g,"<br/>\n");
        };
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,695
    Thanks
    80
    Thanked 4,511 Times in 4,475 Posts
    And since this is an assignment, I'm not going to do more of your homework for you. You can figure out how to copy the rating and user name to the <div>.

    Look here:
    http://www.codingforum.com/rules.htm
    especially look at rule 1.5
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    New Coder
    Join Date
    Apr 2013
    Location
    Kirkland,WA
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    And since this is an assignment, I'm not going to do more of your homework for you. You can figure out how to copy the rating and user name to the <div>.

    Look here:
    http://www.codingforum.com/rules.htm
    especially look at rule 1.5
    im not asking you to complete my assignment for me :P There is more to it than this. I just couldn't get my code to work and my book is a **** resource unfortunately. Thank you for your help! <3


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •