Welcome to WebmasterWorld Guest from 54.196.224.166

Forum Moderators: open

Message Too Old, No Replies

Append text and value using JQuery

     

rwilson

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

5+ Year Member



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

rwilson

3:53 pm on Mar 26, 2012 (gmt 0)

5+ Year Member



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

.append($('<li>$('#editInput')</li>'));

Fotiman

4:06 pm on Mar 26, 2012 (gmt 0)

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



.append('<li>' + $('#editInput').val() + '</li>');

rwilson

5:07 pm on Mar 26, 2012 (gmt 0)

5+ Year Member



Thank you so much! I appreciate the help.

rwilson

8:40 pm on Mar 26, 2012 (gmt 0)

5+ Year Member



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

Fotiman

10:31 pm on Mar 26, 2012 (gmt 0)

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



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. :)
 

Featured Threads

Hot Threads This Week

Hot Threads This Month