Как смешать var в js с кодом ruby ​​на рельсах в представлении

я хочу что-то вроде этого:

Как смешать var в js с кодом ruby ​​на рельсах в представлении

Как смешать var в js с кодом ruby ​​на рельсах в представлении

поло и rere - кантри

все, что мне нужно, это получить информацию о том, в какой стране пользователь хочет быть умеренным, но я не могу принять эту информацию, потому что я не могу смешивать код на Ruby on Rails и код html, js, поэтому я действительно не знаю, что я могу сделать?

Я ищу много форосов, но не могу найти код, который позволил бы мне смешать оба типа кода, чтобы сделать что-то вроде этого

<%=Country.find(document.getElementById("demo").innerHTML)%>

вот мой html-код:

<label for = "petition">do your petition to be moderator of some country:</label>

<div class = "select you country moderate">
<button id = "btn1" onclick = "myFunction()" class = "dropbtn">select country</button>
  <div id = "myDropdown" class = "dropdown-content">
    <% Country.all.each do |country| %>

        <button onclick=myFunction2("<%= country.name %>","<%= country.id %>") ><%= country.name %></button>

    <%end%>
  </div>
</div>


<form action = "/" >

    <button name = "petition" value = "<%=Country.find(document.getElementById("demo").innerHTML)%>" type = "submit">ask for be moderator</button>

</form>

и вот код js:

<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {

    document.getElementById("myDropdown").classList.toggle("show");

}
function myFunction2(country_choose,id_country) {
    document.getElementById("btn1").innerHTML=country_choose
        var x = (id_country);
    document.getElementById("demo").innerHTML = x; 
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

и вот ставлю контроллер:

class WelcomeController < ApplicationController
  before_action :set_welcome, only: [:show]
  protect_from_forgery :except => :receive_guest
  helper_method :current_or_guest_user

  # GET /users
  # GET /users.json
  def index
    @countries=Country.all




    puts params[:petition]
end

ошибка вида:

undefined local variable or method `document' for #<#<Class:0x00005616768bb6f8>:0x00007f12e8e48d90>

Extracted source (around line #67):


<form action = "/" >

    <button name = "petition" value = "<%=Country.find(document.getElementById("demo").innerHTML)%>" type = "submit">ask for be moderator</button>

</form>

Я бы порекомендовал вам прочитать об AJAX. Вы должны прочитать значение, когда пользователь выберет его, выполнить запрос AJAX к вашему серверу, отобразить ответ и обработать этот ответ на стороне клиента.

arieljuod 04.11.2018 21:45

но нет способа сделать это с той формой, которая мне нужна?

mrpepo877 04.11.2018 21:52

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

arieljuod 04.11.2018 21:54

Что вы МОЖЕТЕ сделать, так это иметь кнопку с типом submit для каждой страны внутри фактического элемента формы, вы можете отправлять разные значения в зависимости от того, какая кнопка нажата, без необходимости javacsript. Вы также можете использовать радиокнопки вместо кнопки. Вы не можете делать то, о чем просите, так, как хотите.

arieljuod 04.11.2018 21:57
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
41
0

Другие вопросы по теме