$("form").submit(function() { Not working in Firefox

Question

    $("form").submit(function() {
        if ($("#content") != null) {
            $("#content").replaceWith('<div id="page-loader" class="fade in"><span class="spinner"></span><span class="spinner-text center">We are running as fast as our little ninja feet can go...</span></div>');
        }
        return true;
    });

The above works fine on Chrome but does not work on Firefox. Not sure why but in Firefox the form is not actually submitted. The div replace works but no love on the submit, the page just stays idle.

The intent here is to capture a submit of any form and throw a spinner (CSS not an image) onto the page until the post / put is returned and the spinner is wiped out by the actual content div on the page reload (non ajax).

Before:

After:

Code Removed (the post now appears):

<form accept-charset="UTF-8" action="/users/sign_in" class="new_user" id="new_user" method="post" role="form">

            <!-- begin row -->
            <div class="row">
                <!-- begin col-12 -->
                <div class="col-lg-6">
                    <div class="form-group"><label class="sr-only control-label" for="user_email">Email</label><input autofocus="autofocus" class="form-control" id="user_email" name="user[email]" placeholder="E-mail" type="email" value="" /></div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group"><label class="sr-only control-label" for="user_password">Password</label><input class="form-control" id="user_password" name="user[password]" placeholder="Password" type="password" /></div>
                </div>
            </div>
            <!-- end row -->
            <!-- begin row -->
            <div class="row">
                <!-- begin col-12 -->
                <div class="col-md-12 center">
                    </br>
                </div>
            </div>
            <!-- end row -->
            <!-- begin row -->
            <div class="row">
                <!-- begin col-12 -->
                <div class="col-md-12 center">
                    <input class="btn" name="commit" type="submit" value="Sign in" />
                    <div class="m-t-20">

<a href="/users/password/new">Forgot your password?</a><br/>

<a href="/users/confirmation/new">Didn&#39;t receive confirmation instructions?</a><br/>

<a href="/users/unlock/new">Didn&#39;t receive unlock instructions?</a><br/>

                    </div>
                </div>
            </div>
            <!-- end row -->

<script>
$(document).ready(function () {
    App.init();

    $("form").submit(function(){
        if ($("#content") != null) {
            $("#content").replaceWith('<div id="page-loader" class="fade in"><span class="spinner"></span><span class="spinner-text center">We are running as fast as our little ninja feet can go...</span></div>');
        }
        return true;
        alert("Submitted");
    });
});

$(function () {
    var hash = window.location.hash;
    hash && $('ul.nav a[href="' + hash + '"]').tab('show');
});

UPDATE:

Ok so i am an idiot but for some reason this didn't cross my mind. What is happening is that the #content div includes the form i am replacing. So the mystery to me is why that worked in Chrome / IE and not in Firefox?

If i use the following it works but i get some dangling form elements:

$("form").submit(function(){
        if ($("#content") != null) {
            $("#content").append('<div id="page-loader" class="fade in"><span class="spinner"></span><span class="spinner-text center">We are running as fast as our little ninja feet can go...</span></div>');
        }
        return true;
    });

Flann

did you check network tab? – Berlioz

try to restart server and reload whole page again it will work.... – Berlioz

I tried restarting the server I have added the network trace, it is obvious the form is not submitted. When i remove this code it works just fine. – Flann

any console.error in firefox – Berlioz

can you provide firefox browser log and chrome log – Constantia

No errors in the console. Will grab the logs. – Flann

write dummy alert check the firefox – Constantia

put an alert on submit event after spinner code. NOTE: The dom, javascript files resets on page reload (non ajax request). – Slug

Did any of these answers work? It would be great to see this questions resolved. – Suspensoid

Answer 1

I advise you to set an input type submit and on click, then you can execute your code.

$("#submit_form_id").on("click",
function(e){
e.preventDefault();

//your specific code
$("#formId").submit();
});

And it will work nice !

Cantharides

No love, tried this approach earlier... i even tried it by the #new_user instead of the generic "form". – Flann

Answer 2

try this,

$(document).ready(function(){
    $("form").submit(function(){
 if ($("#content") != null) {
            $("#content").replaceWith('<div id="page-loader" class="fade in"><span class="spinner"></span><span class="spinner-text center">We are running as fast as our little ninja feet can go...</span></div>');
        }
        return true;
        alert("Submitted");
    });
});

Constantia

Just tried this an no love. I am adding the form and the script together to see if that sheds some light. – Flann

` if ($("#content") != null) ` instead of if ($('#content').val() != '') try this it should help you i am sure – Constantia

So the spinner is showing, if i block the spinner from showing the form submits using js. I believe it is something with the dom and how firefox is handling this. If i just leave the js without adding the spinner all is good... wondering if i should use .append to the body as opposed to the .replace – Flann