douan3414
2018-05-29 23:13 阅读 68

返回元素类后表单提交

I'm trying to create customizable checkboxes using buttons. I'm able to differentiate which button class has been selected, but I've been unable to track the button class post form submission. Ideally, instead of reseting the buttons to a default value when the page is loaded or submitted, I can keep whatever input was initially provided. I've tried using the isset() php function, but I don't think it's a valid solution in this circumstance. Are there any alternatives? Find my code below:

<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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • 已采纳
    douding7189 douding7189 2018-05-30 02:52

    How about removing the form tags and adding a "click" event listener to the submit button? The code shown below inserted appended to the end of the file:

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

    This way the page will not be reloaded when the button is pressed thus retaining button selection.

    点赞 评论 复制链接分享

相关推荐