Question

我想在我的页面上设置多个按钮，但由于某种原因，每个按钮都会将我的页面提交到下一页。有没有办法只提交我的提交按钮，我的其他按钮只执行那里设置的功能？

<form name="generatereport" method="post" action="_location_queries.cfm">

<select name="Location" id="loc" multiple="multiple">
    <!---<option selected value="">Select location</option>--->
    <option value="OPERATIONS">Operations</option>
    <option value="CCC">Contact Center</option>
    <option value="QA">QA Department</option>
    <option value="DS">DeSoto</option>
    <option value="PS">Palma Sola</option>
    <option value="LWR">Lakewood Ranch</option>
    <option value="NR">North River</option>
    <option value="SDL">SDL</option>
</select>

<button id="add">ADD ALL</button>
<button id="rem">REMOVE ALL</button>
<br /><br />

<input type="submit"  name="submit" value="Continue" />

</form> 

<script type="text/javascript">
var opts = document.querySelectorAll('#loc option');

document.getElementById('add').addEventListener('click', function() {
    for ( var i=0; i<opts.length; i++ ) {
        opts[i].selected = true;
    }
});

document.getElementById('rem').addEventListener('click', function() {
    for ( var i=0; i<opts.length; i++ ) {
        opts[i].selected = false;
    }
}); 
</script>

Answer 1

没有类型的按钮被解释为提交按钮

添加type="button"

<button type="button">Button</button>

Answer 2

按钮的默认类型为submit，因此请添加button类型，并且不会提交表单：

<button id="add" type="button">ADD ALL</button>
<button id="rem" type="button">REMOVE ALL</button>

使用提交按钮提交表单而不是页面上的其他按钮

2 个答案: