在ajax提交的表单提交到预览表单后模拟后退按钮

Question

I have a multi-part form where the flow of the data is:

1. Answer the form, SUBMIT (via ajax post)
   • jQuery Form and CodeIgniter validation echoed if present
2. Preview the answers from the form
   • Choices: Cancel, Edit, Commit to database

The three choices are submit buttons with unique names in the preview form. My Commit to database process is finished, while I have difficulty in doing the Cancel and Edit. My current method for the three are (inside the controller):

function preview_form_redirect() 
{
  if ( isset($_POST['submit-form']) ) {
    $this->send_to_database();
  } else if ( isset($_POST['edit-form']) ) {
    // return to form with all answers intact
  } else { // CANCEL FORM
    redirect('accounts');
  }
} // END preview_form_redirect() 

My plan for the Edit option is to simulate back button because I'm sure the data and DOM will be intact.

I know my methods for the two are not perfect but I am stuck and do not know what other methods to simulate the two. Are there possible and compatible ways to do the two for my setup?

Answer 1

You have to do it with Javascript. You can use this library that uses the html5 push state, or html fragments if your browser does not fully support the HTML5 history API: https://github.com/browserstate/History.js/

When the user clicks on edit button, do something like this: History.pushState({state:1}, "State 1", "?state=1");

and register an event on the back button: History.Adapter.bind(window,'popstate',function(){ //remove the editable elements from your page });

Hope it helps.