1

I have a multi-step form which steps through using POST requests to pass state to each controller action.

New > Preview > Checkout > Create

Preview and Checkout are POST requests do not impact the database so form resubmission is perfectly OK.

I am looking to:
1. Prevent the default submit in order to run some javascript validation
2. After validation submit the form and allow browser back and forth

While listening to the submit event I have tried to e.preventDefault() and then e.submit(), however, this does not allow for form resubmission when using the browser buttons.

However, if an error is thrown, the form submits and allows use of the browser back and forth buttons.

How can I get this functionality without throwing an error?

$('#new_post').on("submit", function(e) {
    throw new Error();
    // this allows for form submission and back and forth button functionality
}
1dolinski
  • 479
  • 3
  • 9
  • 29

1 Answers1

1

Just use the preventDefault() method

HTML

<form name="form" onsubmit="validate();">

Script

function validate()
{
  if (!validation) { // If the form is not correct
      event.preventDefault();
  } else {
      // Submit the form
  }
}
samueleroversi
  • 48
  • 9
  • Thanks for the response! I have tried that, however, on this form submission it does not allow for back and forth browser functionality. – 1dolinski Sep 11 '16 at 14:49
  • @ebbflowgo Try replacing "event.preventDefault();" to a "return true", and writing a "return false" inside the else statement. – samueleroversi Sep 11 '16 at 14:51
  • I don't really get what do you mean with "Using the browser buttons", you are submitting a form, right? The clue is doing so that when the user submits the form, if it is not valid, the form is not actually submitted. However, try replacing the "validate();" inside the form with "return validate();" – samueleroversi Sep 11 '16 at 14:59
  • After submitting the form and bringing me to the next page I would like the user to be able to use the browser buttons to go back and forth, resubmitting the post each time – 1dolinski Sep 11 '16 at 15:04
  • Weird, usually when i submit a post request i am able to click the browser "back" button and submit the form again. I am really sorry, probably because i am not a native english speaker, i'm not getting what do you mean. – samueleroversi Sep 11 '16 at 15:08
  • It looks like it is along the lines of this http://stackoverflow.com/questions/3923904/preventing-form-resubmission – 1dolinski Sep 11 '16 at 15:45
  • OK, now i understand. Why don't you use one of the two solutions provided in the question you linked? – samueleroversi Sep 11 '16 at 15:47
  • The POST does not persist the data anywhere and the query string is very long so a GET request doesn't make sense. – 1dolinski Sep 11 '16 at 15:50
  • It is not that the POST doesn't persists the data, its just tha you don't see them, so, to achieve what you want you can use AJAX or a redirect – samueleroversi Sep 11 '16 at 15:52
  • Here it is: http://pastebin.com/8fQ0NQkC Of course, you have to adapt it to fit your needs. – samueleroversi Sep 11 '16 at 18:01