用js点击div提交表单答案

【问题标题】：submiting form on div click with js用js点击div提交表单
【发布时间】：2013-08-26 12:31:19
【问题描述】：

我有一个 div 元素，我希望当我点击它时提交一个隐藏的表单。

div 代码

<div class="a15 training-exercise">
    some text
    <form accept-charset="UTF-8" action="/trainings/1/training_exercises/5" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="_method" type="hidden" value="put"></div>  
        <input id="training_exercise_done" name="training_exercise[done]" type="text" value="false">
        <input name="commit" type="submit" value="subit">
    </form>
</div>

咖啡脚本

$ ->
    $('.training-exercise').click ->
        if $(this).hasClass('done')
            $(this).removeClass('done')
            $(this).find('input:text').val(false)
            $(this).closest("form").submit()
        else
            $(this).addClass('done')
            $(this).find('input:text').val(true)
            $(this).closest('form').submit()

对应的JS代码

$(function() {
  return $('.training-exercise').click(function() {
    if ($(this).hasClass('done')) {
      $(this).removeClass('done');
      $(this).find('input:text').val(false);
      return $(this).closest("form").submit;
    } else {
      $(this).addClass('done');
      $(this).find('input:text').val(true);
      return $(this).closest('form').submit;
    }
  });
});

我没有设置真假复选框，因为f.checkbox 给了我一些奇怪的结果

这里的问题是：

1) 除了表单提交，一切都在发生

2) 表单有visibility: hidden; 并且它是隐藏的，但是表单所在的地方有空白空间，我希望它看起来像那里什么都没有

【问题讨论】：

stackoverflow.com/questions/7463246/…

标签： forms jquery coffeescript

【解决方案1】：

对于第一个问题，试试

$(function() {
  $('.training-exercise').click(function() {
      var element = $(this);
         if (element.hasClass('done')) {
         element.removeClass('done');
         element.find('input:text').val(false);
         element.closest('form').submit(); //<-- brackets here.
      } else {
         element.addClass('done');
         element.find('input:text').val(true);
         element.closest('form').submit();
      }
   });
});

对于第二个问题，使用display:none; 而不是visibility:hidden.

【讨论】：

只是为了稍微整理一下，你不需要点击处理程序上的return，你应该真正将$(this)缓存到一个变量中。仍然 +1。
@RoryMcCrossan 谢谢，让答案更好。
对不起，我将我的咖啡脚本转换为这个代码，因为人们通常会问这个问题，我用咖啡脚本 +1 更新了第二个问题
捕获 $(this) 不是问题，使用 submit() 是。

【解决方案2】：

似乎表单选择不起作用（虽然我从控制台尝试时它起作用）

有效的解决方案是：

$(this).find('input:submit').submit()

【讨论】：