html - 表单只有 10 个按钮，但用户只能选择 1 个

Question

我试图制作一个带有标题、段落和满分 10 分的表格。我想让只有一个按钮进入数据库。我怎样才能做到这一点并保留我的按钮的当前样式？

例子

用户选择一个按钮

按钮 1

button 2 //用户在点击时选择这个按钮

用户更改选定按钮

button 1 //用户在点击时改变选中的按钮

按钮 2

.

当我点击提交时，它会将按钮 1 发送到数据库

代码：

        <form method="POST" action="index.php?action=sendReview" class="redaction" enctype="multipart/form-data">
            <div id="scores">
              <input class="score" type="button" name="options" style="color:red;" value="1" id="option1"> 
              <input class="score" type="button" name="options" style="color:red;" value="2"id="option2"> 
              <input class="score" type="button" name="options" style="color:red;" value="3"id="option3"> 
              <input class="score" type="button" name="options" style="color:orange;" value="4" id="option4"> 
              <input class="score" type="button" name="options"  style="color:orange;"value="5"id="option5"> 
              <input class="score" type="button" name="options" style="color:orange;" value="6"id="option6"> 
              <input class="score" type="button" name="options" style="color:orange;" value="7"id="option7"> 
              <input class="score"type="button" name="options" style="color:green;" value="8"id="option8"> 
              <input class="score" type="button" name="options" style="color:green;" value="9" id="option9"> 
              <input class="score" type="button" name="options" style="color:green;" value="10" id="option10"> 
            </div>
            <input type="text"name="nameReview" class="nameReview"placeholder="Review Title">
            <textarea id="story" name="review-content"rows="5" cols="33" placeholder="Write your Review here"></textarea>
            <input type="submit" value="Publish" name="review" class="publish">
        </form>

它看起来如何

标签： htmlforms

Answer 1

You can put your value in a hidden input. On submit of the form you can get this value by the name of the hidden field.

See below example, It will post userScore as a user selected score.

$(".score").click(function(){
  var btnId = $(this).val();
  $("#userScore").val(btnId);
  console.log($("#userScore").val());
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="index.php?action=sendReview" class="redaction" enctype="multipart/form-data">
            <div id="scores">
              <input class="score" type="button" name="options" style="color:red;" value="1" id="option1"> 
              <input class="score" type="button" name="options" style="color:red;" value="2"id="option2"> 
              <input class="score" type="button" name="options" style="color:red;" value="3"id="option3"> 
              <input class="score" type="button" name="options" style="color:orange;" value="4" id="option4"> 
              <input class="score" type="button" name="options"  style="color:orange;"value="5"id="option5"> 
              <input class="score" type="button" name="options" style="color:orange;" value="6"id="option6"> 
              <input class="score" type="button" name="options" style="color:orange;" value="7"id="option7"> 
              <input class="score"type="button" name="options" style="color:green;" value="8"id="option8"> 
              <input class="score" type="button" name="options" style="color:green;" value="9" id="option9"> 
              <input class="score" type="button" name="options" style="color:green;" value="10" id="option10"> 
            </div>
            <input type="hidden" name="userScore" id="userScore">
            <input type="text"name="nameReview" class="nameReview"placeholder="Review Title">
            <textarea id="story" name="review-content"rows="5" cols="33" placeholder="Write your Review here"></textarea>
            <input type="submit" value="Publish" name="review" class="publish">
        </form>