Method being called on wrong button in FireFox

[TheSouthLondonSlasher]

Thank you in advance to anyone who may be able to help. This is my
first attempt at JavaScript, so I apologize if I've done something
blatantly stupid in the below code. Basically, I have a form with 4
checkboxes, a submit button, and a cancel button. When the user
clicks submit, the page should build the URL, and submit the form, as
long as one or more boxes is checked. When the user clicks cancel,
they should be redirected back to the main page. The problem is that
this works in IE, but FireFox and Safari (Which I'm sure aren't as
forgiving) seem to call BOTH methods when cancel is clicked. Please
forgive the <%= %>'s. This is actually part of a JSP, and some values
come from the java.

Any help pointing out things I've done incorrectly will be greatly
appreciated! I'd really like this to work, but I'd also like to
learn, and do it correctly. Thanks again!

<SCRIPT type="text/javascript">
// Validate the form, build the URL, and submit it.
function handleForm(){

// If the user has not selected anything, display a message and don't
continue.
if (document.mainForm.eAdmin.checked == false &&
document.mainForm.eEditor.checked == false &&
document.mainForm.iAdmin.checked == false &&
document.mainForm.iEditor.checked == false) {
alert ('Please select at least one role before continuing.');

} else {
// Disable the button so we don't get bonus submits
document.mainForm.submitForm.disabled=true;
// Build an array of chosen roles
var op_requestedApps = new Array();
if (document.mainForm.eAdmin.checked == true) {
op_requestedApps.push("TSEA");
}
if (document.mainForm.eEditor.checked == true) {
op_requestedApps.push("TSEE");
}
if (document.mainForm.iAdmin.checked == true) {
op_requestedApps.push("TSIA");
}
if (document.mainForm.iEditor.checked == true) {
op_requestedApps.push("TSIE");
}

// Compose the URL and submit
document.mainForm.action="user/activate.jsp?id=<%= id
%>&op_enduserId=<%= id %>&op_requesterId=<%= req %>&op_requestedApps="
+ op_requestedApps;
document.mainForm.submit();
}
}

// Redirect the user back to the main page.
function cancelForm(){
location.replace("user/main.jsp");
}
</SCRIPT>

<form name="mainForm" onsubmit="handleForm();" action=""
method="post">
<input class="input" type="checkbox" title="Access" name="eAdmin"
id="eAdmin" />
<label for="eAdmin">Extranet Administrator</label><br />


<input class="input" type="checkbox" title="Access" name="eEditor"
id="eEditor" />
<label for="eEditor">Extranet Editor</label><br />

<input class="input" type="checkbox" title="Access" name="iAdmin"
id="iAdmin" />
<label for="iAdmin">Intranet Administrator</label><br />

<input class="input" type="checkbox" title="Access" name="iEditor"
id="iEditor" />
<label for="iEditor">Intranet Editor</label>

<br /><br />


<button name="submitForm" value="submitForm" type="submit">Submit</
button>
<button name="cancelForm" value="cancelForm"
onClick="cancelForm();">Cancel</button>
</form>

 

[Doug Gunnoe]

                        <button name="submitForm" value="submitForm" type="submit">Submit</
button>
                        <button name="cancelForm" value="cancelForm"
onClick="cancelForm();">Cancel</button>
                </form>

Hello.

The following is from here: http://www.w3schools.com/tags/tag_button.asp

------
HTML <button> tag

Definition and Usage

Defines a push button. Inside a button element you can put content,
like text or images. This is the difference between this element and
buttons created with the input element.

Important: Be careful when using the button element in a form. In a
form the different browsers will submit different values. Internet
Explorer will submit the text between the <button> and </button> tags,
while other browsers will send the content of the value attribute.
When in a form, use the input element instead.

Note: The type attribute should always be specified. The default
button type for Internet Explorer is "button", while in other browsers
(and the W3C specification) it is "submit".

 

[TheSouthLondonSlasher]

Hello.

The following is from here:http://www.w3schools.com/tags/tag_button.asp

------
HTML <button> tag

Definition and Usage

Defines a push button. Inside a button element you can put content,
like text or images. This is the difference between this element and
buttons created with the input element.

Important: Be careful when using the button element in a form. In a
form the different browsers will submit different values. Internet
Explorer will submit the text between the <button> and </button> tags,
while other browsers will send the content of the value attribute.
When in a form, use the input element instead.

Note: The type attribute should always be specified. The default
button type for Internet Explorer is "button", while in other browsers
(and the W3C specification) it is "submit".

Doug,

Thank you so much for your help. Going back and looking at some
examples, I now see the error of my ways. I was afraid it was
something so simple

If there are any other anomalies in the code I presented, please let
me know, and thanks again!