Samudrala Ramu Samudrala Ramu - 1 month ago 9
HTML Question

How To Put Values Dynamically

I am trying to add comments at below post as like

(Posted By : Some name from ny text box)
and In next line
(Comment: )
again in next line print that
textarea's value
below of that post, so please my trying code is here .Please let me know any mistakes in my code. Please help me anybody expert in this type of functionality in my alert its working fine but not appended every post. Thanks in advance.



var cnt;
var name;
$(document).ready(function(){
$('#comment').click(function(){
$('#form1').html("<div class=\"form-group\" ><input type=\"text\" class=\"form-control\" placeholder=\"Please Enter Your Name Or Email\" id=\"namefield\"/> <textarea class=\"form-control\" placeholder=\"Leave A Comment Here\" style=\"width:100%; height:150px;\" id=\"coment-txt\" required></textarea></div><button class=\"btn btn-success\" id=\"post\">Post</button>");
$('#post').click(function(){
cnt = $('#coment-txt').val();
name = $('#namefield').val();
alert('Posted by '+name+'\n'+' Comment : '+'\n'+cnt);

});
});
$('#newcoment').html('Posted by '+name+'\n'+' Comment : '+'\n'+cnt);
});

/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {height: 1500px}

/* Set gray background color and 100% height */
.sidenav {
background-color: #f1f1f1;
height: 100%;
}

/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
.text-justify{
text-align:justify;
}
.cursor{cursor:pointer;}

/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height: auto;}
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>Samudrala's Blog</h4>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#section1">Home</a></li>
<li><a href="#section2">Friends</a></li>
<li><a href="#section3">Family</a></li>
<li><a href="#section3">Photos</a></li>
<li><a href="#section3">Likes</a></li>
<li><a href="#section3">DisLikes</a></li>
</ul><br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search Blog..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="col-sm-9 sidenav" style="background:#337ab7; color:#fff;">
<h4>RECENT POSTS</h4>
<hr>
<h2>I Like Updated Technologies</h2>
<h5><span class="glyphicon glyphicon-time"></span> Post by Samudrala, Oct 21, 2016.</h5>
<h5><span class="label label-danger">Updated Technologies</span> <span class="label label-primary">Samudrala</span></h5><br>
<p class="text-justify">Nowadays technology has brought a lot of changes to our life, especially in education and communication. In communication, the major changes happen in the way we communicate with other people. We do not need to meet them in person or face to face to say what is in our mind. We simply can phone them or do video chat using Internet connection. In the past, we spent a long time to travel to a distant place, but now we just need hours or even minutes to go there using the latest technology in a form of transportation means. In education, the changes have brought advantages to students and teachers. For instance, students can do their homework or assignment faster because using Internet. The teachers also get some advantages from it. They can combine their teaching skill with it and produce some interesting materials to teach like colorful slides to deliver the lesson and animation to show how things happen. In conclusion, technology itself has given us advantages to improve our life's quality.

</p>
<p id="newcoment"></p>
<br><br>
<h4>Leave a Comment : <span class="label label-success cursor" id="comment">Comments</span></h4>
<br/>
<form role="form" id="form1">
</form>


</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>




Answer

Move your appending function into your click event

var cnt;
var name;
$(document).ready(function(){
$('#comment').click(function(){
  $('#form1').html("<div class=\"form-group\" ><input type=\"text\" class=\"form-control\" placeholder=\"Please Enter Your Name Or Email\" id=\"namefield\"/> <textarea class=\"form-control\" placeholder=\"Leave A Comment Here\" style=\"width:100%; height:150px;\" id=\"coment-txt\" required></textarea></div><button class=\"btn btn-success\" id=\"post\">Post</button>");
$('#post').click(function(){
cnt = $('#coment-txt').val();
name = $('#namefield').val();
$('#newcoment').html('Posted by '+name+'</br>'+' Comment : '+'</br>'+cnt);

});
});

});
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
    .row.content {height: 1500px}
    
    /* Set gray background color and 100% height */
    .sidenav {
      background-color: #f1f1f1;
      height: 100%;
    }
    
    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }
    .text-justify{
	text-align:justify;
	}
	.cursor{cursor:pointer;}
	
    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height: auto;} 
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row content">
    <div class="col-sm-3 sidenav">
      <h4>Samudrala's Blog</h4>
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#section1">Home</a></li>
        <li><a href="#section2">Friends</a></li>
        <li><a href="#section3">Family</a></li>
        <li><a href="#section3">Photos</a></li>
		<li><a href="#section3">Likes</a></li>
		<li><a href="#section3">DisLikes</a></li>
      </ul><br>
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search Blog..">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">
            <span class="glyphicon glyphicon-search"></span>
          </button>
        </span>
      </div>
    </div>
    <div class="col-sm-9 sidenav" style="background:#337ab7; color:#fff;">
      <h4>RECENT POSTS</h4>
      <hr>
      <h2>I Like Updated Technologies</h2>
      <h5><span class="glyphicon glyphicon-time"></span> Post by Samudrala, Oct 21, 2016.</h5>
      <h5><span class="label label-danger">Updated Technologies</span> <span class="label label-primary">Samudrala</span></h5><br>
      <p class="text-justify">Nowadays technology has brought a lot of changes to our life, especially in education and communication. In communication, the major changes happen in the way we communicate with other people. We do not need to meet them in person or face to face to say what is in our mind. We simply can phone them or do video chat using Internet connection. In the past, we spent a long time to travel to a distant place, but now we just need hours or even minutes to go there using the latest technology in a form of transportation means. In education, the changes have brought advantages to students and teachers. For instance, students can do their homework or assignment faster because using Internet. The teachers also get some advantages from it. They can combine their teaching skill with it and produce some interesting materials to teach like colorful slides to deliver the lesson and animation to show how things happen. In conclusion, technology itself has given us advantages to improve our life's quality.
	  </p>
	  <p id="newcoment"></p>
      <br><br>
      <h4>Leave a Comment : <span class="label label-success cursor" id="comment">Comments</span></h4>
       <br/>
		<form role="form" id="form1">
		</form>
      
      
  </div>
</div>
</div>
<footer class="container-fluid">
  <p>Footer Text</p>
</footer>

Comments