how to prevent page refresh to top page after submit [closed] - php

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
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.

Answer 1

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 :)

Answer 2

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