Question

I have a stackoverflow-style tag box, and it works fine except it won’t submit the tag values when the form submits. The url just comes out as ‘/?tags=’. I can’t think what’s wrong. Any ideas?

$(".tag_field").each(function() {
  var buttons = $("<div/>");
  var input = $(this).find("input[type=text]"); /* locate element input type text */
  var output = $(this).find("input[type=hidden]"); /* locate element input type text */

  var update_padding = function() {
      input.css("padding-left", buttons.width() + 2); 
  };       
  setInterval(update_padding, 300);

  $(this).prepend(buttons);
  buttons.addClass("tag_buttons");
  buttons.css({ left: input.offset().left + 1,
                top: input.offset().top + 2 });
  input.bind("keyup change paste", function() {
    var i = input.val().indexOf(",");
    if (i >= 0) {
      var new_tag = input.val().substr(0, i);
      input.val(input.val().substr(i+1));
      buttons.append("<div id='button'><span class='value'>"+new_tag+"</span> <span class='close'>(x)</span></div>");
    }
  });

  var form = $(this).closest("form");
  if (form.length > 0) {
    form.submit(function() {
      var v = [];
      form.find(".tag_buttons div").each(function() {
        v.push($(this).find(".value").html());      
      });

      output.val(v.join(","));
      return false;
    });          
  }

});

The HTML is as follows:

<form method="get"> <!-- renders to same page -->
    <div class="row">
        <div class="twelve columns tag_field">
             <input type="text">  
             <input type="hidden" name="tags">
        </div>
    </div>
    <input type="submit" value="Apply Filters"> 
</form>

Answer 1

As per Blender’s comment, I did return false at the end so the submit event didn’t fire.