我如何通过单击使用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>

我希望能够通过在每个帖子中创建一个新的div来将textarea的内容发布到“ content” div中。 我尝试了一切，每按一次提交，都不会发生任何事情。 请帮忙！

Answer 1

一切都很好。 post_Title变量未声明。 并应用$(.post)足以插入html data。更好地使用$(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

您的代码有太多问题。 进行以下更改：

  <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>');
});

工作小提琴

Answer 3

• 您错过了一些报价。
• 为了避免对所有.post重复发布，请使用.append(div + h2 + p) 。
• 我认为您需要.prepend()才能首先显示新帖子。

 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

您好，请查看此代码

  $('#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>