I have a partial with some radio buttons and a submit button.
<div class="row align-items-center h-100">
<div class="col-md-6 mx-auto">
<form>
<% @options.each_with_index do |option, index| %>
<div class="mb-3 text-center custom-radio">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios<%= index + 1 %>" value="<%= index %>">
<label class="form-check-label" for="exampleRadios<%= index + 1 %>"><%= option %></label>
</div>
<% end %>
</form>
</div>
</div>
</div>
<div class = "container text-center" style = "padding-top:20px">
<button id="submit-answer-button" class="btn btn-primary" disabled> Submit </button>
</div>
I also have this script underneath the same partial file:
<script>
console.log('test')
document.addEventListener('turbolinks:load', function() {
console.log('test1')
let submitButton = document.getElementById('submit-answer-button');
let radioButtons = document.querySelectorAll('input[type="radio"]');
for (let i = 0; i < radioButtons.length; i++) {
radioButtons[i].addEventListener('change', function() {
if (this.checked) {
submitButton.disabled = false;
}
});
}
});
</script>
I confirmed that the console produces ‘test’ but not ‘test1’ so something is wrong with turbolinks. I’ve tried a lot of different things like using DomContentLoad instead and placing this in the application view. Nothing works! The turbolinks:load simply refuses to execute.