Отправка формы сообщения о возврате класса элемента

Я пытаюсь создать настраиваемые флажки с помощью кнопок. Я могу различить, какой класс кнопки был выбран, но мне не удалось отследить отправку формы сообщения класса кнопки. В идеале, вместо того, чтобы сбрасывать кнопки до значений по умолчанию, когда страница загружается или отправляется, я могу сохранить любой исходный ввод. Я пробовал использовать php-функцию isset (), но не думаю, что это подходящее решение в данном случае. Есть ли альтернативы? Найдите мой код ниже:

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

javascript php jquery html

30.05.2018 01:13

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как насчет удаления тегов формы и добавления прослушивателя событий «клик» к кнопке отправки? Код, показанный ниже, вставлен в конец файла:

<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.info(element.classList.contains("button1"));
    console.info(element.classList.contains("button2"));
  }
});
</script>

Таким образом, страница не будет перезагружаться при нажатии кнопки, сохраняя выбор кнопки.

Это должно решить еще несколько проблем, с которыми я столкнулся. Я попробую и обновлю. Потребуется время, чтобы каскадировать изменения во всем моем существующем коде.

— 30.05.2018 16:33

Думаю, это сработает. В настоящее время у меня есть запрос php sql, который требует перезагрузки формы, но я могу переключиться на метод AJAX.

— 01.06.2018 16:58

30.05.2018 04:52