Rails: путь формы зависит от выбора / параметров через JavaScript

Question

Я пытаюсь сделать так, чтобы мои пути к формам зависели от выбранной пользователем опции.Даже если console.log(...) показывает, что оно было изменено после отправки, я все еще перенаправлен на тот же путь.

.erb:

<%= form_tag(products_path, method: :get) do |f| %>
    <%= text_field_tag :q, "", id: 'main_search', class: 'form-control form-control-lg', :placeholder => "I want to find..."%>
    <select id="main_select">                      
      <%= options_for_select([['Find Buyers', "offers"], ['Find Suppliers', "products"]], 1) %>
    </select>
    <%= submit_tag("Search", :class => "btn btn-lg btn-primary btn-block") %>
 <% end %>

.js:

 $('#main_select').on('change',function(){
    if ($(this).val() == 'products'){
      $("#main_search").attr('action','/products');
      console.log($("#main_search")); 
    }
    else{
      $("#main_search").attr('action','/offers');
      console.log($("#main_search")); // here I can see changed form
    }
  });

Я должен быть перенаправлен на offers_path на моем контроллере.Как я могу это исправить?

Answer 1

Я все еще перенаправлен на тот же путь

Вы меняете text_field_tag ​​, вместо этого вам нужно изменить атрибут действия формы.

Добавьте к вашему обработчику событий:

$(this).closest('form').attr('action', '......');

$('#main_select').on('change', function () {
    if ($(this).val() == 'products') {
        $(this).closest('form').attr('action', '/products');
        console.log($("#main_search"));
    }
    else {
        $(this).closest('form').attr('action', '/offers');
        console.log($("#main_search")); // here I can see changed form
    }
    console.log($('form').get(0).outerHTML)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form>
    <textarea id="main_search"></textarea>
    <select id="main_select">
        <option value="products">products</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</form>