Menu
So disclaimer, I already found the answer to this but I'm posting it as a question in case it helps somebody else.
Scenario: Inside a form in the page you have a couple of accordions so that the user can collapse the parts they already looked at. If you follow most examples expanding the accordions will actually auto submit the form, no bueno.
<!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>
758
Essentially the buttons for the accordion are being treated as submit buttons even though we already have a submit button. In order to override this behavior simply declare the button type as button: <button type="button" class="accordion">Section 1</button> <button type="button" class="accordion">Section 2</button>
To remove the checkboxes though, the accordion has the following style: This also inherits to the inputs in your form. You can solve this by just overriding that style: Thanks, I should have read the css completly before asking, sorry, my bad.
We have demonstrated various ways to submit a form in our earlier blogs. Sometimes there is a need to submit a form automatically. That brings up a great user experience while making them to submit entries. Here we bring up this example, which demonstrates how to auto submit a form after a given interval of time.
Below are the glimpses for it : After completing 20 seconds, below Javascript function will submit form automatically. Our example, validates all fields before form submission by calling user defined validate () function.
Essentially the buttons for the accordion are being treated as submit buttons even though we already have a submit button. In order to override this behavior simply declare the button type as button:
<button type="button" class="accordion">Section 1</button>
<button type="button" class="accordion">Section 2</button>
This may be obvious to some but given that I rarely deal with web stuff this was a very frustrating side affect to find and work around so I hope it helps somebody else.
152
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With