How to scroll to a particular div after reloading the page when the submit button is clicked?

Question

Iam trying to do something fancy. I have successfully written code to show results from database when a small form is filled and submit button is clicked.The results are shown right under the form. But I feel it would be nice if the page is automatically scrolled down to the div containing the results for the filled form. I suppose i have to use jquery or ajax for that. Since I have no knowledge in them I searched the internet for copy pasting the code. But none of them works.

When the submit button is clicked,the page will reload to fetch results from database.I have got the code for scrolling down to a div when page reloads from net,but the problem with that is..the scrolling happens even thou submit button is not clicked. So can someone gimme the code for scrolling down to a div only when the submit button is clicked and after when the page is reloaded.

the code is something like this

<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>

here's the complete code in html and 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>

Yes, use that sort of thing in your form `action` - you can use simple javascript to change the action as needed to re-use the same form for many different pseudo-forms on the page. — Fluffeh, Oct 01 '15 at 12:05

score 5 · Accepted Answer · edited May 23 '17 at 12:09

5

You can use an anchor in the URL.

Or, if you want a smooth animation, just insert the JS code in the if(isset($_POST['submit'])) condition. This way, the scroll will happen only when the submit button is clicked and the page reloads.

I also suggest you use the $(function() { /**/ }); jQuery syntax so the scroll happens only when the DOM has been loaded.

<?php

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

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

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

}

?>

Code for scrolling to a specific div found here: Smooth scroll to div id jQuery

edited May 23 '17 at 12:09

Community

1
1

answered Oct 01 '15 at 12:03

Lord Grosse Jeanine

1,111
10
29

hey, thanks for your time. Can you give me the code to do the quick test in php..and for defining that scroll_to_div ? @PiTiNiNjA – lancelot Oct 01 '15 at 12:19
okay, i'll edit my post to cover the details. but can you add the php code you use to save data to your post? i'll start from there. anwser this comment when you do. if it is more complicated than i expected i'll open a chat room with you to discuss the matter ;) – Lord Grosse Jeanine Oct 01 '15 at 15:14
hey..I have added what you have asked.Please have a look. And thanks alot for trying to help me out. :D @PiTiNiNjA – lancelot Oct 01 '15 at 18:01
i changed my answer as well ;) – Lord Grosse Jeanine Oct 01 '15 at 21:27
Works Great! Thanks a ton! :D..Hey I have created all my code using Mysqli, But some are saying that this code is susceptible to sql_injection..So do I need to change all the code again? I there any easy way to change the code to mysqli procedural? @ PiTiNiNjA – lancelot Oct 03 '15 at 05:00
I prefer to use mysqli with objects. You use procedural way, but it's fine too I guess. I usually protect my queries like this: `$mysqli->query("SELECT * FROM table WHERE field = '".$mysqli->real_escape_string($value)."';");` But you should consider reading documentation about this, cause of course it's not that simple ;) – Lord Grosse Jeanine Oct 03 '15 at 19:33
hay i am having the same problem with after reloading scrolling, but i have used ajax in jquery so i am not getting how to do this thing, please help me out @PiTiNiNjA – Nagaraj Pujar Apr 22 '17 at 05:06

score 1 · Answer 2 · answered Oct 01 '15 at 12:08

1

$("#btn").click(function() {
   scrollDiv = $("#what");
   $(window).scrollTop(scrollDiv.offset().top).scrollLeft(scrollDiv.offset().left);
});

answered Oct 01 '15 at 12:08

$("#submit").click(function() { scrollDiv = $("#what"); $(window).scrollTop(scrollDiv.offset().top).scrollLeft(scrollDiv.offset().left); }); this is exactly what I have tried – lancelot Oct 01 '15 at 12:20
But it doesnot scroll down it at all! – lancelot Oct 01 '15 at 12:36

score 0 · Answer 3 · answered Oct 01 '15 at 12:26

0

I hope this code works:

         <script>
           $(':submit').click(function(){
             $.ajax({
               type: "POST",
               dataType:'text',
               data:someData,
               url:" the address of your function"
               success: function() {
                // some code to show your result inside div
               $('html, body').animate({
                  scrollTop: ($('#what').offset().top )
                  }, 200);                   
                }//success
              });//ajax
            });//click
         </script>

answered Oct 01 '15 at 12:26

Mahdi Younesi

6,889
2
20
51

dude.. I have no knowledge in ajax or jquery..can u please tell me what do I need to fill up in place of `someData` and that `// some code to show your result inside div` – lancelot Oct 01 '15 at 12:35
I really recommend you to learn Ajax and trying to code with Ajax, someData is a variable which you're sending to address in url parameter to be processed, Then your function should return a result if it returns result you type some code in order to show your result inside div, and then just use animation function to move there. – Mahdi Younesi Oct 01 '15 at 12:45
it works fine for without reloading the page, but i want it to happen after reloading the page @MahdiYounesi – Nagaraj Pujar Apr 22 '17 at 04:48

How to scroll to a particular div after reloading the page when the submit button is clicked?

3 Answers3

Linked