Question

I’m trying to make a little tag list doohickey for adding and removing tags. I have a textbox where the user can enter the tags, separated by commas. and an add button. I would like it for when the user clicks the add button to add a small div to the inside of a div below the box. the small div should contain the tag and a little x for which to remove the tag later. heres what I have:

<script type='text/javascript'>   function tagsremove(tag) {     document.getElementByName('tags').value.replace('/'+tag+'\,\s/', '');   }    $('#tagbutton').click(function(){     var tags = $('#tagsbox').text().split(', ');     for (var tag in tags) {       document.getElementByName('tags').value += tag +', ';       $('#curtags').append('<div class='tag'>'          + tag          + ' <a href='#' onlclick='tagsremove(\''          + tag          + '\');$(this).hide();'>x</a></div>')     }   }); </script>  <div class='statbox'>   <form method='post' action='post.php' id='writeform'>     <p class='subtitle'>Title</p>     <input type='text' name='title' id='titlebox' /><br />     <p class='subtitle'>Body</p>     <textarea id='postbox' name='body' rows='10'></textarea><br />     <p class='subtitle'>Tags</p>     <input type='text' id='tagsbox' /><input type='button' id='tagbutton'        value='Add' />     <p class='subsubtitle'>Seperate by commas        (eg. 'programming, work, job')</p>     <div class='subsubtitle' id='curtags'>Current Tags:</div>     <input type='hidden' value='' name='tags' />   </form> </div> 

The problem i’m having is that when I click the add button, nothing happens. I would like to fix this.

Answer 1

You have some issues in your code:

1 ) document.getElementByName(‘tags’)

That such function doesn’t exists, the function you’re trying to use is getElementsByName (notice the ‘s’), but since you’re using jQuery, you could use a selector like:

 var hiddenTags = $('input[name=tags]'); 

2) You’re using text(), instead val() as @Blair point’s out

3) In the foreach, you access the element indexes only, to access the actual element value, you have to do something like this:

for (var i in tags) {     var tag = tags[i]; } 

There will be more work to do, but for start, check my corrections here.