使用窗体为单击的按钮设置变量值

Question

我有一个有8个按钮的表单，如下所示：

.settings-theme-buttons{
height: 4vw;
width: 4vw;

border: none;
display: inline-block;
border-radius: 100%;
cursor: pointer;
}
#settings-theme-white{
background: #ddd;
}
#settings-theme-red{
background: #b83b5e;
}
#settings-theme-blue{
background: #51adcf;
}
#settings-theme-green{
background: #b6eb7a;
}
#settings-theme-green{
background: #b6eb7a;
}
#settings-theme-orange{
background: #ff9234;
}
#settings-theme-yellow{
background: #ffd36b;
}
#settings-theme-purple{
background: #8675a9;
}
#settings-theme-pink{
background: #efbbcf;
}

<form action="<?php echo ($_SERVER['PHP_SELF']); ?>" method="POST">
<button type="submit" class="settings-theme-buttons" id="settings-theme-white" name="white-option"></button>
<button type="submit" class="settings-theme-buttons" style="color: #ddd;" id="settings-theme-red" name="red-option"></button>
<button type="submit" class="settings-theme-buttons" id="settings-theme-blue" name="blue-option"></button>
<button type="submit" class="settings-theme-buttons" id="settings-theme-green" name="green-option"></button>
<button type="submit" class="settings-theme-buttons" id="settings-theme-orange" name="orange-option"></button>
<button type="submit" class="settings-theme-buttons" id="settings-theme-yellow" name="yellow-option"></button>
<button type="submit" class="settings-theme-buttons" id="settings-theme-purple" name="purple-option"></button>
<button type="submit" class="settings-theme-buttons" id="settings-theme-pink" name="pink-option"></button>
</form>

正如你所看到的，每个按钮都有一个取决于其颜色的名称，比如"；白色选项"；。使用PHP，我想做的是根据单击的按钮将变量值设置为。例如，如果单击了white-option按钮，我想将变量设置为"；白色"；，如果点击了红色按钮，我想将变量设置为"；红色"；，等等。

我如何使用PHP来实现这一点？

Answer 1

您只需要css，带有伪类选择器
示例：

/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
} 

请访问：
https://www.w3schools.com/css/css_pseudo_classes.asp

Answer 2

如果你给每个按钮添加一个值，你可以用按钮的名称调用它：

这是白色按钮的一个例子

<button type="submit" class="settings-theme-buttons" id="settings-theme-white" name="white-option" value="pressed white"></button>

然后用以下代码在PHP中获取变量：

<?php
$white = $_REQUEST['white-option'];
echo $white;
?>

当您按下白色按钮时，值"pressed white"将存储在$white中。只需将其扩展到所有按钮即可。

Answer 3

您可以使用名称POST按钮值。如果只需要一个值，则将名称设置为类似color的值，并将各个按钮的值设置为其颜色。

<button type="submit" class="settings-theme-buttons" id="settings-theme-white" value="white-option" name="color">White</button>

然后，当按下该按钮时，该值将发布到['color']的POST全局中，确保已设置POST值，然后将变量设置为其值。。。

HTML

<form action="<?php echo ($_SERVER['PHP_SELF']); ?>" method="POST">
<button type="submit" class="settings-theme-buttons" id="settings-theme-white" value="white" name="color">White</button>
<button type="submit" class="settings-theme-buttons" id="settings-theme-red" value="red"name="color">Red</button>
<button type="submit" class="settings-theme-buttons" id="settings-theme-blue" value="blue" name="color">Blue</button>
<button type="submit" class="settings-theme-buttons" id="settings-theme-green" value="green" name="color">Green</button>
<button type="submit" class="settings-theme-buttons" id="settings-theme-orange" value="orange" name="color">Orange</button>
<button type="submit" class="settings-theme-buttons" id="settings-theme-yellow" value="yellow" name="color">Yellow</button>
<button type="submit" class="settings-theme-buttons" id="settings-theme-purple" value="purple" name="color">Purple</button>
<button type="submit" class="settings-theme-buttons" id="settings-theme-pink" value="pink" name="color">Pink</button>    
</form>

PHP

if(isset($_POST['color'])){
$color = $_POST['color']; // $color now holds the value of your submission
}

您可以使用vanilla Javascript来完成此操作，而无需刷新页面并将任何内容发送到服务器。。。只需使用类选择器获取元素。然后使用increment和.length在元素列表上循环，使元素通过for循环。使用元素及其索引位置设置事件侦听器，以查找正在单击的元素。获取元素textContent，然后将其保存到变量中。

const colors = document.querySelectorAll('.colors');
const selectedColor = document.getElementById('selectedColor');
for(let i = 0; i < colors.length; i++){
colors[i].addEventListener('click', function(e){
e.preventDefault();
let color = colors[i].textContent; // your selected color now resides in this JS variable
selectedColor.textContent = color;
})
}

<form action="<?php echo ($_SERVER['PHP_SELF']); ?>" method="POST">
<button type="submit" class="settings-theme-buttons colors" id="settings-theme-white" value="white-option" name="color">White</button>
<button type="submit" class="settings-theme-buttons colors" id="settings-theme-red" value="red-option" name="color">Red</button>
<button type="submit" class="settings-theme-buttons colors" id="settings-theme-blue" value="blue-option" name="color">Blue</button>
<button type="submit" class="settings-theme-buttons colors" id="settings-theme-green" value="green-option" name="color">Green</button>
<button type="submit" class="settings-theme-buttons colors" id="settings-theme-orange" value="orange-option" name="color">Orange</button>
<button type="submit" class="settings-theme-buttons colors" id="settings-theme-yellow" value="yellow-option" name="color">Yellow</button>
<button type="submit" class="settings-theme-buttons colors" id="settings-theme-purple" value="purple-option" name="color">Purple</button>
<button type="submit" class="settings-theme-buttons colors" id="settings-theme-pink" value="pink-option" name="color">Pink</button>
</form>
<div id="selectedColor"></div>

Answer 4

<?php
if(isset($_POST["color"])){
$color=$_POST["color"];
if($color==="white-option")
$color="white";
}
?>
<form action="<?php echo ($_SERVER['PHP_SELF']); ?>" method="POST">
<input type="submit" name="color" value="white-option">
</form>