Form Posts Every Time Page Reloads

Question

Can someone help me out as i'm quite new to coding.

I'm using smarty template engine and i have this form that is for users to update they're cover image or add one but my problem is that every time i or a user reloads the page the form posts a new image everytime without even pressing submit button.

Here is the form.

<form method="post" enctype="multipart/form-data" id="cover_upload">
    <input type="file" name="cover_file" id="file" class="cover_input" />           
    <input type="hidden" name="action" value="change_cover" />
    <a class="submit_form_button" style="float:right" onclick="jQuery('#cover_upload').submit();" href="javascript:void(0);">Change</a>
</form>

And here is the php

if (isset($action) && $action=='change_cover' && isset($_SESSION['loggeduser_id'])){
    if (isset($_FILES['cover_file']['name']) && $_FILES['cover_file']['name']){
        if (($_FILES["cover_file"]["type"] == "image/gif") || ($_FILES["cover_file"]["type"] == "image/jpeg") || ($_FILES["cover_file"]["type"] == "image/pjpeg") || ($_FILES["cover_file"]["type"] == "image/png")){
            $filename = $_SESSION['loggeduser_id']."_".date("YmdHis").".jpg";
            if (move_uploaded_file($_FILES["cover_file"]["tmp_name"],"$basepath/thumbs/users/covers/" . $filename)){
                $user = new User();
                $user->update($_SESSION['loggeduser_id'],array("cover" => $filename));
                $_SESSION['loggeduser_details']['cover'] = $filename;
            }
        }
    }
}

Could someone please show or tell me what is going on and how to fix this thanks

Can't help you based on what you've posted, which won't reproduce the problem. You need to try to produce a minimal example which actually reproduces your problem; you'll probably figure out what the problem is in doing so. If you don't, post what you come up with. — user229044, Nov 30 '13 at 13:43
My problem is every time i or a user reloads the page the form posts a new image everytime without even pressing submit button — mike jones, Nov 30 '13 at 13:47
I know, you said that. I'm telling you, we cannot guess what the problem might be based on what little code you've provided. — user229044, Nov 30 '13 at 13:47
It's normal when a form has posted once, you click on reload button, it's reposted. — jacouh, Nov 30 '13 at 13:47

score 1 · Accepted Answer · answered Nov 30 '13 at 13:50

This is because you're not following the POST/REDIRECT/GET pattern. If a POST request is successful, you should ALWAYS redirect.

Example:

$success = $obj->doSomething($_POST['var']);

if($success){
    header('Location: page.php?m=success');
    exit;
} else{
    //Something went wrong...
}

score 0 · Answer 2 · answered Nov 30 '13 at 13:53

0

Well if you are pressing f5 key (or click reload button) after submitting the form it will re submit the form.. In chrome you will get a confirming message..

answered Nov 30 '13 at 13:53

A.M.N.Bandara

1,490
15
32

jacouh · Answer 3 · 2013-11-30T14:48:13.337

I've worked out this, without requiring redirect technique, as the modern AJAX JavaScript permits:

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
$(document).ready(function () {

  $(".submit_form_button").click(function() {
    $.ajax({
      type: "POST",
      url: "",
      data: $("#cover_upload").serialize(),
      success: function () {
        //alert("OK");
      }
    });
    //
    // this is important not to trigger the link action:
    //
    return false;
  });

});
</script>
</head>
<body>

<?php
//
//...
//
if (isset($action) && $action=='change_cover' && isset($_SESSION['loggeduser_id'])){
    if (isset($_FILES['cover_file']['name']) && $_FILES['cover_file']['name']){
        if (($_FILES["cover_file"]["type"] == "image/gif") || ($_FILES["cover_file"]["type"] == "image/jpeg") || ($_FILES["cover_file"]["type"] == "image/pjpeg") || ($_FILES["cover_file"]["type"] == "image/png")){
            $filename = $_SESSION['loggeduser_id']."_".date("YmdHis").".jpg";
            if (move_uploaded_file($_FILES["cover_file"]["tmp_name"],"$basepath/thumbs/users/covers/" . $filename)){
                $user = new User();
                $user->update($_SESSION['loggeduser_id'],array("cover" => $filename));
                $_SESSION['loggeduser_details']['cover'] = $filename;
            }
        }
    }
}
//
//...
//
?>

<form method="post" enctype="multipart/form-data" id="cover_upload">
    <input type="file" name="cover_file" id="file" class="cover_input" />           
    <input type="hidden" name="action" value="change_cover" />
    <a class="submit_form_button" style="float:right" href="">Change</a>
</form>  

<?php
?>
</body>
</html>

I've modified these items:

Suppressed onclick event handling of the .submit_form_button link to use jQuery click event assignment.
Reload-safe: by adding jQuery.ajax() to post the form. So no Form.submit() is used, it will not repost if the user press the [RELOAD] button.

Form Posts Every Time Page Reloads

3 Answers3