Welcome to WebmasterWorld Guest from 54.242.83.7

Forum Moderators: open

Message Too Old, No Replies

Append text and value using JQuery

     
6:52 am on Mar 26, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:Aug 17, 2010
posts: 188
votes: 2


I want to wrap each value submitted in <li> tags to create a list below it but I can't figure out how to append the tags and use the value together. Any help would be greatly appreciated

<form id="edit" action="destination.html">
<input id="editInput" type="text" />
<input type="submit" value="Add" />
</form>
<ul id="output" contenteditable="true">

</ul>
</section>



$(function() {

var editText = $('#editInput').val();

$('#edit').submit(function() {
$('#output').append($('#editInput').val());

return false;
});
3:53 pm on Mar 26, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:Aug 17, 2010
posts: 188
votes: 2


Basically, I want to know the correct syntax for this:

.append($('<li>$('#editInput')</li>'));
4:06 pm on Mar 26, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4988
votes: 12


.append('<li>' + $('#editInput').val() + '</li>');
5:07 pm on Mar 26, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:Aug 17, 2010
posts: 188
votes: 2


Thank you so much! I appreciate the help.
8:40 pm on Mar 26, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:Aug 17, 2010
posts: 188
votes: 2


When I try to use the ".deleteThis" function it doesn't work on <li> tags created after page load. Is there a way I can apply the function to new <li> tags?

$('#edit').submit(function() {
$('#output').append('<li><span contenteditable="true">' + $('#editInput').val() + '</span><span class="deleteThis">X</span></li>');
localStorage.setItem('todoData', $('#output'));
return false;
});

$(".deleteThis").click(function() {
alert('Handler for .deleteThis() called.');
//$("li").remove();
$(this).parent('li').hide();
});
});
10:31 pm on Mar 26, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4988
votes: 12


It doesn't work because you're attaching the handler to the click event of all elements with class "deleteThis" before you've created them in the submit function.

Try this:

$('#edit').submit(function() {
var toggleEl = $('<span class="deleteThis">X</span>').click(function() {
alert('Handler for .deleteThis() called.');
$(this).parent('li').hide();
});
$('#output').append('<li><span contenteditable="true">' + $('#editInput').val() + '</span>' + toggleEl + '</li>');
localStorage.setItem('todoData', $('#output'));
return false;
});

Not sure if that will work, but give it a try. :)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members