homepage Welcome to WebmasterWorld Guest from 54.227.56.174
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Append text and value using JQuery
rwilson




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

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




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

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

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

Fotiman




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

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

rwilson




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

Thank you so much! I appreciate the help.

rwilson




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

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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved