按钮提交虽然它不是提交按钮答案

【问题标题】：Button Submits Although It is Not a Submit Button按钮提交虽然它不是提交按钮
【发布时间】：2021-07-01 05:30:06
【问题描述】：

我希望提交按钮首先使用 JavaScript 脚本验证表单，但它没有。它直接调用控制器中的动作。所以我把它改成了一个按钮，所以它不再是一个提交按钮，但奇怪的是它仍然提交表单。我将 onclick 添加为属性，但它不会触发该功能。

代码如下所示；我也试过 onclick="return validateForm()"。

<td><input type="button" class="btn btn-danger" onclick="popup('@Url.Action("NewStudentSchedule", "Admin", newStudent)','New Student Schedule')" value="Schedule" /></td>
                <td>@Html.DropDownListFor(s => @Model[i].Teacher, new SelectList(teacherList), "Select Teacher", new { @class = "btn btn-light  dropdown-toggle", id = "selectTeacher" })</td>
                <td>@Html.TextBoxFor(s => @Model[i].StartingDate, new { @class = "form-control", type = "date", id = "startDate" })</td>
                <td> @Html.CheckBoxFor(s => @Model[i].IsNowStudent, new { @id = "isNowStudent" })</td>
                <td><button class="btn btn-danger" onclick="validateForm();">Save</button></td>

JavaScript 函数如下。我设置了断点以查看编译器是否访问过它，但什么也没有。

 function validateForm() {
 
 // Validation Code
 
 }

控制器中的动作；

[HttpPost]
public ActionResult StudentApplicants(List<StudentApplicant> studentApplicant)
{
    TempData.Keep();
    return View();
}

【问题讨论】：

标签： javascript c# html .net asp.net-mvc

【解决方案1】：

button 元素中type 属性的默认值为submit。

validateForm() 按钮应具有type="button" 属性。

<button type="button" class="btn btn-danger" onclick="validateForm();">Save</button>

【讨论】：

感谢您的回复。我在按钮上添加了类型，但现在什么也没有发生。它仍然不会触发 validateForm() 函数，也不会跳转到控制器中的操作。你知道为什么吗？

【解决方案2】：

<button class="btn btn-danger" onclick="validateForm();">

应该是 <button type="button" class="btn btn-danger" onclick="validateForm();">

html 按钮的默认value 是submit。

对于validateForm() 中的代码，您可以通过执行以下操作来确认它是否有效

function validateForm() {
 
 // Validation Code
 console.log("Hi, This Works!")
 }

【讨论】：