How do I post text area's content by click submit using jquery

Question

<div id="wrapper">
        <div id="header">
            <h1 style="color:#000000"> WELCOME TO TROLL CONTROLL </h1>
        </div>

  <div id="content">
            <textarea name="tmnl" id= "tmnl" cols="50" rows="10" placeholder="Please Share Your Story" > </textarea>
            <br/>
            <input type="submit" name= "tmnlsubmit" id="tmnlsubmit" />

            <script> 
            var text = $('#tmnl').val(); 
            $('#tmnlsubmit').click(function(){
            $('#content').append(
                '<div class="post"> 
                </div> ');
                $('#content .post').html(<h2> + Post Title + </h2>
                        <p> + text + </p>);
                                            });
            </script>
      </div>
  </div>
  <script
  src="http://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>  
</body>

I would like to be able be able to post the content of the textarea into the "content" div by creating a new div with each post. I tried everything and everytime I press submit nothing happens. Please help!

Answer 1

All are good. post_Title variable was undeclared. And apply $(.post) is enough to insert html data.better to use $(document).ready(function (){}

 $(document).ready(function () { $('#tmnlsubmit').click(function(){ var Post_Title ="Post Title" var texts = $('#tmnl').val(); $('#content').append('<div class="post"></div> '); $('.post').html('<h2>' +Post_Title+' </h2><p> '+ texts +' </p>'); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <div id="header"> <h1 style="color:#000000"> WELCOME TO TROLL CONTROLL </h1> </div> <div id="content"> <textarea name="tmnl" id= "tmnl" cols="50" rows="10" placeholder="Please Share Your Story" > </textarea> <br/> <input type="submit" name= "tmnlsubmit" id="tmnlsubmit" /> <p class="post"></p> </div> </div> 

Answer 2

There are so many issues with your code. Make following changes:

  <div id="content">
            <textarea name="tmnl" id= "tmnl" cols="50" rows="10" placeholder="Please Share Your Story" > </textarea>
            <br/>
            <input type="submit" name= "tmnlsubmit" id="tmnlsubmit" />
      </div>
  </div>

$('#tmnlsubmit').click(function(){
    var text = $('#tmnl').val();
  $('#content').append('<div class="post"></div>');
  $('#content').html('<h2>Post Title</h2><p>'+ text +'</p>');
});

Working Fiddle

Answer 3

• You have missed some quotes.
• To avoid repeat post to all .post use .append(div + h2 + p) .
• I think you need to .prepend() to show new posts first.

 input,textarea{ display:block; margin:5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <div id="header"> <h1 style="color:#000000"> WELCOME TO TROLL CONTROLL </h1> </div> <div id="content"> <input id='title' name='title' placeholder='Title' /> <textarea name="tmnl" id="tmnl" cols="50" rows="10" placeholder="Please Share Your Story"></textarea> <br/> <input type="submit" name="tmnlsubmit" id="tmnlsubmit" /> <script> $('#tmnlsubmit').click(function() { var text = $('#tmnl').val(); var title = $('#title').val(); //use .prepend() instead of append to show new posts first $('#content').append('<div class="post">' + '<h2>' + title + '</h2><p>' + text + '</p>' + '</div>'); //clear textarea $('#tmnl, #title').val(""); }); </script> </div> </div> 

Answer 4

hi please review this code

  $('#tmnlsubmit').on('click', function(e) { var text = $('#tmnl').val(); alert(text); $('#content').append("<div class='post'></div>"); $('#content .post').html("<h2>Post Title</h2> <p> "+text +" </p>"); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <div id="header"> <h1 style="color:#000000"> WELCOME TO TROLL CONTROLL </h1> </div> <div id="content"> <textarea name="tmnl" id="tmnl" cols="50" rows="10" placeholder="Please Share Your Story"> </textarea> <br/> <input type="submit" name="tmnlsubmit" id="tmnlsubmit" /> </div> </div>