5

重複の可能性:
Ajax コンテンツの読み込み後に一番上までスクロール

送信時にエラーまたは成功メッセージを表示する ajax フォームがあります。理想的には、ブラウザをフォームの一番上までスクロールして、ユーザーがこれらのメッセージを見ることができるようにしたいのですが、これを実装すると正しく動作しないようですそして、それを修正する方法がわかりません:-/スクロールが十分に高くないか、リフレッシュしますか? :(私は途方に暮れています。あなたが私を導くことができれば、それは素晴らしいことです:)

$('#submit').bind('click', function(){
   $('body, html').animate({scrollTop:$('form').offset().top}, 'slow', 'easeInCubic');
   $.ajax({               
      url:$(this).attr('action'),
      type:'POST',              
      data:$('form').serialize(),
      dataType:'json',
      success:function(respond) {
         if(respond.result == 'false') {
            var error_msg = '<h3>Please correct the following errors:</h3><ul>'+respond.errors+'</ul>';
            $('.error_msg').html(error_msg);            
         } else {
            var success_msg = '<h3>Success!</h3>';  
            $('.error_msg').empty();    
            $('.success_msg').html(success_msg);
            $('form').find("input[type=text], textarea").val("");                           
            setTimeout(function() {
               $('.success_msg').slideUp();                             
            }, 5000);
         }      
      }
   });                      
   return false;    
});

HTML:

<form method="post" action="form.php">
   <div class="error_msg"></div>
   <div class="success_msg"></div>
   <label for="name">Name?</label>
   <input type="text" value="" name="name" />
   <label for="email">Email?</label>
   <input type="text" value="" name="email" />
   <input id="submit" type="submit" value="Submit" name="submit" />
</form>
4

1 に答える 1

7

実際、私は2つの方法でそれを行います：

最初：

         $(function(){
            function submitForm(){
                $.ajax({
                    url:"a.php",
                    type:"post",
                    success:function(data){
                        alert(data);
                    },
                    complete:function(){
                        $('body, html').animate({scrollTop:$('form').offset().top}, 'slow');
                    }
                });
            }
            $('#submit').click(function(){
                submitForm();
            });
        });

ここでは、関数 submitForm() を作成し、入力タイプのボタンをクリックして送信しています。

または送信ボタンを使用したより良い方法：

2番目: (私はこの方法が好きです)

$(function(){
   $('form').submit(function(e){
     e.preventDefault();
       $.ajax({
         url:"a.php",
         type:"post",
         success:function(data){
            alert(data);
         },
         complete:function(){
           $('body, html').animate({scrollTop:$('form').offset().top}, 'slow');
        }
     });
  });
});
于 2012-12-13T17:54:34.950 に答える