Как получить новое значение текстового поля в форме Rails?

Question

<%= form_for(@mymodel, remote: true, html: { id: 'match_form' }) do |f| %>
   <%= f.text_field :match_id, style: "width:82px" %>

   <%= f.submit 'Save', class: 'btn btn-primary', id: 'match_submit', style: "width:38px;padding:0px" %> 
   <%= button_tag 'Cancel', class: 'btn btn-secondary', id: 'match_cancel', style: "width:52px;padding:0px" %>
<% end%>


<script type='text/javascript'>
    $(function() {
      $(document).on("click", "#match_submit", function(event){
        $.ajax('my_controller_method', {
          type: 'GET',
          dataType: 'script',
          data: {
            mid: $("#").val(),  // How can I get the new value entered in 'match_id' textfield here?
          },
          error: function(jqXHR, textStatus, errorThrown) {
          return console.log("AJAX Error: " + textStatus);
        }
      });      
    });
  </script>

У меня есть форма и блок JavaScript, показанные выше.

Как я могу получить новое значение, введенное в текстовое поле 'match_id' в коде JavaScript?

Answer 1

Вы должны понимать, что ERB - это шаблон, который живет на сервере, затем компилируется в HTML (что означает, что ВСЕ код ERB полностью исчезает), затем полученный HTML отправляется в браузер, затем JS код выполняется.

JS будет видеть и работать только с полученным HTML. Он не имеет ни малейшего представления о присутствии ERB или PHP или того языка шаблонов, который использовался для генерации HTML, на котором он работает.

Результат вашего шаблона ERB будет <input id="debit_match_id">, поэтому правильный способ выбрать его в JS / jQuery это $("#debit_match_id").

Answer 2

Спасибо @JeremyThille за этот ответ:

$("#debit_match_id").val();

Это дает новое значение, введенное в текстовое поле (debit_match_id - это идентификатор HTML текстового поля. JavaScript работает с HTML идентификатором, а не ruby идентификатором шаблона)

Answer 3

<%= f.text_field :match_id, style: "width:82px", id: "debit_match_id" %>
# add id in text field to get the value

Используя $('#debit_match_id').val();, вы можете получить текущее значение текстового поля match_id:

data: { mid: $('#debit_match_id').val(); }  // get the new value entered in 'match_id'