How to maintain the page of a site in the same place that it was before updating?

4

I have a page in html and php and put a form at the bottom of the page.

When I click the "submit" button the page refreshes and goes up.

This way the user has to scroll all the time until he reaches down again to see if the data has been registered, if there is an error message ...

 <form id="formulario" name="login" method="POST" 
 action="<?php echo $_SERVER["REQUEST_URI"];?>"> 

In the action I tried "PHP_SELF" too.

The structure is html, body and a div, the form is inside the div.

    
asked by anonymous 28.10.2014 / 16:15

2 answers

2

Can be resolved with anchor just before <form> :

<a name="form-anchor"></a>
<form ETC...

And make action of the form go to this anchor :

action="<?php echo $_SERVER["REQUEST_URI"];?>#form-anchor"

I tested this with PHP:

<html>
<head>
    <style>
    #div-grande {
        background-color:#ddd;
        min-height: 3800px;
    }
    </style>
</head>
<body>
    <div id="div-grande">
        <?php if( isset( $_POST['grafico'] ) ) echo 'POSTED<br />'; ?>
        Dummy 3800px height
    </div>
    <a name="form-anchor"></a>
    <form method="post" action="<?php echo $_SERVER["REQUEST_URI"];?>#form-anchor">
         <input type="submit" name="grafico" value="Enviar">
    </form>
</body>
</html>
    
28.10.2014 / 17:12
1

One way to do this is as follows:

Add a parameter to the form submission URL. For example, the parameter? Form = 1

Add an id to the form, for example #form. Based on these settings in php put this code:

if ($_GET["form"] == "1") { 
    echo '<script> 
        jQuery(document).ready(function(){
            function scrollToAnchor("#formulario"){ 
                jQuery(\'html,body\').animate({scrollTop: jQuery(aid).offset().top - 119}, 700);       
            }           
            scrollToAnchor("#'.$_GET["url"].'"); 
        });
      </script>';  
}

Once the php check that the url has the form parameter it will add a JS that will scroll the page (with animation right) up to the div that is the form.

NOTE: I'm wondering if you use the jQuery library.

    
28.10.2014 / 17:22