数据确认应包括已检查无线电输入的名称或值

Question

当用户点击提交时，我希望将动态内容显示为数据确认消息的一部分。在我看来，

<div class="form-check">
<input class="form-check-input" type="radio" name="team" id="<%= team.id %>" value="<%= team.id %>">
<label class="form-check-label" for="<%= team.id %>">
<span id="form-check-team"><%= team.short_name %></span>
</label>
</div>
<div class="col-sm-6">
<%= form.submit 'Submit', :data => {:confirm => 'Confirm you have chosen?'} %>
</div>

我想在拨号框中有动态内容，就像一样

<%= form.submit 'Submit', :data => {:confirm => 'Confirm you have chosen #{team.shortname}'} %>

因此，基本上，如果输入被检查，我如何获得id#表单检查团队的文本

Answer 1

我认为最好在这里使用JS来连接需要添加的文本。

Answer 2

当复选框的值发生变化时，可以修改提交按钮上data-confirm的值：

document.querySelector('.form-check-input').addEventListener('change', function(event) {
var $submitButton = document.querySelector('input[type=submit]');
var $teamNameElement = document.getElementById('form-check-team');
var $checkBox = event.target;
var originalMessage = null;
if ($checkBox.checked) {
// When the checkbox is checked, update the message to include the team name
originalMessage = $submitButton.getAttribute('data-confirm');
$submitButton.setAttribute('data-confirm-original', originalMessage);
$submitButton.setAttribute('data-confirm', 'Confirm you have chosen ' + $teamNameElement.textContent + '?');
} else {
// When the checkbox is unchecked, restore the original message
originalMessage = $submitButton.getAttribute('data-confirm-original');
$submitButton.setAttribute('data-confirm', originalMessage);
$submitButton.removeAttribute('data-confirm-original');
}
});

但是，如果#form-check-team的内容与从服务器呈现的内容没有变化，那么就更容易从服务器本身设置确认消息：

<%= form.submit 'Submit', data: { confirm: "Confirm you have chosen #{team.shortname}" } %>