Question

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

<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标签将提交表单，但不包括单选按钮的值。我想念什么？

Answer 1

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

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

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

我还注意到您有onclick处理程序在您的元素上注册了两次。清理一下。

单击Bootstrap单选按钮时提交表单

1 个答案: