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)を適用することは$(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

を使用するようにHTML data.betterを挿入するのに十分である、あなたのコードで非常に多くの問題があります。以下の変更を行います。

<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

• あなたは、いくつかの引用符を逃しました。
• すべてに繰り返し投稿することを避けるため.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>