CODEWITHSUNDEEP
javajavascriptjqueryhtmlforms
Veit
Veit

Reputation: 49

Triggering Page Loading Spinner on Form Submit

I'm trying to get a javascript spinner to work on submitting a from. I'm using spin.js, and code that I found here as a starting point.

We have 2 options to trigger that java:

  1. when the form is submitted #submit-form
  2. when the button is clicked for the last time: button's unique class is .next-submit.

I'm not sure where I'm going wrong.

And the other thing that I don't understand is whether I need a div #spinner in the html of the page, or if that is generated dynamically.

<script src="http://www.purevisionmethod.com/js/spin.min.js"></script>

<script>
$(function() {
// Remember to use 'var'
var spinner_div = $('#spinner').get(0),
    spinner,
    opts = {
lines: 16, // The number of lines to draw
length: 23, // The length of each line
width: 5, // The line thickness
radius: 30, // The radius of the inner circle
corners: 100, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb or array of colors
speed: 1, // Rounds per second
trail: 100, // Afterglow percentage
shadow: true, // Whether to render a shadow
hwaccel: true, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent
left: '50%' // Left position relative to parent
    },
    showSpinner = function() {
        // Add 'lightbox-is-open' and 'lightbox-is-fixed' classes to HTML
        $('html').addClass('lightbox-is-open lightbox-is-fixed');

        // Remove 'hidden' class from '.glasspane'
        $('.glasspane').removeClass('hidden');

        // Show spinner
        if(spinner == null) {
            spinner = new Spinner(opts).spin(spinner_div);
        } else {
            spinner.spin(spinner_div);
        }

        // Submit form after 500ms
        var timer = window.setTimeout(function() {
            $('form').submit();
        }, 500);
    };

// Bind events
$('form').on('submit', function(e) {
    e.preventDefault();
    showSpinner();
});
$('.next-sbumit').on('click', function(e) {
    e.preventDefault();
    showSpinner();
});
$('select').on('change', showSpinner);
});
</script>

Thanks for your help!!

Upvotes: 0

Views: 3146

Answers (1)

Michael Homm&#233;
Michael Homm&#233;

Reputation: 1726

I'm not seeing any errors, but one thing I noticed is a spelling mistake here:

$('.next-sbumit').on('click', function(e) {
    e.preventDefault();
    showSpinner();
});

next-sbumit should likely be next-submit - correct?

Upvotes: 1

Related Questions