Question

我写了一个表单，需要由用户编译才能进行一些计算。 AJAX脚本使结果出现在“SUBMIT”按钮后面的div中。但是我注意到不耐烦的用户往往会在“提交”上多次点击，因为他们没有看到结果显示在按钮本身之后。我想知道如何滚动到div的底部（[id = results]），其中包含用户点击“SUBMIT”时的结果。当然提交按钮不能包含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);
            });
        }
    });
});

演示：link

Answer 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!
        });

试一试：）

Answer 2

这会将页面滚动到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);        
    });

 });

单击“提交”后滚动到div的底部

2 个答案: