单击提交按钮时重新加载页面后如何滚动到特定 div?

2024-03-20

我正在尝试做一些奇特的事情。我已经成功编写了代码,以便在填写小表单并单击提交按钮时显示数据库中的结果。结果显示在表单的正下方。但我觉得如果页面能自动向下滚动到包含已填写表单结果的 div,那就太好了。我想我必须使用 jquery 或 ajax 来实现这一点。由于我对它们一无所知,因此我在互联网上搜索复制粘贴代码。但它们都不起作用。

单击提交按钮时,页面将重新加载以从数据库中获取结果。我已经获得了当页面从网络重新加载时向下滚动到 div 的代码,但问题是......即使您提交按钮,滚动也会发生没有点击。因此,有人可以给出仅在单击提交按钮时以及重新加载页面后向下滚动到 div 的代码吗?

代码是这样的

<form name="searchdonor" action="" id="form" method="POST" align="center" enctype="application/x-www-form-urlencoded">  
--- ------ ------  
--- ------ ------  
--- ------ ------

</form>  
<input type="submit" name="submit" id="submit" value="Submit"  onclick="return(searchval()); "> 
//the div i want to scroll down is below one 
<div class="col-sm-8" id="what">
</div>  

这是 html 和 php-mysqli 中的完整代码

<div class="col-sm-4">
         <h1 class="register-title">Search a Donor</h1>
              <div id="wrapper">
              <div id="chatbox">
      <form name="searchdonor" action="" id="form" method="POST" align="center" enctype="application/x-www-form-urlencoded">
        <table id="results">
                <tr><td><h4>Country:</h4></td><td>&nbsp&nbsp&nbsp&nbsp&nbsp
                 <select id="slct1" name="country" onchange="populate1(this.id,'slct2')">
                  <option value="">--Select--</option>
                  <option value="India">India</option>
                 </select></td></tr>
                <tr><td><h4>State:</h4></td><td>&nbsp&nbsp&nbsp&nbsp&nbsp
                 <select id="slct2" name="state" onchange="populate2(this.id,'slct3')">
                  <option value="">--Select--</option>
                 </select></td></tr>
                <tr><td><h4>District:</h4></td><td>&nbsp&nbsp&nbsp&nbsp&nbsp
                 <select id="slct3" name="district" onchange="populate3(this.id,'slct4')">
                  <option value="">--Select--</option>
                 </select></td></tr>
                <tr><td><h4>City:</h4></td><td>&nbsp&nbsp&nbsp&nbsp&nbsp
                 <select id="slct4" name="city">
                  <option value="">--Select--</option>
                 </select></td></tr>
                <tr><td><h4>Blood group:</h4></td><td>&nbsp&nbsp&nbsp&nbsp&nbsp
                 <select name="bloodgroup">
        <option value="">--Select--</option>
        <option value="A+">A+</option>
        <option value="A-">A-</option>
        <option value="B+">B+</option>
        <option value="B-">B-</option>
        <option value="O+">O+</option>
        <option value="O-">O-</option>
        <option value="AB+">AB+</option>
        <option value="AB-">AB-</option>
                </select></td></tr>

      </form>
      </table><br />

    <input type="submit" name="submit" id="submit" value="Submit"  onclick="return(searchval());">
    </div>


              </div>
         </div>

         <div class="col-sm-2">
         </div>
     </div>
     <div class="dropdownwrap">
     <?php 
     if(isset($_POST['submit'])){

              $country=$_POST['country'];
              $state=$_POST['state'];
              $district=$_POST['district'];
              $city=$_POST['city'];
              $bloodgroup=$_POST['bloodgroup'];
              ?>
     <div class="row"><br />
        <div class="col-sm-2">
        </div>
        <div class="col-sm-8" id="what">
        <a class="what"></a>
        <?php echo "<h4 align='center'> Donors in <b>".$city."</b> for <b>".$bloodgroup."</b> are</h4>";?>
        </div>
        <div class="col-sm-2">
        </div>
     </div>
       <div class="row">
        <div class="col-sm-2">
        </div>
        <div class="col-sm-8">
          <div class="table-responsive">

           <table id="tablepaging" class="table" align="center">
            <thead><hr />
             <tr>
                <th><b>Full Name</b></th>
                <th><b>Contact Number</b></th>
             </tr>
            </thead>
            <tbody>
              <?php 


              $connect = mysqli_connect('localhost', 'root', '', 'blood'); if (mysqli_connect_errno()) echo "Failed to connect to MySQL: " . mysqli_connect_error();
              $query="SELECT * FROM users WHERE country='$country' && state='$state' && district='$district' && city='$city' && bloodgroup='$bloodgroup' && activity='available'";
              $result=mysqli_query($connect,$query) or die('Error, query failed');
              mysqli_close($connect);
              if (mysqli_num_rows($result) == 0) {
              echo"<h3 align=\"center\">Sorry, No Donors Found</h3>";
              }
              elseif($result)
              {
              while ($row = mysqli_fetch_array($result)){

              echo"<tr>";
              echo"<td>".$row["firstname"]."&nbsp".$row["lastname"]."</td>";
              echo"<td>".$row["phonenumber"]."<br />".$row["secondnumber"]."</td>";
              }
              echo"</tr>";

              }}
              ?>
            </tbody>
           </table>
            <div id="pageNavPosition" align="center"></div>
          </div>
         </div>



         <div class="col-sm-2">
         </div>


</div>       

</div>

</div>

您可以在 URL 中使用锚点。

或者,如果你想要流畅的动画,只需在if(isset($_POST['submit']))健康)状况。这样,只有在单击提交按钮并且页面重新加载时才会发生滚动。

我还建议您使用$(function() { /**/ });jQuery 语法,因此只有在加载 DOM 时才会发生滚动。

<?php

if(isset($_POST['submit']))
{

    //[...]
    //sql query and display
    //[...]

    ?>
    <script>
        $(function() {
            $('html, body').animate({
                scrollTop: $("#myDiv").offset().top
            }, 2000);
         });
    </script>
    <?php

}

?>

滚动到特定 div 的代码可在此处找到:平滑滚动到 div id jQuery https://stackoverflow.com/questions/19012495/smooth-scroll-to-div-id-jquery

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

单击提交按钮时重新加载页面后如何滚动到特定 div? 的相关文章

  • Slim 3 - 斜杠作为路由参数的一部分

    我需要使用可以包含斜杠 的参数来编写 URL 例如 经典的 hello username 路线 默认情况下 hello Fabien将匹配此路线 但不匹配 hello Fabien Kris 我想问你如何在 Slim 3 框架中做到这一点
  • fadeOut() 和slideUp() 同时进行?

    我已经发现jQuery 淡出然后滑动 https stackoverflow com questions 734554 jquery fadeout then slideup这很好 但不是那个 我怎么能够fadeOut and slideU
  • 如何将 STRUCT - OR - JSON 传递给 Coldfusion CFC 方法

    我有一个现有的 CFC 在将结构传递到方法中时可以正常工作 问题是 我们现在还需要通过 JSON 将数据传递到同一函数中 这是 CFC 片段
  • 自调用函数未定义

    如果我声明一个函数文字 var x function alert hi console log x returns the function code However var x function alert hi console log
  • 如何在具有相同值的下拉菜单上触发 jQuery 更改事件

    即使用户选择相同的值 如何每次都触发 jQuery 更改事件 我需要刷新效果 例如如果用户选择Lawyer它会发出警报hello然后用户再次选择Lawyer从下拉菜单中 它应该发出警报hello 我怎样才能实现它 以下是代码 jQuery
  • 如何按 Angular 表中的属性(该属性具有单个 rownspan)进行分组?

    我没有找到这个问题的合适标题 我的问题是 例如 我有一个包含两列的表 列汽车品牌和列汽车型号 我希望表是 like in this picture 换句话说 品牌名称只会出现 1 次 我的输入数组采用以下 json 格式 brand Aud
  • jquery 当前可见的第 n 个子级

    我可以像这样设置每 4 个 item div 的样式 jQuery item nth child 4n addClass fourth item 这工作得很好 但后来我隐藏了一些项目 显示了其他一些项目 并想重新做这个样式 但只对每第四个可
  • 在 Windows 上查看 PHP 文件夹

    我正在编写一个简单的 PHP 脚本来监视文件夹及其子文件夹的任何更改 新文件 修改 删除 然后执行操作 我将使用 Windows 上的命令行运行此脚本php f script php 我一直在寻找一种在 Windows 上观看具有 PHP
  • Apache 2.4.9 在启用 ssl 模块并设置 ssl 证书后失败

    Apache 在尝试设置 ssl 证书后抛出以下错误 ssl emerg pid 30907 AH02572 Failed to configure at least one certificate and key for localhos
  • 由于未定义符号,PECL solr 未加载:curl_easy_getinfo

    我正在尝试加载 PECL solr 扩展 我尝试使用 pecl install solr 并下载并使用 phpize configure make 来安装它 在这两种情况下 扩展安装时都没有错误 但在 apache 重新启动后 或在命令行上
  • 使用 PHP 创建图表并导出为 PDF

    我正在寻找有关使用 PHP 创建图表的建议 我还希望能够将这些图表导出到 PDF 文档 我目前正在使用谷歌图表 但我不喜欢将我的所有信息发送到谷歌的想法 我更喜欢自己的托管解决方案 我见过很多 Flash 解决方案 但我不知道有什么方法可以
  • D3 向对象添加超链接?

    我正在尝试制作 D3 图 它将代表我网站的菜单 我尝试按照此处的其他指南添加超链接 但它们都不起作用 每个对象都会有一个不同的 URL 指向 主页 关于 联系方式等 如果添加超链接 我可以拖动对象吗 这意味着如果我按住单击 如果我单击该对象
  • 如何使用 GreaseMonkey 让浏览器恢复“/”键?

    Lots of web pages seem to use the key for searching I d like to disable that because 100 of the time I want to use to se
  • jQuery 中什么函数相当于 .SelectMany()?

    让我解释一下 我们知道 jQuery 中的映射函数充当 Select 如 LINQ 中 tr map function return this children first returns 20 tds 现在的问题是我们如何在 jQuery
  • 在 Android Chrome 中隐藏 HTML5 音频/视频通知

    我的网络应用程序上有一个 HTML5 音频元素 在某些时候 我使用以下代码以编程方式停止播放 audioElement pause audioElement currentTime 0 播放音频时 我的 Android 设备 使用 Goog
  • 使用jquery调用AS3外部接口

    我正在使用ExternalInterface 调用嵌入在html 页面中的Flash 应用程序 以下代码工作正常 我正在使用按钮进行测试 document ready function button click function var a
  • 选择单选按钮时隐藏/显示 3 个文本框

    我有 2 个单选按钮 选择一个文本框时 我想显示 3 个文本框 并在选择其他文本框时隐藏它 这是代码 这是我的 2 个单选按钮
  • 在javascript中创建图像的缩略图方块(不丢失纵横比)

    我正在制作一个客户端拖放文件上传脚本作为书签 在上传之前 我使用 File API 将图像读取为 base64 格式并将其显示为缩略图 This is how my thumbnails look like I want them to l
  • 将两个数字相加将它们连接起来而不是计算总和

    我将两个数字相加 但没有得到正确的值 例如 做1 2返回 12 而不是 3 我在这段代码中做错了什么 function myFunction var y document getElementById txt1 value var z do
  • $ 在 JQuery 中意味着什么

    在下面的 var obj one 1 two 2 three 3 four 4 five 5 each obj function i val console log val 这里是什么意思 是对象吗 是一个别名jQuery对象 函数 它充当

随机推荐

  • 在 SwiftUI macOS 的帮助菜单下添加应用程序帮助

    如果您打开任何应用程序 它的顶部都有菜单栏项目 最后一个是帮助 当我现在运行适用于 macOS 的 SwiftUI 应用程序并按菜单上的帮助 然后按 应用程序名称 帮助 时 它只是说 帮助不适用于 应用程序名称 我如何添加对此的支持 在找到
  • Admob 如何确定文本上下文来显示有针对性的广告?

    1 Admob SDK是否能够检索应用程序中显示的所有文本字符串并根据这些文本字符串显示有针对性的广告 2 我是否必须手动指定字符串AdRequest setKeywords keywords EDIT setKeywords被忽略 Sou
  • spring mvc 为所有控制器提供一个初始化绑定器

    我有 5 个控制器 我想注册一个InitBinder对他们所有人 我知道我可以将此代码添加到每个代码中 InitBinder public void initBinder WebDataBinder binder binder regist
  • Jquery:获取页面的所有html源但排除一些#ids

    我正在尝试使用 html 或 contents 但我有奇怪的行为 我基本上需要获取页面的整个 dom 排除一些元素 例如 first second 并将其作为字符串传递 不再是 dom 是否可以 您可以克隆它 删除要从克隆中排除的元素 然后
  • Jetpack compose 的公开下拉菜单

    我想知道是否有针对 jetpack compose 的暴露下拉菜单的解决方案 我在 jetpack compose 中找不到该组件的正确解决方案 有什么帮助吗 The M2 从版本开始1 1 0 alpha06 https develope
  • 我可以在 Django 中使用 HTTP 基本身份验证吗?

    我们有一个在 Apache 上运行的网站 访问该网站有许多通过 HTTP 基本身份验证保护的静态页面 我使用 Django 内置的用户管理支持 用 Django 编写了网站的新部分 我遇到的问题是用户必须通过 HTTP Basic 身份验证
  • 如何使用 cURL 和 PHP 来欺骗引荐来源网址?

    我正在尝试使用 PHP 学习 cURL 来欺骗网站的引荐来源网址 我希望通过以下脚本来完成此任务 但它似乎不起作用 有什么想法 建议我哪里出错了 或者你知道有什么教程可以帮助我解决这个问题吗 Thanks Jessica
  • junit 测试用例生成器

    有没有一个好的工具可以根据一些原始模板自动生成 jUnit 测试用例 这样一来 没有太多 Java 或 jUnit 背景的工程师就可以编写测试用例 作为背景信息 这是用于黑盒测试 如果除了使用 jUnit 之外还有其他替代方法来运行回归测试
  • 在 Jenkins 管道中执行 gcloud 命令

    我尝试在 Jenkins 声明性管道中运行 gcloud 命令 如下例所示 pipeline agent any stages stage Run gcloud version steps sh gcloud version 我下载了 GC
  • Eclipse“增强类反编译器”插件调试时不反编译

    问题描述 查看类 即 Ctrl Shift T 时反编译工作正常 但从调试角度单步执行代码时则不然 而是打开 类文件查看器 使用的版本 Eclipse Oxygen 和增强型类反编译器 3 0 0 这也适用于氧气和更高版本 单击 窗口 gt
  • 在 ExtJS 网格中编辑整行后触发“afteredit”?

    我有一个 ExtJS 编辑器网格 里面有一些列 我想修改记录上的数据并将数据自动保存到数据库 但我只需要在完成编辑当前行的所有单元格后保存数据 我使用了 afteredit 事件 但它在一个单元格更改后立即触发了该事件 在完成所有单元格的修
  • 如何在 IndexPath 处使用 reloadRows 更新行

    我正在尝试使用按钮删除单元格 这是一个单元格的实现 UITableViewCell tableView UITableView tableView cellForRowAtIndexPath NSIndexPath indexPath st
  • Mac OS 10.14 Mojave + qt5.5 + gem capybara-webkit

    我的配置是 MAC Mojave v10 14 我尝试安装需要 qt5 5 的 gem Capybara webkit v 1 15 0 但 qt5 5 已从自制程序中删除 并且与 Xcode v10 不兼容 我试试这个 卸载 Xcode
  • 在 Android 中的 doinbackground() 中执行 UI 任务

    有没有办法在 AsyncTask 的 doinbackground 中执行 UI 任务 我很清楚最好在 onPostExecute 方法中执行此操作 但就我而言 由于我需要使用可重复使用的警报 因此能够访问我的 doinbackground
  • 查找 jQuery 中所有未选中的复选框

    我有一个复选框列表
  • Django,在模型中按函数过滤 Q 对象

    在我的 Profile 模型中 我有以下功能 它用于返回用户的全名 如果某些数据丢失 则返回用户的全名 def full name self first name self user first name strip if first na
  • 像java一样的Visual Studio参数化单元测试

    在 Java 测试环境中 我可以使用参数化单元测试 如以下代码所示 RunWith value Parameterized class public class JunitTest6 private int number public Ju
  • 在后台重新加载 UITableView 的数据

    在我的应用程序中 我有一个 UITableViewController 它的 tableView 分为 3 个部分 我从我的服务器下载每个部分的数据 为此 我有 3 个函数 例如 f1 f2 和 f3 每个更新一个相应的 NSArray 用
  • VS 2022:Roslyn 代码分析的高 RAM 和 CPU 问题

    我们在 Visual Studio 2022 v 17 2 2 64 位 中拥有一个庞大的解决方案 ASP NET MVC C Roslyn 代码分析始终使用高 CPU 和 RAM 有办法防止这个问题吗 配置还是其他 在 Visual St
  • 单击提交按钮时重新加载页面后如何滚动到特定 div?

    我正在尝试做一些奇特的事情 我已经成功编写了代码 以便在填写小表单并单击提交按钮时显示数据库中的结果 结果显示在表单的正下方 但我觉得如果页面能自动向下滚动到包含已填写表单结果的 div 那就太好了 我想我必须使用 jquery 或 aja