JSFiddle - React, Tailwind, and code Playground

by stuttufu

JavaScript

$("form.pform").on("submit", function(e) {
    // di base previeni l'invio delle form
    e.preventDefault();
    // dichiaro la form
    var form = $(this);

    // per evitare invii multiupli usiamo la classe disabled.
    // se questa form non ha la classe disabled proseguiamo
    if (!$(form).hasClass('disabled')) {
        
        // aggiungi la classe disabled.
        // da questo momento non triggera piu questo if.
        $(form).addClass('disabled');
        
        // la classe jstraight serve se vogliamo che la form sia una classica form submit che segua il suo "action". cambiamolo cosi:
        if ($(form).hasClass('jstraight')){
            // significa che quest form poi deve ridirezionare il chiamante, insomma deve agire come se non ci fosse e.preventDefault().
            $(form).unbind('submit').submit();
            // preso da : http://stackoverflow.com/questions/5651933/what-is-the-opposite-of-evt-preventdefault
        }else{
            // altrimenti è una chiamata ajax
            
            // crea un loader al posto del bottone
            $(form).find('.button').fadeOut('fast', function() {
                $(form).find('.loader').fadeIn('fast');
            });

            // fai la chiamata ajax
            $.ajax({
                type: "GET",
                url: $(form).attr('action'),
                processData: false,
                contentType: 'application/json',
                data: $(form).serialize(),
                success: function(r) {
                    // se ha successo molto bene
                    //console.log(r);
                },
                error: function(err) {
                    // altrimenti amen
                    //console.log(err);
                }
            })
            .done(function(msg) {
                // chiamata fatta, aggiorno la pagina
                location.reload();
            });
        }
    }
});