Bootstrap PHP Radio Button Отображение значения при изменении

Question

У меня есть форма с 36 переключателями и без меток. Прямо сейчас значение выбранной радиокнопки фиксируется и отображается после того, как пользователь нажимает кнопку отправки.

Я бы хотел, чтобы выбор отображался до того, как пользователь щелкнет на кнопке submit, чтобы пользователь знал значение, выбранное до его подтверждения. Значение необходимо будет обновить и отобразить в реальном времени.

Это код переключателя:

<form id="gradeForm" class="form-inline" method="POST" action="<?= $_SERVER['PHP_SELF']; ?>">
    <div class="form-group col-md-8">
        <div id="radioButtons" >
          <table class="table table-hover">
            <tr>
              <th></th>
              <th colspan="3">-</th>
            </tr>
            <tr>
<td><input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="80" aria-label="blankRadio1"></td>
<td><input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio2" value="82" aria-label="blankRadio2"></td>
...
...
...
<td><input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio9" value="100" aria-label="blankRadio9"></td>

И это повторяет это:

<input id="submitButton" class="btn btn-primary btn-lg btn-block" 
type="submit" name="submit" value="Enter">

$gradeInput = $_POST['blankRadio'];

if ($gradeInput <= 39) {
    $gradeLetter = "E";
} elseif
... 
...
...
else {
    $gradeLetter = "A+";
}


    <div id="results" class="col-md-4">
      <p> Grade score:  <?php
          echo $gradeInput;
      ?> and Grade is: <?php
          echo $gradeLetter;
          ?> </p>
    </div>

Форма изображения

Answer 1

Вы не можете сделать это с чисто PHP. Вы должны использовать Javascript.

Вот пример того, что вы могли бы сделать:

<td><input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="80" aria-label="blankRadio1"></td>
<td><input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio2" value="82" aria-label="blankRadio2"></td>
<td><input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio9" value="100" aria-label="blankRadio9"></td>

<div id="results" class="col-md-4">

</div>

<script>
  let rows = document.querySelectorAll(".form-check-input");
  let output = document.getElementById('results');

  rows.forEach(row => {
    row.addEventListener('click', function() {
      output.textContent = this.value;
    });
  })
</script>

Каждая кнопка ввода будет получать прослушиватель событий, который при нажатии изменяет текст div с id = "results" на значение переключателя.