Question

我目前正在使用javascript提交表单，并且我已经为表单启用了AJAX，并且当您手动提交表单时，AJAX可以正常运行，但是当javascript执行时它不会导致刷新。

我目前的代码是：

:javascript
  wistiaEmbed = Wistia.embed("#{@chapter.video_id}", {
    autoPlay: true,
    videoFoam: true,
    playerColor: 'E68482'
  });
  wistiaEmbed.bind("end", function () {
    document.getElementById('target').style.display = 'none';
    document.getElementById('finished').style.display = 'block';
    document.getElementById('new_chapter_completion').submit();
  });

我的表单如下：

= form_for current_user.chapter_completions.build, remote: true, authenticity_token: true do |f|
 = hidden_field_tag :chapter_id, @chapter.id
 = f.submit

现在我意识到这里的问题来自.submit（）;我想知道要使用什么而不是.submit（）;。

此外，我希望表单不是真的可见，而是javascript只提交此数据，是否可能？现在我需要在网站上有表格，因为它有#id。

Answer 1

你说：

在您手动提交表单时效果很好

我想，手动 - 通过点击提交按钮提交，对吗？

如果是这样，为什么不尝试这种解决方法呢？

在HTML中：

<form id="new_chapter_completion">
<!-- your input fields here -->
<input type="submit" value="Submit" id="submit-btn">
</form>

在JS中（使用JQuery，但没有它可以这样做）：

$(document).ready(function() {
    // your code goes here, but insted of
    // document.getElementById('new_chapter_completion').submit();
    // you are doing this:
    $('#submit-btn').trigger('click'); // immitation of real click
});

此外，我希望表单不真实可见

我认为隐藏元素更像是使用CSS。有不同的技巧。例如，制作您页面的主包装器DIV（CSS）：

position:relative;
z-index:10;

和你的表单在这个包装器里面（#new_chapter_completion）：

position:absolute;
left:0;
top:0;
z-index:1;

通过javascript提交表单而不刷新

1 个答案: