I have a form with 2 combobox: statutbox and categorybox, the statutbox is on the top of my page, but categorybox is in the middle.my problem is when i select an item from the categorybox which is in the middle , the page is refreshed and returns to the top. so how to how to keep the same positioning. here is my code:
<form id = "formbox" name="form" method = "POST" action="parproj.php">
<select id="statutbox" name="statut" onChange= "this.form.submit()" style= "width:300px;padding:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow: 0 3px 0;cursor:pointer;">
<?php
$reponse2 = $bdd->query('select name from issue_statuses order by name asc;');
while ($donnees2 = $reponse2->fetch())
{
$selected2 = (isset($_POST['statut']) and $_POST['statut'] == $donnees2["name"])?'selected="selected"':'';
echo '<option value="'.$donnees2['name'].'" '.$selected2.'>'.$donnees2['name'].'</option>';
}
$reponse2->closeCursor(); // Termine le traitement de la requête
?>
</select>
</form>
<select id="categorybox" form="formbox" name="category" onChange= "this.form.submit()" style= "width:300px;padding:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow: 0 3px 0;cursor:pointer;">
<?php
while ($donnees3 = $reponsecat->fetch())
{
$selectedcat = (isset($_POST['category']) and $_POST['category'] == $donnees3["category"])?'selected="selected"':'';
echo '<option value="'.$donnees3['category'].'" '.$selectedcat.'>'.$donnees3['category'].'</option>';
}
$reponsecat->closeCursor(); // Termine le traitement de la requête
?>
</select>
There are two solutions. Check the example below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scroll to an element</title>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<style type="text/css">
#category {margin-top:500px}
#article {margin-top:250px}
</style>
</head>
<body>
<form method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>">
<select name="status" id="status" onchange="this.form.submit();">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select><br />
<select name="category" id="category" onchange="this.form.submit();">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="submit" name="button" value="button" />
</form>
<div id="article">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<?php
if(isset($_POST["status"]) && $_POST["status"] != 0){
// 1st solution
header("Location: http://" . $_SERVER["HTTP_HOST"] . $_SERVER["PHP_SELF"] . "#category");
// or
// 2nd solution
echo '<script type="text/javascript">$("html, body").animate({scrollTop: $("#category").offset().top}, "slow");</script>';
}
?>
</body>
</html>
Don't forget to comment the solution you won't use. this.form.submit() is optional, you may submit the form by a regular submit button.