troublesome javascript

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

I am not familiar with using this method to call a function when a button is clicked

$('#tagbutton').click(function(){

I usually just put

onClick='function()'

inside the input tag. and declare the function as normal up in the script.

Also, I think you should delimit tags with a single space. this is what people are used to. but if you do decide you want to be able to use multiple word tags, then delimit by "," not ", "

Answer 2

My guess is your script block that registers the click event is being executed before the dom is loaded, so the click event isn't actually being registered to a real element. Put your click event inside the document.ready event like this:

$(function() {
    $('#tagbutton').click(function(){
        //etc...
    });
});

Also, (as an aside) why are mixing jQuery with regular javascript? It would probably be neater to change your hidden tags field to have an id of tags & do $('#tags').val(...) rather than document.getElementByName('tags').value = ...

Answer 3

Your first problem is that

$('#tagsbox').text()

should be

$('#tagsbox').val()

because #tagsbox is an input field.

There are other issues, like splitting on "," and then trimming rather than splitting on ", " but I think your main problem is the .text() vs .val()

Answer 4

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.

Answer 5

First, as someone above mentioned, your Javascript code for the onclick event is being registered before the element is created on the page. Thus, it is not bound. To fix this, use, wrap your code in this dom ready function provided by jQuery.

$(document).ready(function () {
    //put code here
});

Change this line var tags = $('#tagsbox').text().split(", ") to

var tags = $('#tagsbox').attr('value').split(',')

There is also a syntax error in your code since document.getElementByName is not a JS function. Perhaps assign it an id or a name attribute to target it.

Next, once you get the hidden tags split into an array, perhaps traverse them this way to build them.

$.each(tags, function(i, val) {
    $('#curtags').append("<div class='tag'>" 
    + val 
    + " <a href='#' onlclick='tagsremove(\'" 
    + tag 
    + "\');$(this).hide();'>x</a></div>")
});