我正在尝试使用按钮创建可自定义的复选框。我能够区分选择了哪个按钮类，但我无法跟踪表单提交后的按钮类。理想情况下，我可以保留最初提供的任何输入，而不是在加载或提交页面时将按钮重置为默认值。我尝试过使用 isset() php 函数，但我认为在这种情况下这不是一个有效的解决方案。还有其他选择吗？在下面找到我的代码:
<form id="my-form" method="post">
<html>
<body >
<style>
.button {
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {
border-radius: 100%;
background-color: green;
border: none;
}
.button2 {
border-radius: 100%;
background-color: red;
border: none;
}
</style>
<div id="test1"></div>
<div id="test2"></div>
<!-- invalid code?
<?php
echo isset($_POST["t1test"]);
echo isset($_POST["t2test"]);
echo $_POST["t1test"];
echo $_POST["t2test"];
?>
-->
<script type="text/javascript">
function makeButton(div, val) {
var element = document.getElementById(val);
var button = document.createElement("button");
var span = document.createElement("span");
// change to account for submitted settings
if (element == null) {
button.setAttribute("class", "button button1"); }
else {
var cL1 = element.classList.contains("button1");
var cL2 = element.classList.contains("button2");
element.parentNode.removeChild(element);
if (cL2 == true) { button.setAttribute("class", "button button1"); }
if (cL1 == true) { button.setAttribute("class", "button button2"); }
}
button.setAttribute("type", "button");
button.setAttribute("id", val);
button.setAttribute("name", val);
var testDiv = document.getElementById(div);
testDiv.appendChild(button);
button.addEventListener ("click", function() { makeButton(div, val); })
}
window.onload = function() {
makeButton("test1", "t1test");
makeButton("test2", "t2test"); }
</script>
</body>
</html>
<button id="submit">Submit</button>
</form>
最佳答案
删除表单标签并向提交按钮添加“click”事件监听器怎么样？下面显示的代码插入附加到文件末尾:
<script>
document.getElementById("submit").addEventListener("click", function(){
var elements = ["t1test", "t2test"];
for(var i = 0; i < elements.length; i++) {
var element = document.getElementById(elements[i]);
console.log(element.classList.contains("button1"));
console.log(element.classList.contains("button2"));
}
});
</script>
这样，当按下按钮时，页面将不会重新加载，从而保留按钮选择。
关于javascript - 表单提交后返回元素类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50594253/