CODEWITHSUNDEEP
phpforms
zel
zel

Reputation: 165

msg after clicking submit&refreshing the page

I have a page, when user can edit his profile. He can confirm it by clicking type=submit button, and then page refresh and changes are saved.

I'd like to prompt a message after page refresh with something like "Your changes have been saved".

How I can do that? :)

Upvotes: 1

Views: 2851

Answers (7)

daveblake
daveblake

Reputation: 194

Assuming you have a standard HTML form that sends the data to be saved using POST it is good practice to redirect after the information is submitted. This prevents warnings you get in some browsers prompting a user to re-submit information if they use the back button or refresh the page.

The process is something like this:

  1. User submits form
  2. PHP script checks form for errors and performs any necessary actions.
  3. Store success or error message in session
  4. Redirect to success page (can be the same page)
  5. Load the message from the session and show to user - clear the session.

The code is something like this:

<?php
session_start();

$message = '';
//load a message from the session if there is one
//clear the session so the message doesn't appear again.
if ( isset($_SESSION['FLASH']) {
  $message = $_SESSION['FLASH'];
  unset($_SESSION['FLASH']);
}

if ( isset($_POST['save']) ) {
   $email = $_POST['email'];
   // code to save or whatever...

   $_SESSION['FLASH'] = 'Your email has been saved.';
   header('location: /'); //path to your success script
   exit;
}

?>
<html>
  <head>
    <title>Test Page</title>
  </head>
  <body>

    <?php if ( $message != '' ) { ?>
    <p class="message"><?php echo $message; ?></p>
    <?php } ?>

    <form action="" method="post">
      <label for="email">Email</label>
      <input type="text" name="email" id="email" />

      <input type="submit" name="save" value="Save" />
    </form>
  </body>
</html>

Upvotes: 0

krishna
krishna

Reputation: 4089

You can do it by using AJAX request as mention by Alan Kael Ball or in php do like this

after you find data is successfully updated into database (i assume that you know this porcess) try this to display message

print '<script type="text/javascript">';
print 'window.onload = function(){';
print 'alert("Your changes have been saved")';
print '};';
print '</script>';

Upvotes: 4

Alan Kael Ball
Alan Kael Ball

Reputation: 680

Use AJAX to return the result into a HTML element without refreshing the page at all.

Add a <div id="response"></div> where you want the message to appear. Add a <script></script> element at the end of the page before the </body>. 

<div id="response"><!-- you message will appear here --></div>

<form id="form">
<!-- your form here -->
<input type="submit" class="submit" value="Submit">
</form>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>

 $(document).ready(function() {
      var form = $('#form'); // form (by ID attr)
      var submit = $('.submit');  // submit button (by CLASS attr)
      var alert = $('#response'); // alert div for show alert message (by ID attr) 
      // form submit event
      form.on('submit', function(e) {
        e.preventDefault(); // prevent default form submit

        $.ajax({
          url: 'process_profile.php', // form action url - this is your script where the $_POST is sent. The response will be whatever you return (eg: echo 'Success!'; )
          type: 'POST', // form submit method get/post
          dataType: 'html', // request type html/json/xml
          data: form.serialize(), // serialize form data 
          beforeSend: function() {
            alert.fadeOut();
            submit.html('Processing...'); // change submit button text
          },
          success: function(data) {

            //form.trigger('reset'); // reset form?
            submit.html('Submit'); // reset submit button text
          },
          error: function(e) {
            console.log(e)
          }
        });
      });
    });

</script>

In your php page (here i just called it process_profile.php), you will process all f your $_POST variables, and once the script is complete, simply echo() a message. This will appear int he response <div>

Upvotes: 1

Ashish jain
Ashish jain

Reputation: 11

You need to create new page after save profile redirect to new page and on that page write down script 

<script type="text/javascript">
    $(document).ready(function(){
       prompt('Your changes have been saved');
    });
</script>

Thanks

Upvotes: -1

ncrocfer
ncrocfer

Reputation: 2570

Add a parameter when you redirect the user in case of success, like index.php?success=1

And in your code add this :

if(isset($_GET['success'])) {
    "Your changes have been saved";
}

Or you can use a dedicated library : https://github.com/plasticbrain/PHP-Flash-Messages

Upvotes: 0

Laurens
Laurens

Reputation: 121

<input type='submit' name='submit' value='Save' onClick='alert("Your changes have been saved");'>

Please let me know how this works out for you!

Upvotes: -2

Sharky
Sharky

Reputation: 6294

in your <form action="yourscript.php" ......

add a parameter

<form action="yourscript.php?msg=1" ........

and then somewhere in your page that refreshes put

<?php echo ($_GET['msg']==1)?"Your changes are saved!":"";?>

of course this is just a demo, you should validate if changes are actually saved and then show that confirmation message.

Upvotes: 0

Related Questions