Given an MVC view like so:
<form id="Form1">
<label for="LastName">
@Html.DisplayNameFor(m => m.LastName)
</label>
@Html.EditorFor(m => m.LastName)
<button id="SubmitOne" onclick="SubmitOne_Click()">SubmitOne</button>
</form>
<form id="Form2">
<label for="LastName2">
@Html.DisplayNameFor(m => m.LastName2)
</label>
@Html.EditorFor(m => m.LastName2)
<button id="SubmitTwo" onclick="SubmitTwo_Click()">SubmitTwo</button>
</form>
The javascript functions are irrelevant, this problem also occurs when they are empty or just have an alert.
When SubmitOne is clicked, everything works as expected. However, when SubmitTwo is clicked the whole page refreshes, which isn't supposed to happen. If I comment out Form1, then Form2 works fine.
What is going on here?
Update: Here's the javascript:
function SubmitOne_Click() {
alert("One");
}
function SubmitTwo_Click() {
alert("Two");
}
As a troubleshooting step, I stripped the view down to nothing but the form, and the script down to nothing as well. I do have references to Bootstrap, jqGrid, and jQuery in the _Layout, but nothing that currently uses them in this view.
