1

I have a situation here. I have a form which contains hidden value. When user clicks the browser back button then the form should be submitted. I have controlled the back space button but haven't found a solution for browser back button. Here is my code.

Form

 <form id="movevalue" action="/media" method="post">
    <input type="hidden" id="pagedetail" name="pagedetail" value="<?php echo $pagenumber; ?>" />
    <input type="submit" value="" style="display:none" />
 </form>

At the end of page this is my script.

script

    <script>
    $(function(){  
      $(document).bind("keydown keypress", function(e){
      if( e.which == 8 ){ // 8 == backspace
        $('#movevalue').submit();
      }
     });
    });
   window.onbeforeunload = function(evt)    
   {    
    if (typeof evt == 'undefined')     
        $('#movevalue').submit() 
    }

   </script>

window.onbeforeunload this not work for me.

Waqas_aamer
  • 220
  • 1
  • 3
  • 18
  • 1
    `backspace` is not the back-button of the browser. Just to be sure. ;) – eisbehr Aug 18 '16 at 13:24
  • 1
    You need to handle leaving the page really. Just handling one single keypress will not fix your problem as the user could use the back button, their mouse buttons or wheel, plus it's not backspace in all browsers (alt + left in Chrome, for example). – Reinstate Monica Cellio Aug 18 '16 at 13:25
  • @eisbehr yes it is not but with the help of backspace it goes to previous page – Waqas_aamer Aug 18 '16 at 13:26
  • How should i do that @Archer – Waqas_aamer Aug 18 '16 at 13:27
  • `onbeforeunload` should be used in order to make it a user choice, whether or not to leave the page before submitting the form. If that's not good enough for you then handle change & blur events on the form fields and use AJAX to submit the data silently. – Reinstate Monica Cellio Aug 18 '16 at 13:28
  • i have tried AJAX but could not find solution for browser back button @Archer – Waqas_aamer Aug 18 '16 at 13:31
  • Forget the back button. Submit the form whenever it changes, using AJAX. That way, even if they close the browser then the form is posted. – Reinstate Monica Cellio Aug 18 '16 at 13:31
  • whenever what changes – Waqas_aamer Aug 18 '16 at 13:32
  • I think this will help you. http://stackoverflow.com/questions/25806608/how-to-detect-browser-back-button-event-cross-browser – Khurram Aug 18 '16 at 13:32
  • could you provide me a solution @Archer because i have tried this from the last 6 hours – Waqas_aamer Aug 18 '16 at 13:33
  • 3
    I think you need to explain your requirements as this sounds like your idea to fix something, but it's a bad idea. Form submission will redirect the user to the url specified in the `action` attribute. What you're saying here is that you want the user to be redirected to that page when they click the back button. You should not change default browser behaviour. – Reinstate Monica Cellio Aug 18 '16 at 13:34
  • Also, you're getting the value from the server, and then saying you want to submit it to the server. The server already has the value, unless it changes after the page has loaded, in which case you can use AJAX to push the new value to the server. – Reinstate Monica Cellio Aug 18 '16 at 13:36
  • i want this that if user come from media page by clicking any url from listing posts, then it comes to media detail page. now if he wanted to go back using backspace or using back button than the value in the form should be posted with it – Waqas_aamer Aug 18 '16 at 13:37
  • But why do you want that value on the previous page? What are you trying to do? – Reinstate Monica Cellio Aug 18 '16 at 13:42
  • i have loadmore functionality. i wanted to store the value of the load more button. for example if loadmore is pressed three times then if user go back then records related to 3 pages should display. for this purpose – Waqas_aamer Aug 18 '16 at 13:45
  • I'd recommend using `localStorage` to store the info on the client. That's much more straight-forward than trying to pass it back and forth with the server, and it also means that the data is there later, no matter what path the user takes through the site. – Reinstate Monica Cellio Aug 18 '16 at 13:47
  • by localstorage what you mean sir. – Waqas_aamer Aug 18 '16 at 13:49
  • It's very simple to use. You can read about it [here](https://developer.mozilla.org/en/docs/Web/API/Window/localStorage) – Reinstate Monica Cellio Aug 18 '16 at 13:51
  • Alternatively, if you want to do everything in php then simply store `$pagenumber` in an array (so you can have multiple values) and store that as a session variable – Reinstate Monica Cellio Aug 18 '16 at 14:01

2 Answers2

2

Just use this code and this will cover all state of page leave or close...

<script>
window.onbeforeunload = function() {
    $('#movevalue').submit();
   return true;
};
</script>
AnasSafi
  • 5,353
  • 1
  • 35
  • 38
1

try this:

$(function () {
if (window.history && window.history.pushState) {
    window.history.pushState('', null, '');
    $(window).on('popstate', function (id) {
        $('#movevalue').submit();
    });
}

});

user5134449
  • 21
  • 2