Question

我想使用bootstrap-popover创建一个登录表单。

我的代码是：

<ul class="nav">
   <li><a href="#" id="idLogin" rel="popover">Login</a></li>
</ul>

这是我的剧本：

<script>    
$("#idLogin").popover({
    placement:'bottom',
    html: true,
    content: '<form class="well form-inline" method="post" action="login.php"><input type="text" id="username" name="username" class="input-medium" placeholder="username">&nbsp<input type="password" class="input-medium" id="password" name="password" placeholder="password">&nbsp<label class="checkbox"><input type="checkbox">Ricordami</label>&nbsp<button type="submit" class="ui-button-primary ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">Accedi</button></form>',
    trigger: 'manual'
}).click(function(e) {
    $(this).popover('toggle');
    e.stopPropagation();
});
</script>

代码工作正常，但是当用户输入用户名或密码错误时，我想在弹出框中插入错误消息。

这可能吗？

Answer 1

我建议使用ajax发布您的表单，然后一旦服务器（'login.php'）发送响应，您就可以更新popover内容。然后，您可以使用弹出窗口的.data（）来更改其内容。像...这样的东西。

  $("form").submit(function(){

       $.ajax({
       type: "POST",
       url: url,
       data: $("form").serialize()
       success: function(data)
       {
           // handle response from the php script.

           // if username/password not valid update popover content
           $('#idLogin').data('popover').options.content = 'username was not valid..<form>..</form>;

       }
     });

     return false;
 });

PopOver引导程序和登录表单

1 个答案: