$("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;
    });

try to restart server and reload whole page again it will work.... — uzaif, Apr 11 '16 at 12:34
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. — Carson City, Apr 11 '16 at 12:47
put an alert on submit event after spinner code. NOTE: The dom, javascript files resets on page reload (non ajax request). — user2406618, Apr 11 '16 at 13:04
Did any of these answers work? It would be great to see this questions resolved. — Eckstein, Jul 21 '16 at 20:12

score 0 · Answer 1 · answered Apr 11 '16 at 12:57

0

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 !

answered Apr 11 '16 at 12:57

Valentin Moulinier

9
5

No love, tried this approach earlier... i even tried it by the #new_user instead of the generic "form". – Carson City Apr 11 '16 at 13:24

score 0 · Answer 2 · answered Apr 11 '16 at 13:17

0

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");
    });
});

answered Apr 11 '16 at 13:17

JohnPaul

714
5
14

Just tried this an no love. I am adding the form and the script together to see if that sheds some light. – Carson City Apr 11 '16 at 13:20
` if ($("#content") != null) ` instead of `if ($('#content').val() != '')` try this it should help you i am sure – JohnPaul Apr 11 '16 at 13:23
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 – Carson City Apr 11 '16 at 13:29

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

2 Answers2

Linked