制作一个表单来单击颜色并发送 html 中的值

Question

我有一个表格，有 3 种选择，例如颜色如下： <form action="{{ route('shop.products.index', $product->url_key) }}" method="get">  <select name="color_id">    <option value="1">black</option>    <option value="2">brown</option>    <option value="3">white</option>  </select>  <input type="submit" value="send"></form> 现在我不想选择带有选项的选项，而是放置 3 个黑棕色和白色的圆圈，当用户单击每个圆圈时，将提交带有该值的表单。有什么办法吗？

Answer 1

替换<select>为<input type="radio">.

所以你会得到类似的东西：

<input type="radio" name="color_id" value="1" /> <img src="some_black_circle.jpg" />

<input type="radio" name="color_id" value="2" /> <div class="css_brown_circle"></div>

<input type="radio" name="color_id" value="3" /> <img src="some_white_circle.jpg" />

<input type="submit" value="send">

Answer 2

大多数人认为你可以用 css 来做到这一点。确保使用标签。在其中使用圆形边框，然后增加它的半径。

否则你可以再次使用图像标签和CSS。

Answer 3

好的，你可以尝试这样的事情。selectColor 函数将设置选择字段值，并且它将在视图中保持隐藏状态。div 代表您的圆圈，您可以单击它来设置选择字段。

<form id="theForm">

  <div>

     <div class="black" onclick="selectColor(1)"></div>

     <div class="brown" onclick="selectColor(2)"></div>

     <div class="white" onclick="selectColor(3)"></div>

  </div>

  <select  name="color_id" style="visiblity:hidden" id="color_id">

      <option value="1">black</option>

      <option value="2">brown</option>

      <option value="3">white</option>

  </select>

</form>

<script>

  selectColor(color){

    document.getElementById('theForm').submit(); // Submit form

    document.getElementById('color_id').value = color;

  }

</script>

Answer 4

要创建圆圈，请使用<label>每个输入的元素。可以设置此标签的样式，使其显示一个圆圈作为选项。输入本身可以隐藏，display: none只显示标签。如果输入位于标签内，则单击时将触发输入的更改。

使用 JavaScript，侦听change表单内的事件。每当输入的值（或选择）发生更改时，就会发生更改事件。然后用该方法手动触发表单提交.submit()。

const form = document.querySelector('form');

form.addEventListener('change', function(event) {

  form.submit();

});

form {

  display: flex;

  width: 100%;

}

.circle {

  display: block;

  width: 25px;

  height: 25px;

  border-radius: 50%;

  border: 1px solid #d0d0d0;

  margin: 0 5px;

  cursor: pointer;

}

.circle input {

  display: none;

}

.black {

  background-color: black;

}

.brown {

  background-color: brown;

}

.white {

  background-color: white;

}

<form>

  <label class="circle black">

    <input type="radio" name="color_id" value="black">

  </label>

  <label class="circle brown">

    <input type="radio" name="color_id" value="brown">

  </label>

  <label class="circle white">

    <input type="radio" name="color_id" value="white">

  </label>

</form>