Question

我制作了一个脚本来打开文件夹上包含表单的所有图像。每次我发布提交时，页面都会刷新到页面顶部。我点击提交后如何防止刷新？

    <?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>';
     ?>

提交脚本为

<?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'>";

            }

            ?>

每次我按下“提交”按钮时，页面都会刷新并滚动到页面顶部。帮我确保它不会刷新到页面顶部。

Answer 1

看着你的问题，看来你有很多表格，

注意：：我正在使用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.
        }
     });

});

Answer 2

由于问题过于广泛和笼统，很难用代码写答案，但是这里有一些链接可以帮助您入门。如果我理解正确，则希望提交表单而不刷新页面。为此，请使用ajax。序列化您的表单并使用ajax发布，这样它就不会重新加载。像这样：

//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
    }
});

链接到Jquery Ajax

此外，如果您希望刷新页面但滚动到页面的特定部分，请尝试以下操作：

//This is your HTML

<div id="bottom"></div>

//After posting in your php, use the code below

header('Location: contact.php#bottom');

如上所述HERE

希望这会有所帮助。编码愉快：）

提交后如何防止页面刷新到首页

2 个答案: