Измените изображения с помощью щелчка мышью на изображении и передайте идентификатор изображения в форму для отправки вместе с формой

Question

У меня есть форма для пользователя, чтобы создать сообщение, оставить свое имя, адрес электронной почты (необязательно), и я хочу, чтобы они нажимали некоторые кнопки (например, «<<» »>>), чтобы изменить значок изображения для ихсообщение, и я хочу иметь возможность передать имя изображения в контроллер с формой, чтобы иметь возможность загрузить его в таблицу для сообщения.

Это часть формы:

 <% form_tag('/greeting/new')  do %>



<fieldset>
    <legend><%= @legend %></legend>
        <%=error_messages_for "user" %>
        <%=error_messages_for "greeting" %>

<div class="form_row">
    <%= text_field :greeting, :header, :size     =>   
                                      Greeting::FORM_HEADER_FIELD_SIZE,
                                 :maxlength => Greeting::HEADER_MAX_LENGTH %>
</div>
...



<div id="icon_box">
    <label for="icon">Select Icon for your Message</label>
<a href="#" onclick="changeMySrc(1)"> >> </a><img id="Img1" src="/images/icon/icon1.jpg" />

Внутри макета для сообщения у меня есть следующее: (Я хотел бы иметь возможность сделать это для многих изображений, но не знаю, как с рельсами)

<script type='text/javascript'>
    function changeMySrc(i) {
   if(i==1){                                    
            document.getElementById("Img1").src="/images/icons/<%=@icons[1].image_tag %>";
                                  }
              else if (i==2)       
                                       {                                          
             document.getElementById("Img1").src="/images/icons/<%=@icons[0].image_tag %>";
                                  }
                        }                           
</script>

Названия значковхранятся в базе данных (@ icons.image_tag), поскольку я хочу иметь возможность классифицировать изображения, а изображения хранятся в папке на сервере.

Я хочу предварительно загрузить изображения, поскольку они маленькие иих не так уж много.Или, может быть, какая-то лучшая техника.

Я просто не могу найти в Интернете ничего, что могло бы сделать это в сочетании с рельсами.

Может ли кто-нибудь указать мне правильное направление?

Очень признателен.

Answer 1

Вы можете использовать скрытое поле в форме и изменить его значение в JavaScript вместе с источником изображения

форма

<%= text_field :greeting, :header, :size     =>   
                                  Greeting::FORM_HEADER_FIELD_SIZE,
                             :maxlength => Greeting::HEADER_MAX_LENGTH %>
<%= hidden_field :greeting, :image_name %>

Javascript

if(i==1){                                    
        document.getElementById("Img1").src="/images/icons/<%=@icons[1].image_tag %>";
        document.getElementById("greeting_image_name").value= "<%=@icons[1].image_tag %>";
                              }
          else if (i==2)       
                                   {                                          
         document.getElementById("Img1").src="/images/icons/<%=@icons[0].image_tag %>";
         document.getElementById("greeting_image_name").value= "<%=@icons[0].image_tag %>";
                              }
                    }