I have set of forms, basically is a multi reply boxes, when I am trying to get the value of each reply form and then append it to a container under each form block, I am able to get the value of each and then clone it, and append it to a container, but the problem is my script is not appending the the value to each block, is basically appending to the first block only, I created a http://jsfiddle.net/creativestudio/NgEpS/
This is my html: 1
<div class="post-container">
<form class="reply-form">
<div class="reply-box">
<textarea placeholder="Reply box 2..." columns="10" rows="1" name="comment-input"></textarea>
<input type="submit" value="Send">
</div>
<div class="post-dropdown"></div>
<div class="post-dropdown-content">
<div class="post-dropdown-reply hidden"></div>
</div>
</form>
</div>
<div class="post-container">
<form class="reply-form">
<div class="reply-box">
<textarea placeholder="Reply box 3..." columns="10" rows="1" name="comment-input"></textarea>
<input type="submit" value="Send">
</div>
<div class="post-dropdown"></div>
<div class="post-dropdown-content">
<div class="post-dropdown-reply">1</div>
<div class="post-dropdown-reply">2</div>
<div class="post-dropdown-reply">3</div>
<div class="post-dropdown-reply">4</div>
</div>
</form>
</div>
This is my js:
function gettingReplyVal() {
$('.reply-form').submit(function(e) {
var post_clone = $('.post-dropdown-content').first().clone();
var textAreaValue = $(this).find('textarea').val();
$(post_clone).insertBefore(".post-dropdown-content:first").find('.post-dropdown-reply').html(textAreaValue);
e.preventDefault();
});
}
gettingReplyVal();
Check this out: http://jsfiddle.net/NgEpS/1/
Changes are on this line:
$(post_clone).insertBefore($(this).find(".post-dropdown-content")).find('.post-dropdown-reply').html(textAreaValue);
I changed it to find the .post-dropdown-content div using the $(this) context. Yours was finding the first one on the page.
I think you want something like this:
// Find the text that was entered
var textAreaValue = $(this).find('textarea').val();
// Make a new post div, and add the appropriate classes
post = $("<div>").addClass("post-dropdown-reply");
// Set its html
post.html(textAreaValue);
// Add it onto the content list
$(this).find('.post-dropdown-content').prepend(post);
This has the downside that you have to have to generate a new post div from scratch, but it works much better. (See the jsfiddle )
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.