Javascript 返回元素类post表单提交_Javascript_Php_Jquery_Html

Javascript 返回元素类post表单提交

javascript php jquery html

Javascript 返回元素类post表单提交,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我正在尝试使用按钮创建可自定义的复选框。我能够区分选择了哪个按钮类，但是我无法跟踪按钮类发布表单提交。理想情况下，我可以保留最初提供的任何输入，而不是在加载或提交页面时将按钮重置为默认值。我尝试过使用isset（）php函数，但我认为在这种情况下它不是一个有效的解决方案。还有其他选择吗？请在下面找到我的代码： <form id="my-form" method="post"> <html> <body > <style> .butt

我正在尝试使用按钮创建可自定义的复选框。我能够区分选择了哪个按钮类，但是我无法跟踪按钮类发布表单提交。理想情况下，我可以保留最初提供的任何输入，而不是在加载或提交页面时将按钮重置为默认值。我尝试过使用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>


.按钮{
颜色：白色；
填充：10px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：12px；
利润：4倍2倍；
光标：指针；
}
.按钮1{
边界半径：100%；
背景颜色：绿色；
边界：无；
}
.按钮2{
边界半径：100%；
背景色：红色；
边界：无；
} 
功能生成按钮（div，val）{
var元素=document.getElementById（val）；
var button=document.createElement（“按钮”）；
var span=document.createElement（“span”）；
//更改已提交设置的帐户
if（元素==null）{
setAttribute（“类”，“按钮1”）；}
否则{
var cL1=element.classList.contains（“button1”）；
var cL2=element.classList.contains（“button2”）；
element.parentNode.removeChild（元素）；
如果（cL2==true）{button.setAttribute（“class”，“button button1”）；}
如果（cL1==true）{button.setAttribute（“class”，“button-button2”）；}
}
设置属性（“类型”、“按钮”）；
设置属性（“id”，val）；
setAttribute（“名称”，val）；
var testDiv=document.getElementById（div）；
testDiv.appendChild（按钮）；
button.addEventListener（“单击”，函数（）{makeButton（div，val）；}）
}
window.onload=函数（）{
makeButton（“test1”、“t1test”）；
makeButton（“test2”、“t2test”）；}
提交

删除表单标记并向提交按钮添加“单击”事件侦听器如何？下面插入的代码附加到文件末尾：

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


document.getElementById（“提交”）.addEventListener（“单击”，函数）（）{
var元素=[“t1test”，“t2test”]；
对于（var i=0；i


这样，当按下按钮时，页面将不会重新加载，从而保留按钮选择。
这将解决我遇到的其他一些问题。我会给它一个镜头和更新。将需要一段时间在我现有的代码中级联更改。我认为这会起作用。我目前有一个php sql查询，需要重新加载表单，但我应该能够切换到AJAX方法。