Сделайте форму, чтобы нажать на цвета и отправить значение в html

Сделайте форму, чтобы нажать на цвета и отправить значение в html

13.03.2020 10:27:48 Просмотров 12 Источник

У меня есть форма с 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 круга черного коричневого и белого цвета и когда пользователь нажимает на каждый из них форма будет отправлена с этим значением . любой, как это сделать ??

У вопроса есть решение - Посмотреть?

Ответы - Сделайте форму, чтобы нажать на цвета и отправить значение в html / Make a form to click on colors and send value in html

Percy2-4

13.03.2020 10:32:14

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

или же вы можете снова использовать тег image с css.

Mr Khan

13.03.2020 10:41:41

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

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

13.03.2020 10:41:58

Замените <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">
Является ответом!
Emiel Zuurbier

13.03.2020 10:52:14

Для создания кругов используйте элемент <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>

Закрыть X