Unable to make style changes to the DOM after form submit in Safari

Question

I'm having problems making style alterations to the DOM after I submit a form in Safari. Does anyone have any idea if its even possible? Is this expected browser behavior from Safari?

I have set up a very simple example so you can see the issue in action: http://jamesmichaelking.com/stackoverflow/safari/index.html

The example consists of a html form posting to itself, with a jquery form submit event which looks for the input button and changes the background to red.

The example works fine in Firefox and Chrome

I've included the html, js and css from the example:

HTML

<form action="index.html" method="post">
    <input type="submit" value="Submit me!">
</form>

CSS

body {
    font-family: sans-serif;
    color: #fff;        
    text-align: center;
}

input {
    border: none;
    padding: 20px;
    font-size: 20px;
    background: #036;
    color: #fff;
}

JQUERY

$(function() {

            $('form').on('submit', function() {
                $(this).find('input').css('background', '#c00');
            });

        });

Strangely, I have created a JSFiddle of the same code and it works fine: http://jsfiddle.net/jamesking/q8WcV/

I'm testing using Safari 7 on a mac

Any help much appreciated

Answer 1

Looks like A. Wolff's solution doesn't work for me on Safari 8.0.6

I also tried other things like restoring the default submit event handler (How to unbind a listener that is calling event.preventDefault() (using jQuery)?), but it didn't work.

After a lot of testing, I came up with a solution. It might not be the cleanest one, but it's working.

var form = $("form");
form.on("submit", function (e) {

    // Do your thing

    e.preventDefault();

    setTimeout(function(){
        form.off("submit");
        form.find("input[type=submit], button[type=submit]").eq(0).click();
    }, 500);
});

Answer 2

I have found that the solution is to not use the form submit event but instead the click event of the submit button. If you, as I do, also want to disable the submit button to prevent double submits, you have to submit the form programmatically otherwise the disabling of the submit button will prevent the form from being submitted. You also need to introduce a short delay before submitting. I have found that 500 msecs works, and this is barely noticeably to the user. This is the code I use

jQuery.fn.preventDoubleSubmission = function() {
  $form = $(this);
  var submit_btn = $form.find(":submit");
  wait_msg = "One moment please"
  submit_btn.on("click", function(e) {
    var $subm = $(this);
    var the_form = $subm.closest('form');
    $subm.attr("disabled", true);
    $subm.val(wait_msg+" ...");
    setTimeout(function() {
      the_form.submit();
    }, (100));
  });
  // Keep chainability
  return this;
};

To apply this behavior to a form you need to do

$("#myform").preventDoubleSubmission;