Аккордеон внутри формы автоматически представляет - PullRequest
Новая
       5

Аккордеон внутри формы автоматически представляет

0 голосов
/ 17 мая 2018

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

Сценарий: внутри формы на странице у вас есть пара аккордеонов, поэтомучто пользователь может свернуть части, на которые он уже смотрел.Если вы будете следовать большинству примеров, то при расширении аккордеонов форма будет автоматически отправлена, но не будет. 

<!DOCTYPE html>
<html>
<head>
<style>
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #ccc; 
}

.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
}
</style>
</head>
<body>

<h2>Accordion</h2>

<form action="fail" method="post" enctype="multipart/form-data">

<button class="accordion">Section 1</button>
<div class="panel">
  <input type="checkbox" name="checkbox1.1">Checkbox 1.1
  <br>
  <input type="checkbox" name="checkbox1.2">Checkbox 1.2
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <input type="checkbox" name="checkbox2.1">Checkbox 1.1
  <br>
  <input type="checkbox" name="checkbox2.2">Checkbox 1.2
</div>
<input type="submit" value="Submit">
</form>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    });
}
</script>

</body>
</html>

1 Ответ

0 голосов
/ 17 мая 2018

По сути, кнопки для аккордеона рассматриваются как кнопки отправки, хотя у нас уже есть кнопка отправки.Чтобы переопределить это поведение, просто объявите тип кнопки как кнопку: 

<button type="button" class="accordion">Section 1</button>
<button type="button" class="accordion">Section 2</button>

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

...