how to prevent page refresh to top page after submit

I made a script to open all image on folder include form on it. Every time I post submit, page refreshes to the top of the page. How can I prevent it from refreshing after I hit submit?

    <?php 
      $folder = ".."; //folder tempat gambar disimpan
      $handle = opendir($folder);
      echo '<table cellspacing="5" cellpadding="1" width="100%" >';
      echo '<tr>';
      $i = 1;

      $fileGambar = array('JPG', 'jpg');
          while(false !== ($file = readdir($handle))){
      $fileAndExt = explode('.', $file);
          if(in_array(end($fileAndExt), $fileGambar)){
      echo '<td style="border:1px solid #000000;" align="center" >
      <div class="hvrbox">
      <img src="../'.$file.'" alt="Mountains" class="hvrbox-layer_bottom" 
       width="100%" />
      <div class="hvrbox-layer_top">
      <div class="hvrbox-text">'.$file.'</div>
      </div>
      </div> <br></br> 

      <form method="post" name="f1">                                                             
      <b><u>'.$file.'</u>:</b>
         <input type="hidden" name="namafoto1" value="'.$file.'">
         <input type="submit" name="upload" value="UPLOAD" />&nbsp&nbsp 
      </form>

      <form method="post" name="f2">
       <input type="hidden" name="namafoto" value="'.$file.'">
       <input type="number" min="1" max="10" value="1" name="jumlah" 
        maxlength="3" size="3" >
       <input type="submit" name="submitcetak" value="CETAK">&nbsp&nbsp
       <input type="submit" name="delete" value="HAPUS CETAK" /> 
      </form

      <script type="text/javascript" src="js/jquery-1.11.3.min.js"> 
      </script>
      <script type="text/javascript" src="js/hover-box.js"></script>    
      </select>


      </td>';
      if(($i % 1) == 0){
      echo '</tr><tr>';
      }
      $i++;
      }
      }
      echo '</tr>';
      echo '</table>';
     ?>

and submit script is

<?php
            // Turn off all error reporting
            error_reporting(0);
            $txtx = "../upload.txt"; 
            if (isset($_POST['upload']) && isset($_POST['namafoto1'])) {
            $fh = fopen($txtx, 'a++'); 
            $txtx=$_POST['namafoto1'].PHP_EOL; 
            fwrite($fh,$txtx); // Write information to the file
            fclose($fh); // Close the file
            }
            //  $txt = "../cetak.txt"; 
            //  if (isset($_POST['submitcetak']) && isset($_POST['namafoto'])) {
            //  $fh = fopen($txt, 'a++'); 
            //  $txt=$_POST['namafoto'].PHP_EOL; 
            //  fwrite($fh,$txt); // Write information to the file
            //  fclose($fh); // Close the file

            if (isset($_POST['delete']) && isset($_POST['namafoto'])) {
            rename('../print/'.$_POST['namafoto'], '../'.$_POST['namafoto']);
            delLineFromFile ();
            //echo "<meta http-equiv='refresh' content='1'>";

            }

            ?>

Every time I press submit button, page refreshes and scrolls to the top of the page. Help me make it not refresh to the top of the page.

2 answers

  • answered 2019-08-13 03:31 Bosco

    Looking at you question, it seems you have alot of forms,

    NOTE: am using jQuery

    $("#id_of_the_form").submit(function(e) {
    
        e.preventDefault(); // avoid to execute the actual submit of the form which will reload the page
    
        var form = $(this);//get the form
    
        $.ajax({
            type: "POST",
            url: "The php script posting the form to",
            data: form.serialize(), // serializes the form's elements.
            success: function(data)
            {
                // show response from the php script.
            }
         });
    
    });
    

  • answered 2019-08-13 03:31 Mohamed Ahmed

    It is hard to write answer in code as the question is too broad and general but here are some links to get you started. If I understand correctly, you want to submit the form without page refresh. For that, use ajax. Serialize your form and post it using ajax so it won’t reload. Something like this:

    //Serialize your form here
    var formData = $("#yourFormID").serialize();
    $.ajax({
        type: "POST", //You are posting data so this is a post method
        url: "post_data.php", //Your URL or link to php file which posts data
        data: formData, //The data passed, which is the variable of serialized form
        dataType: "json", //Data type json
        success: function(data) {
            //var parse = jQuery.parseJSON(data);
            //if successful parse the data and display here
            //use console.log(data) to see if you have data
        },
        error: function() {
            alert('error handling here');
            //use console.log(“error occurred”) to see if it failed
        }
    });
    

    Link to Jquery Ajax

    And additionally, if you want the page to refresh but scroll to a specific part of the page, try something like this:

    //This is your HTML
    
    <div id="bottom"></div>
    
    //After posting in your php, use the code below
    
    header('Location: contact.php#bottom');
    

    As mentioned HERE

    Hope this helps. Happy coding :)