有没有一种方法可以在不提交表单的情况下通过单击按钮或 post 请求来填写表单值?

Is there a way to fill in form values with a button click or post request without submitting the form?

我正在尝试通过单击 (onClick="autoFill());) 填写表单的密码字段,如下面的代码所示。

点击没有错误,但没有任何内容进入密码字段。

我尝试使用不同类型的表单 () 和 document.getElementsByClassName("input-wrapper") 并得到相同的结果。

P.S。这是朝着目标迈出的一步。最终目标是能够使用用户控制的 JS 插件填写密码字段。

<% provide(:title, "Log in") %>
<div  class="center jumbotron">
<div class="row">
<div class="col-md-6 col-md-offset-3">
 <%= form_for(:session, url: login_path) do |f| %>

  <%= f.label :email %>
  <%= f.email_field :email, class: 'form-control' %>

  <%= f.label :password %>
  <%= f.password_field :password, class: 'form-control'  %>

  <%= f.submit "Log in", class: "btn btn-primary" %>
<% end %> 

    <a href="#" onClick="autoFill(); return true;" >Click to 
Autofill</a>

     <script type="text/javascript">
function autoFill() {
document.getElementsByClassName("form-control").password_field = 
"My Text Input";
  }
</script>

</div>

</div>

我希望密码字段用 "My Text Input" 填充,但密码字段没有任何变化,url 在单击时获得 #。

您是否考虑过使用 jQuery? 我稍微调整了你的代码

<% provide(:title, "Log in") %>
<div class="center jumbotron">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <%= form_for(:session) do |f| %>

        <%= f.label :email %>
        <%= f.email_field :email, id: 'my-email-field-id', class: 'form-control' %>

        <%= f.label :password %>
        <%= f.password_field :password, id: 'my-password-id', class: 'form-control'  %>

        <%= f.submit "Log in", class: "btn btn-primary" %>
      <% end %>
    </div>
  </div>

  <%= button_tag 'Click to Autofill', id: 'auto-fill-link' %>
</div>

<script>
  $(function(){
    autoFill();

    function autoFill() {
      $('#auto-fill-link').click(function(){
        $('#my-password-id').val('My Password Input');
        $('#my-email-field-id').val('My Email Input')
      });

    }
  })
</script>

确保您的 gemfile 中有 gem 'jquery-rails’。 然后 运行 bundle 确保您的 application.js 文件包含 //= require jquery//= require jquery_ujs

//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require activestorage
//= require turbolinks
//= require_tree .

重新启动服务器

为了整洁起见,您可能希望将脚本标签中的 JS 放到其他地方的实际 .js 文件中