объединить поля в другие поля с автоматическим обновлением

Question

Я новичок в рельсах и HTML ....

Я хочу объединить имя и фамилию в поле полного имени в представлении. Я хочу, чтобы при изменении фамилии или имени полное имя автоматически обновлялось: «имя» + «» + «фамилия»

Я пробовал это, но у меня ошибка. потому что, кажется, поле полного имени остается пустым, и я попытался сделать предупреждение в функции, чтобы увидеть, работает ли объединение. Но, похоже, не делать этого ....

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

  <script type="text/javascript">
      function test ()
      {

      $('fullname').value <= $('firstname').value + " " + $('lastname').value;
      }

  </script>


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

  <div class="form-group">
    <%= f.label :lastname %><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: true, placeholder: "Full Name", class: "form-control", :readonly => true %> <!-- ajout de readonly -->
  </div>

Спасибо за помощь

Answer 1

Вы должны проверить (или написать на свой вопрос) ваш получившийся html, чтобы я мог помочь вам больше.

Это неверно:

$('fullname').value <= $('firstname').value + " " + $('lastname').value;

Вот рабочий пример.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <script type="text/javascript">
      $( document ).ready(function() {
        $('input.firstname, input.lastname').on('input', function(e) {
          var changedFullName = $('input.firstname').val() + " " + $('input.lastname').val()
          $('input.fullname').val(changedFullName);
        });
      });
  </script>
  <label for="firstname">FirstName</label><br>
  <input type="text" name="firstname" class="firstname" /><br>
  <label for="lastname">LastName</label><br>
  <input type="text" name="lastname" class="lastname" /><br>
  <hr>
  <span>FullName</span><br>
  <input type="text" name="fullname" class="fullname" readonly />
</form>