1

計算を行うためにユーザーがコンパイルする必要があるフォームを作成しました。AJAX スクリプトは、結果を [送信] ボタンの直後の div に表示します。しかし、せっかちなユーザーは、ボタンの直後に結果が表示されていることに気付かないため、「SUBMIT」を複数回クリックする傾向があることに気付きました。ユーザーが「SUBMIT」をクリックするたびに、結果を含む div ([id=results]) の一番下までスクロールする方法を考えていました。もちろん、送信ボタンに href 属性を含めることはできないので、html アンカーを作成する方法がわかりません...もう少し jquery が必要だと思います。

編集：ソースコード：calculator1.php

<form name="formpeso" id="formpeso" action="" method="post">
        <div>
            <label for="altezza">Inserisci la tua altezza <strong>(in cm)</strong></label>
            <input type="text" name="altezza" id="altezza" onkeyup="commadot(this)" value="" />
[FOO... FOO...]     
            <input type="submit" id="submit" value="send data" />
     </div>   
    </form>

<div id="results">RESULTS WILL APPEAR HERE AFTER CLICKING ON SUBMIT</div>

テキストフィールドを検証し、結果 (calculator2.php に処理) を表示する関数を次に示します。

$(document).ready(function(){
    $("#formpeso").validate({
        debug: false,
        rules: {
            altezza: {min:20, required: true},
            peso: {min:1, required: true},
            vita: {min:1, required: true},
            fianchi: {min:1, required: true},
            collo: {min:1, required: true},
            polso: {min:1, required: true},
        },
        messages: {
            altezza: "Non hai compilato il campo!<br />",
            peso: "Non hai compilato il campo!<br />",
            vita: "Non hai compilato il campo!<br />",
            fianchi: "Non hai compilato il campo!<br />",
            collo: "Non hai compilato il campo!<br />",
            polso: "Non hai compilato il campo!<br />",

        },
        submitHandler: function(form) {
            // do other stuff for a valid form
            $.post('calculator2.php', $("#formpeso").serialize(), function(data) {
                $('#results').html(data);
            });
        }
    });
});

デモ:リンク

4

2 に答える 2

1

@Zee Teeのバージョンを使用しますが、データがdivにロードされた後、一番下までスクロールする必要があることに注意してください。

つまりこうする

  var div = $('div#results')
  var o = div.offset().top; //gets the top position of the div
  var h = div.outerHeight(); // gets the height of the div

   div.scrollTop( o + h ); //scrolls page to the bottom of the div

の隣の $.post 部分で

        $.post('calculator2.php', $("#formpeso").serialize(), function(data) {
            $('#results').html(data);
            // do positioning here AFTER loading the data!
        });

試してみる ：）

于 2012-07-09T20:56:26.917 に答える
0

これにより、ページが div の一番下までスクロールされます。

 $('button[type="submit"]').click(){
  var div = $('div#results')
  var o = div.offset().top; //gets the top position of the div
  var h = div.outerHeight(); // gets the height of the div

   div.scrollTop( o + h ); //scrolls page to the bottom of the div

 });

追加の手段として、ajax 呼び出しの前に送信ボタンを無効にし、ajax が完了したら再度有効にすることもできます。

 $('button[type="submit"]').attr('disabled',true);
 $.get(url,function(){
   $('button[type="submit"]').attr('disabled',false);        
 });

これは、クリック機能にも含まれます。

したがって、次のようになります。

 submitbutton = $('button[type="submit"]')

 submitbutton.click(){

 $(this).attr('disabled',true);

  var div = $('div#results')
  var o = div.offset().top; //gets the top position of the div
  var h = div.outerHeight(); // gets the height of the div

   div.scrollTop( o + h ); //scrolls page to the bottom of the div

    //your ajax request
    $.get(url,function(){
      submitbutton.attr('disabled',false);        
    });

 });
于 2012-06-27T07:42:39.597 に答える