Сделайте форму, чтобы нажать на цвета и отправить значение в 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

Хорошо, так что вы можете попробовать что-то вроде этого. Функция selectColor установит значение поля выбора, и оно останется скрытым от просмотра. Дивы представляют ваши круги, которые вы можете щелкнуть, чтобы установить поле выбора.

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

Замените <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 3

В основном, вы думаете, что вы можете сделать это с css. убедитесь, что используете тег. в нем используйте округлую границу, а затем увеличьте радиус.

, иначе вы можете снова использовать тег изображения с css.

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>