ruby refresh сцепленное поле

Question

Все еще не найдено решение. Я хочу, чтобы полное имя файла автоматически обновлялось при заполнении полей prénom и nom.

эти поля используются при регистрации в sign_up от devise. (Я внес изменения в контроллер devise, чтобы иметь возможность использовать nom и prenom в качестве полей.

Я сделал этот код, но кажется, что моя функция ничего не делает, а поле с полным именем остается пустым.

Я не хочу преобразовывать свой код в html (я хотел бы использовать <%%> в своем коде ...

  <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

Вы должны использовать классы или идентификаторы для назначения события 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, чтобы он работал.