时间戳

首页 > 解决方案 > 单击 Bootstrap 单选按钮时提交表单

twitter-bootstrap-3 - 单击 Bootstrap 单选按钮时提交表单

问题描述

我有一个带有单选按钮组的表单：

<form name="search" class="form-inline" asp-controller="controller" asp-action="action" method="get">
  <div class="btn-group" data-toggle="buttons">
    <label onclick="document.search.submit()" class="btn btn-default @ActiveTime("AM")" onclick="document.search.submit()">
      <input type="radio" name="time" value="am" autocomplete="off">AM
    </label>
    <label onclick="document.search.submit()" class="btn btn-default @ActiveTime("PM")" onclick="document.search.submit()">
      <input type="radio" name="time" value="pm" autocomplete="off">PM
    </label>
 </div>
</form>

@ActiveTime：

public string ActiveTime(string time)
{
    if (ViewData["time"].ToString() == time) { return "active"; }
    return "";
}

的相关部分controller\action：

string time = ( (String.IsNullOrEmpty(HttpContext.Request.Query["time"].ToString())) ? "am" : HttpContext.Request.Query["time"].ToString() ).ToUpper();
ViewData["time"] = time;

单击 AM 或 PM 标签将提交表单，但不包括单选按钮的值。我错过了什么？

标签： twitter-bootstrap-3asp.net-core-mvcasp.net-core-2.0

解决方案

它不会发送单选按钮的值，因为当用户单击标签时，浏览器的 javascript 引擎将执行onclick您在该元素上连接的事件处理程序。您当前的处理程序将执行此代码，该代码会document.search.submit()立即提交表单，甚至在引导库可以调整单选按钮状态之前。

您可以通过劫持点击处理程序并自己设置单选按钮值然后提交表单（全部在 javascript 中）来解决问题。

我会尝试的另一个选项是，从单选按钮选择/单击事件中删除表单提交行为。如果用户想改变他的选择怎么办？我会为表单提交创建一个单独的“提交”按钮。

我还注意到您onclick在元素上注册了两次处理程序。把它清理干净。

推荐阅读