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


поло и рере кантри
все, что мне нужно, это получить информацию о том, в какой стране пользователь хочет быть модерируемым, но я не могу взять эту информацию, потому что я не могу смешать код на ruby на рельсах и код 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>