Accordion buttons submitting form javascript
Question
I'm trying to make a form with javascript that will link to my perl script (I do not know javascript so most of the code was taken from various sites).
My main form looks like this:
<body>
<form method ='post' action ='cgi-bin/script.pl' target="_blank">
<button class="accordion">Gender</button>
<div class="panel">
<p>
<label><input type="checkbox" name = "attributes" value = "M"> Male </label>
<label><input type="checkbox" name = "attributes" value = "F"> Female </label>
</p>
<p>
<label><input type="checkbox"> Select All </label>
<label><input type="checkbox"> Deselect All </label>
</p>
</div>
<div>
<input type = 'submit' value='Process'><input type ='reset'>
</div>
</form>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
</script>
</body>
However when I click on the accordion button it submits my form and then shows me the dropdown menu. I would like to only submit the form when I click on the process button. Does anyone have any suggestions for how to stop the form from submitting when I click on the accordion button?
1 answers
solution1
0 ACCPTED 2017-03-14 15:40:42
Try setting your button type to be button.
<button class="accordion" type="button">Gender</button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.