Question

这是我的选择器：

<div class="text-center col-lg-6"><h4><strong><FONT COLOR="red">choose the color of your new shoes:</FONT></strong></h4>
    
<input type="image" src="https://glarza.com/img/black-shoes.webp" name="color" value="1" onclick="...">
    

<input type="image"src="https://glarza.com/img/red-shoes.webp" name="color" value="2"  onclick="...">
    
</div>

数据库：id：1黑色... id：2红...

这是我的表格：

<form action="https://glarza.com/color.php" class="omb_loginForm" autocomplete="off" method="POST" accept-charset="ISO-8859-1">

<div class="input-group col-lg-12">
<span class="input-group-addon">Color..<i class="fa fa-user"></i></span>
<input type="text" class="form-control" name="color" placeholder="color" />
</div>

如何在表单中填充颜色输入？请任何人能帮助我

Answer 1

您应该将输入类型更改为radio。用户选择单选按钮后，您将检测到输入更改并使用js提交表单。

图片广播组的CSS代码：

/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #f00;
}

无线电图像输入组的HTML：

<label>
  <input type="radio" name="color" value="red">
  <img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>

<label>
  <input type="radio" name="color" value="black">
  <img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>

提交有关无线电组更改的表格：

$('input[type=radio][name=color]').change(function() {
 document.forms[myFormName].submit()
});

如何填充表单：使用onclick图像的数据库记录

1 个答案: