1

我写了一个表格，需要用户编译才能进行一些计算。AJAX 脚本使结果出现在“提交”按钮之后的 div 中。但是我注意到不耐烦的用户倾向于多次单击“提交”，因为他们没有看到结果显示在按钮本身之后。我想知道如何滚动到 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 回答