Question

仍然没有找到解决方案。我想在填写字段prénom和nom时自动更新提交的全名。

这些字段用于设计的sign_up注册。（我已经对设计控制器进行了更改，以便能够使用nom和prenom作为字段。

我已经完成了这段代码，但似乎我的函数什么都不做，而且fullname字段保持为空。

我不想将我的代码转换为html（我想在我的代码中使用＆lt; %%＆gt; ...

  <div class= "col-md-4 col-md-offset-4">

<h2 class="text-center"> Sign up</h2>
<br/>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= devise_error_messages! %>

  < <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
         $( document ).ready(function() {
           $('user.prenom, user.nom').on('user', function(e) {
             var changedFullName = $('user.prenom').val() + " " + $('user.nom').val()
             $('user.fullname').val(changedFullName);
           });
         });

     </script>


  <div class="form-group">
    <%= f.label :prenom %><br />
    <%= f.text_field :prenom,  autofocus: true, placeholder: "Prenom", class: "form-control" %>
  </div>

  <div class="form-group">
    <%= f.label :nom %><br />
   <%= f.text_field :nom, autofocus: true, placeholder: "Nom", class: "form-control" %>
  </div>

<div class="form-group">
    <%= f.label :fullname %><br />
   <%= f.text_field :fullname, autofocus: false, placeholder: "Nom complet", class: "form-control", :readonly => true %>
  </div>

  <div class="form-group">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, placeholder: "Email", class: "form-control" %>
  </div>

  <div class="form-group">
    <%= f.label :password %>
    <% if @minimum_password_length %>
    <em>(<%= @minimum_password_length %> characters minimum)</em>
    <% end %><br />
    <%= f.password_field :password, autocomplete: "off", placeholder: "Password", class: "form-control" %>
  </div>

  <div class="form-group">
    <%= f.label :password_confirmation %><br />
    <%= f.password_field :password_confirmation, autocomplete: "off", placeholder: "Password", class: "form-control" %>
  </div>

  <div class="actions">
    <%= f.submit "Sign up", class: "btn btn-primary" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>

感谢您的帮助

Answer 1

您应该使用类或ID来分配jquery事件。这是我的解决方案，基于您的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class= "col-md-4 col-md-offset-4">
  <h2 class="text-center"> Sign up</h2>

  <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
    <%= devise_error_messages! %>

    <div class="form-group">
      <%= f.label :prenom %><br />
      <%= f.text_field :prenom,  autofocus: true, placeholder: "Prenom", class: "form-control prenom" %>
    </div>

    <div class="form-group">
      <%= f.label :nom %><br />
      <%= f.text_field :nom, autofocus: true, placeholder: "Nom", class: "form-control nom" %>
    </div>

    <div class="form-group">
      <%= f.label :fullname %><br />
      <%= f.text_field :fullname, autofocus: false, placeholder: "Nom complet", class: "form-control fullname", :readonly => true %>
    </div>

    <div class="form-group">
      <%= f.label :email %><br />
      <%= f.email_field :email, autofocus: true, placeholder: "Email", class: "form-control" %>
    </div>

    <div class="form-group">
      <%= f.label :password %>
      <% if @minimum_password_length %>
        <em>(<%= @minimum_password_length %> characters minimum)</em>
      <% end %><br />
      <%= f.password_field :password, autocomplete: "off", placeholder: "Password", class: "form-control" %>
    </div>

    <div class="form-group">
      <%= f.label :password_confirmation %><br />
      <%= f.password_field :password_confirmation, autocomplete: "off", placeholder: "Password", class: "form-control" %>
    </div>

    <div class="actions">
      <%= f.submit "Sign up", class: "btn btn-primary" %>
    </div>
  <% end %>
</div>

<script type="text/javascript">
  $( document ).ready(function() {
    $('.prenom, .nom').on('change', function(e) {
      var changedFullName = $('.prenom').val() + " " + $('.nom').val();
      $('.fullname').val(changedFullName);
    });
  });
 </script>

基本上，我为您的:nom，:prenom和:fullname字段提供了课程并更新了您的jQuery，因此可以使用。

ruby刷新连接字段

1 个答案: