Rails 3：如何通过 javascript 触发表单提交？答案

【问题标题】：Rails 3: How to trigger a form submission via javascript?Rails 3：如何通过 javascript 触发表单提交？
【发布时间】：2011-02-04 23:59:41
【问题描述】：

我有一个表单，大部分情况下只是作为普通表单提交，所以我不想在 form_tag 中设置 :remote => true 选项。

但是，在某些情况下，我希望能够让一个 javascript 函数发布表单，就好像它是由 :remote => true 发布的一样。我需要在 javascript 中做什么来完成此操作？

【问题讨论】：

标签： javascript ruby-on-rails-3

【解决方案1】：

我对此有点陌生，但这里是......

rails.js（至少是 jquery 之一）定义了以下函数来捕获和提交表单：

$('form').live('submit.rails', function(e) { ... });

如果您使用以下内容，它应该会触发相同的功能（如果 :remote => true，则不会导致页面重新加载）：

$("#<yourformid>").trigger("submit.rails");

因此，例如，如果您想在选择更改时提交您的表单，您可以将上述触发器调用设置为选择的 :onchange 我可以想象。

【讨论】：

这是我在“如何使用 javascript 触发 Rails 远程表单提交”的答案
我确实这样做了，但它仍然从控制器请求 HTML，而不是 js，因此我的 response_to 执行 |format|格式.js； end 给出一个错误。
我试过了，但我的表单仍然以传统方式提交，而不是远程提交。那是因为我使用的是 Rails 5 吗？这里有任何框架更新吗？
是的，Rails 5.1 用新的 rails-ujs 库替换了 jquery-ujs。请参阅我对 Rails 5.1+ 的新答案 :)

【解决方案2】：

我刚试过这个绝对有效，如果表单有远程=> true，只需删除 data-remote 属性即可正常提交 w/javascript ie

$('input').click(function(){ $('#form').removeAttr('data-remote') });

我猜相反的情况可能会起作用，即如果表单没有 remote => true 就这样做

$('input').click(function(){ $('#form').attr('data-remote',true)});

【讨论】：

【解决方案3】：

也许你可以试试这个：

$('#form').submit();

【讨论】：

那会正常提交表单，不会触发format.js。

【解决方案4】：

如果你使用 jQuery，你可以做这样的事情来让表单在 keyup 事件上自动发布，或者简化它以手动触发：

  $(function() {    
    $("#live_search input").keyup(function() {
        q = $('#search_text').val();
      $.ajax({
          beforeSend      : function(request) { request.setRequestHeader("Accept", "text/javascript"); },
                           // Included so Rails responds via "format.js"
          data          : 'query=' + q,
          success       : function(data, textStatus, XMLHttpRequest) {
                                // alert(textStatus);
                                $("#live_search #results").html(data);
                                },
          error         : function(XMLHttpRequest, textStatus, errorThrown) {
                                // alert(errorThrown);
                                $('#annotation_dialog').html(XMLHttpRequest.responseText);
                                },
          type            : 'POST',
          url                 : '/search/live'
      });
      return false;
    });
});

【讨论】：

【解决方案5】：

在 Rails 5（将 jquery-ujs 替换为 rails-ujs）中，这是触发处理程序 rails 附加到表单的 submit 事件的方式：

var elem = document.getElementById('myform') // or $('#myform')[0] with jQuery
Rails.fire(elem, 'submit');

（天哪，我花了很长时间才弄清楚这一点！）

【讨论】：