手风琴按钮提交表格javascript

时间:2017-03-14 15:36:01

标签: javascript

我正在尝试使用javascript创建一个链接到我的perl脚本的表单(我不知道javascript所以大部分代码都是从各个站点获取的)。

我的主要表单如下:

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

然而,当我点击手风琴按钮时,它会提交我的表格然后显示下拉菜单。我想只在我点击进程按钮时提交表单。当我点击手风琴按钮时,有没有人建议如何停止提交表单?

1 个答案:

答案 0 :(得分:0)

尝试将按钮类型设置为按钮。

<button class="accordion" type="button">Gender</button>

https://www.w3schools.com/TAgs/att_button_type.asp