ruby refresh concatenate field - ruby-on-rails

Question

Still not find a solution..I want that the filed fullname is automatically updated when I fill fields prénom and nom.
these fields are used in the sign_up registration from devise. (I 've done changes in devise controller to be able to use nom and prenom as fields.
I've done this code but seems that my function do nothing and fullname field stays empty.
I don't want to transform my code to html (I d like to use <% %> in my code...
<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" %>
thanks for your help

Answer 1

You should be using classes or ids to assign a jquery event. Here's my solution, based on your code:
<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>
Basically, I gave classes to your :nom, :prenom and :fullname fields and updated your jQuery, so it will work.