Question

我试图单击（onClick =“ autoFill（））;）来填写表单的密码字段，如下面的代码所示。

点击正常，但密码字段中没有任何内容。

我尝试将不同类型的form（）与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>

我希望密码字段填充“我的文本输入”，但是密码字段没有任何反应，并且该网址在点击时获得＃号。

Answer 1

您是否考虑过使用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 .

重新启动服务器

出于整洁的目的，您可能希望将script标记中的JS放入其他位置的实际.js文件中

是否可以通过单击按钮或发布请求来填写表单值而无需提交表单？

1 个答案: