CODEWITHSUNDEEP
javascripthtmlforms
David Brierton
David Brierton

Reputation: 7397

Submit form with submit button not other buttons on page

I am trying to have more than one button on my page but for some reason every button submits my page to the next page. Is there a way to make only my submit button submit and my other buttons only do the functions there set up for?

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

Upvotes: 1

Views: 38

Answers (2)

MrCode
MrCode

Reputation: 64526

The default type of a button is submit, so include a type of button and it will not submit the form:

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

Upvotes: 2

Alexis
Alexis

Reputation: 5831

Button with no type are interpreted like submit button

add the type="button"

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

Upvotes: 2

Related Questions