在div上使用js提交表单

问题描述

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

I have a div element and I want that when I click on it i submit a form which is hidden.

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;
    }
  });
});

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

i didn't put checkbox for true and false because f.checkbox gave me some strange results

这里的问题是:

1)除表单提交外，其他所有事情都在发生

1) Everything is happening except form submitting

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

2) form has visibility: hidden; and it is hidden, but there is empty space where the form is, I want that it looks like there is nothing there

推荐答案

表单选择似乎不起作用(尽管当我从控制台尝试时它起作用)

It seems that form selecting didn't work (although it work when I tried from console)

有效的解决方案是:

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

这篇关于在div上使用js提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！