0

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>

コードは正しく動作しますが、ユーザーがユーザー名またはパスワードを間違えたときにポップオーバーにエラー メッセージを挿入したいと考えています。

これは可能ですか？

4

1 に答える 1

1

ajax を使用してフォームを投稿することをお勧めします。サーバー ('login.php') が応答を送信したら、ポップオーバー コンテンツを更新できます。次に、ポップオーバーの .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;
 });
于 2013-04-29T19:38:21.807 に答える