Question

我有一个包含36个单选按钮且没有标签的表单。现在，在用户单击提交按钮后，捕获并回显所选单选按钮的值。

我希望在用户点击提交之前回显选择，以便用户在提交之前知道所选的值。值需要更新并实时回显。

这是单选按钮代码：

<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>

Form Image

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>

每个输入按钮都会收到一个事件监听器，当单击该事件监听器时，会将id =“results”的div文本更改为单选按钮的值。

更改时Bootstrap PHP单选按钮显示值

1 个答案: