制作一个表单来单击颜色并发送 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">&nbsp; <div>&nbsp; &nbsp; &nbsp;<div class="black" onclick="selectColor(1)"></div>&nbsp; &nbsp; &nbsp;<div class="brown" onclick="selectColor(2)"></div>&nbsp; &nbsp; &nbsp;<div class="white" onclick="selectColor(3)"></div>&nbsp; </div>&nbsp; <select&nbsp; name="color_id" style="visiblity:hidden" id="color_id">&nbsp; &nbsp; &nbsp; <option value="1">black</option>&nbsp; &nbsp; &nbsp; <option value="2">brown</option>&nbsp; &nbsp; &nbsp; <option value="3">white</option>&nbsp; </select></form><script>&nbsp; selectColor(color){&nbsp; &nbsp; document.getElementById('theForm').submit(); // Submit form&nbsp; &nbsp; document.getElementById('color_id').value = color;&nbsp; }</script>

Answer 4

要创建圆圈，请使用<label>每个输入的元素。可以设置此标签的样式，使其显示一个圆圈作为选项。输入本身可以隐藏，display: none只显示标签。如果输入位于标签内，则单击时将触发输入的更改。使用 JavaScript，侦听change表单内的事件。每当输入的值（或选择）发生更改时，就会发生更改事件。然后用该方法手动触发表单提交.submit()。const form = document.querySelector('form');form.addEventListener('change', function(event) {&nbsp; form.submit();});form {&nbsp; display: flex;&nbsp; width: 100%;}.circle {&nbsp; display: block;&nbsp; width: 25px;&nbsp; height: 25px;&nbsp; border-radius: 50%;&nbsp; border: 1px solid #d0d0d0;&nbsp; margin: 0 5px;&nbsp; cursor: pointer;}.circle input {&nbsp; display: none;}.black {&nbsp; background-color: black;}.brown {&nbsp; background-color: brown;}.white {&nbsp; background-color: white;}<form>&nbsp; <label class="circle black">&nbsp; &nbsp; <input type="radio" name="color_id" value="black">&nbsp; </label>&nbsp; <label class="circle brown">&nbsp; &nbsp; <input type="radio" name="color_id" value="brown">&nbsp; </label>&nbsp; <label class="circle white">&nbsp; &nbsp; <input type="radio" name="color_id" value="white">&nbsp; </label></form>