Question

I have a form where I create a model and I want a dialoge box to appear if the user navigates away from the page, unless they click the save/create button.

I have this javascript code that works anytime the user leaves the page; meaning this dialoge still appears when the user clicks save/create.

#javascripts/workouts.js.coffee
window.confirmExit = () ->
  "Your changes will not be saved.";

#workouts/new.html.haml
= render 'form'
:javascript
  window.onbeforeunload = confirmExit

#workouts_form.html.haml
= simple_form_for(@workout) do |f|
# some input fields
= f.button :submit

Now I know that I only want the confirm exit called if the submit button is not clicked, but I am not sure how to go about doing this.

Answer 1

So I figured it out, at least it works for chrome and safari although right now I am under the impression that it will not work for ie. What I did was create a boolean that is set to false and only set to true when the submit button is selected.

#javascripts/workouts.js.coffee
window.submitButtonClicked = false
window.confirmExit = () ->
  if window.submitButtonClicked
    null
  else
    "Your changes will not be saved."

$(document).ready ->
  $('#target').submit ->
    window.submitButtonClicked = true

#workouts/new.html.haml
:javascript
  window.onbeforeunload = confirmExit

#workouts_form.html.haml
#target
  = simple_form_for(@workout) do |f|
    # some input fields
    = f.button :submit

I hope this helps anyone who was curious. Note that the #target line is actual haml and not a comment.