Prevent a button from scrolling the page back to the top

Raekh Posted messages 60 Status Member -
Raekh Posted messages 60 Status Member - 11 Mar 2015 at 11:40

Hello,
I am currently creating a PhpMyAdmin database coupled with an HTML/CSS interface that allows me to keep track of the anime I watch, the last episode viewed, etc.

On my main page, I have a table that contains all these anime.
And for each anime, I have, among other things, a dedicated cell for the last episode watched, directly modifiable via two buttons + and - next to the cell.

However, as soon as I click on these buttons, the page scrolls back to the top.
That is to say, if I want to modify an anime with 9 episodes, and it’s located at the bottom of the page, it’s frustrating to have to scroll down 9 times to click the button.

Is there a way to:
- Remove the default action of the button that scrolls back to the top of the page?
or
- Assign it a function that allows it to automatically scroll back down?

Thank you in advance.
Hex4g0n.

2 answers

Answer 1 / 2
jordane45 Posted messages 30427 Registration date Status Moderator Last intervention 4 831

Hello,

I am currently creating a PhpMyAdmin database

PhpMyAdmin is not a database.. it is a software (made in PHP) that allows you to "manipulate" your database....

Your database is actually: MYSQL.

coupled with an HTML/CSS interface

HTML and CSS are only used to "present" the data on the screen.
To "manipulate" your database... you need to use a server-side language... like PHP, for example.

as soon as I click on these buttons, the page goes back to the top.

Your buttons are probably of the SUBMIT type...
to avoid this, you will likely need to modify your code a bit to handle it in AJAX, for example (which will prevent the page from refreshing... and therefore getting you back to the top...)

To do AJAX, I recommend using the JavaScript library: JQUERY.
Examples of code and usage are available on the internet.

If you cannot get it to work, you will need to post your code on the forum (making sure to use the code tags => Explanations available here:
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
)

Best regards,
Jordane
0
1. Raekh Posted messages 60 Status Member 4
  
  My buttons are not in submit mode, here's an example:
  <button style='border:medium none;width:125px;box-shadow:0px 2px 5px black;background-color:#202020;color:white;display:".hidden($row[5])."' name='low' value='".$row[0]."'>-</button>
  
  0
2. jordane45 Posted messages 30427 Registration date Status Moderator Last intervention 4 831
  
  there.com. like this..... your code does nothing at all....
  So you probably have some JavaScript somewhere, right??
  Surely some code that could trigger a SUBMIT for example.....
  
  So:
  1 - Please use syntax highlighting (code tags) when posting code on the forum.
  Explanations available here:
  https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
  
  2 - Show us the complete code of your page + any JS scripts if there are any
  
  Best regards,
  Jordane
  
  0

Raekh Posted messages 60 Status Member 4

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <title>Anime Database</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> </head> <body> <script type="text/javascript"> $(window).scroll(function($element){ posScroll = $($element).position(); scrollTo(posScroll); }); $('button').click(scroll(this)); </script> <div id="bandeau"> <div id="titre_principal"> <h1>Anime Database</h1> </div> <div id="nav_principal"> <nav> <ul> <li><span class="selected">Animes en cours</span></li> <li><a href="add.php">Ajouter un anime</a></li> <li><a href="rm.php">Supprimer un anime</a></li> <li><form method="POST" action="recherche.php"><input type="text" name="recherche" placeholder="Rechercher un anime"/></form></li> </ul> </nav> </div> </div> <div id="corps"> <div id="section"> <h1>Animes dans la base de données :</h1> <?php //Fonctions pour la couleur function ifTrue($nombre) { $var = "<span style='color:red'>??????????????</span>"; ($nombre==1) ? $var="<span style='color:green'>??????????????</span>" : ""; return $var; } function couleur($chaine,$id) { ($id==1) ? $chaine="<span style='color:green'>".$chaine."</span>" : $chaine="<span style='color:white;font-weight:bold;' >".$chaine."</span>"; return $chaine; } function couleur2($chaine,$id,$fini) { if ($id==0) { $chaine="<span style='color:red;font-weight:bold'>".$chaine."</span>"; } else if($fini==0) { $chaine="<span style='color:white;' >".$chaine."</span>"; } else { $chaine="<span style='color:green;'>".$chaine."</span>"; } return $chaine; } function hidden($var) { if ($var==0) { return 'inline'; } else { return 'none'; } } function jour($var,$fini) { if ($var!=NULL && $fini==0) { $var = "(".$var.")"; return $var; } else { return ""; } } require 'bdd.php'; //Compteurs pour episode if (isset($_POST['low'])) { $low = $_POST['low']; $req=$bdd->prepare("UPDATE anime SET dernier_episode=dernier_episode-1 WHERE id=$low AND fini='0'"); $req->execute(); header('Location:index.php'); } if (isset($_POST['high'])) { $high = $_POST['high']; $req=$bdd->prepare("UPDATE anime SET dernier_episode=dernier_episode+1 WHERE id=$high AND fini='0'"); $req->execute(); header('Location:index.php'); } //Compteurs pour finition if (isset($_POST['fini'])) { $fini = $_POST['fini']; $req=$bdd->prepare('UPDATE anime SET fini=1 WHERE id="'.$fini.'"'); $req->execute(); header('Location:index.php'); } if (isset($_POST['pasfini'])) { $pasfini = $_POST['pasfini']; $req=$bdd->prepare('UPDATE anime SET fini=0 WHERE id="'.$pasfini.'"'); $req->execute(); header('Location:index.php'); } $req=$bdd->prepare("SELECT * FROM anime GROUP BY nom ORDER BY fini,nom"); $req->execute(); $donnee = $req->fetchAll(); echo '<table>'; echo '<tr><th>Nom</th><th>Année</th><th colspan=2>Dernier Episode vu</th><th colspan=2>Fini</th></tr>'; foreach($donnee as $row) { // echo "<tr><td>".$row[1]."</td><td>".$row[2]."</td><td>".$row[3]."</td><td>".ifTrue($row[5])."</td> // <td><a href='index.php?decrementation=".$row[0]."'>-</a></td></tr>"; echo "<tr> <td>".couleur($row[1],$row[5])."</td> <td>".$row[2]."</td> <td>".couleur2($row[3],$row[3],$row[5])." ".jour($row[4],$row[5])."</td> <td><form method='POST' action=''><center><button onclick()='window.scrollTo(this.position())' style='border:medium none;width:125px;box-shadow:0px 2px 5px black;background-color:#808080;display:".hidden($row[5])."'name='high' value='".$row[0]."'>+</button></center></form> <form method='POST' action=''><center><button style='border:medium none;width:125px;box-shadow:0px 2px 5px black;background-color:#202020;color:white;display:".hidden($row[5])."'name='low' value='".$row[0]."'>-</button></form></td> <td>".ifTrue($row[5])."</td> <td> <form method='POST' action=''><center><button style='border:medium none;width:125px;box-shadow:0px 2px 5px black;background-color:#808080' name='fini' value='".$row[0]."'>Oui</button></center></form> <form method='POST' action=''><center><button style='border:medium none;width:125px;box-shadow:0px 2px 5px black;background-color:#202020;color:white' name='pasfini' value='".$row[0]."'>Non</button></center></form> </td> </tr>"; } echo '</table>'; // if (!empty($high) OR !empty($low)) // { // header('Location:index.php'); // } ?> </div> </div> </body> </html>

Here is the code of the main page index.php
I tried to include jQuery, but I haven't managed to do it. There may be errors in my code, I started PHP three days ago.

jordane45 Posted messages 30427 Registration date Status Moderator Last intervention 4 831

```html You tried to do like the button above by adding:

onclick()='window.scrollTo(this.position())'

Considering that .... you are indeed doing a SUBMIT ... your BUTTONs being in FORM

 <td><form method='POST' action=''><center><button onclick()='window.scrollTo(this.position())' style='border:medium none;width:125px;box-shadow:0px 2px 5px black;background-color:#808080;display:".hidden($row[5])."'name='high' value='".$row[0]."'>+</button></center></form> <form method='POST' action=''><center><button style='border:medium none;width:125px;box-shadow:0px 2px 5px black;background-color:#202020;color:white;display:".hidden($row[5])."'name='low' value='".$row[0]."'>-</button></form></td>

and that therefore it calls:

 if (isset($_POST['low'])) { $low = $_POST['low']; $req=$bdd->prepare("UPDATE anime SET dernier_episode=dernier_episode-1 WHERE id=$low AND fini='0'"); $req->execute(); header('Location:index.php'); } if (isset($_POST['high'])) { $high = $_POST['high']; $req=$bdd->prepare("UPDATE anime SET dernier_episode=dernier_episode+1 WHERE id=$high AND fini='0'"); $req->execute(); header('Location:index.php'); }

....

But well...Personally.. rather than using a SUBMIT ..(as I told you before).. I would use AJAX.

So: You create a PHP page containing the functions (low/high ...)

 <?php require 'bdd.php'; $action = isset($_POST['action'])?$_POST['action']:NULL; $id = isset($_POST['id'])?$_POST['id']:NULL; if($id){ switch($action){ case "low": $req=$bdd->prepare("UPDATE anime SET dernier_episode=dernier_episode-1 WHERE id=$id AND fini='0'"); $result = $req->execute(); break; case "hight": $req=$bdd->prepare("UPDATE anime SET dernier_episode=dernier_episode+1 WHERE id=$high AND fini='0'"); $result = $req->execute(); break; default: $result = "Erreur : Action inconnue"; break; } }else{ $result = " No ID !"; } echo $result; ?>

You assign to your buttons an ONCLICK that will call a JS script

 <button onclick="PlusMoins(\"'.$row[0].'\","low")" style='border:medium none;width:125px;box-shadow:0px 2px 5px black;background-color:#202020;color:white;display:".hidden($row[5])."'name='low' value='".$row[0]."'>-</button>

and the JS code will be something like:

 var urlAjx = "your_php_file_containing_the_functions"; function PlusMoins(id,type){ $.ajax({ type: "POST", url:urlAjx, data: {action:type ,id:id}, async: false, dataType: "html", success: function(reponse){ //here you can put code in case of success... }, error:function(errMsg){ alert('error ! \n'+errMsg); } }); }

```

Raekh Posted messages 60 Status Member 4 > jordane45 Posted messages 30427 Registration date Status Moderator Last intervention

Is there really no way to perform these actions other than through this means?
And the other option considered, which is to remove the default action of the button, is that not possible?
0

jordane45 Posted messages 30427 Registration date Status Moderator Last intervention 4 831

The submit triggers a page refresh... so... no.
0
1. jordane45 Posted messages 30427 Registration date Status Moderator Last intervention 4 831 > jordane45 Posted messages 30427 Registration date Status Moderator Last intervention
  
  And then.... what bothers you about the code I gave you?
  It's more "professional" to submit every time you click a button....
  Of course.. I've only coded the insert/update......
  to update the number in the corresponding box, you will need to code it in the "success" of the ajax.... but that.. I'll let you look for it a bit.
  
  -1
2. Raekh Posted messages 60 Status Member 4 > jordane45 Posted messages 30427 Registration date Status Moderator Last intervention
  
  It wasn't the "pro" I was looking for but a simple and effective solution. Moreover, I don't know anything about JavaScript; I've been teaching myself these concepts (SQL, HTML, CSS, PHP) for only 5 days, but JavaScript seems very complicated to me.
  However, I will explore this path, and I will post my future progress in this topic.
  
  0

Prevent a button from scrolling the page back to the top

2 answers

Color of visited links in firefox 153

Texture issues in enshrouded

Broken logitech g915 keyboard key (original part)

E.tre456.worm.windows

Printer uninstalled

Windows security

Pc audio connection: jack ports, hi-fi chain

Recording and reading issue for jpg files

Antivirus problem

Unable to enter my phone number on twitter