Question

我有一个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>

coffescript

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

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

这里的问题是：

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

2）表单有visibility: hidden;并且它是隐藏的，但表单中有空格，我希望看起来没有任何内容

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

Answer 2

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

有效的解决方案是：

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

在div上提交表单用js点击

2 个答案: