jQuery Stack Overflow风格的标签框没有提交值

时间:2012-10-25 19:01:12

标签: jquery forms tags

我有一个stackoverflow样式标记框,它工作正常,但它不会在表单提交时提交标记值。网址只是'/?tags ='。我想不出什么是错的。有什么想法吗?

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

});

HTML如下:

<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>

1 个答案:

答案 0 :(得分:0)

根据Blender的评论,我确实在最后返回false,因此提交事件没有触发。