SOLUTION: Disable Submit button on form submit, add a GIF, and "disable" form

[fullmotiongroup (Mayur Jobanputra)]

I spent a few hours tonight with ChatGPT and figured out how to…

1. Change Opacity on Form Submit: The form’s opacity is changed upon submission to visually indicate that it’s “disabled,” although it technically remains active.
2. Enter Key as Form Submit: The script recognizes the Enter key press in a single textarea as a trigger to submit the form.
3. Loading GIF Display: A “loading” GIF from my media folder is displayed when the form is submitted, enhancing the user experience during the processing time.
4. Form Submission Handling: The form is submitted while incorporating the above features.

Note: The form has a page redirection setting that refreshes the same page upon submission, which updates the CPT grid. This method was chosen for simplicity, though alternative AJAX-based methods could be explored for a more seamless experience. Go to your form settings - default confirmation to adjust accordingly.

Below is the complete code with comments. If you need to adjust it for your needs, just copy this entire message into ChatGPT and have a friendly convo

Related discussion that made me post this here as this forum post has been locked: Disable Submit button after submit

How to use:

1. Install WPCode plugin
2. You will figure out the rest… easy peasy

Code below with comments:

<script>
jQuery(document).ready(function($) {
    // Set focus to the textarea on page load
    $('#input_2_1').focus();

    // Handle Enter keypress and click on submit button
    $('#input_2_1').keypress(handleSubmit);
    $("#gform_2 [type=submit]").on("click", handleSubmit);

    function handleSubmit(e) {
        // Check if Enter key or submit button is pressed
        if (e.type === 'keypress' && (e.which !== 13 || e.shiftKey)) {
            return; // Ignore other keypresses
        }

        e.preventDefault(); // Prevent default form submission

        // Change opacity of the textarea and submit button
        var textarea = $('#input_2_1');
        var submitButton = $("#gform_2 [type=submit]");
        textarea.css("opacity", 0.2);
        submitButton.css("opacity", 0.2);

        // Position and display the GIF animation
        positionAndShowGif();

        // Submit the form after making changes
        $(this).closest("form").submit();
    }

    function positionAndShowGif() {
        // Create and display the GIF animation
        var gif = $('<img>', {
            id: 'loading-gif',
            src: 'https://littlewinsapp.com/wp-content/uploads/2023/12/bouncy-top-hat.gif',
            css: {
                position: 'absolute',
                display: 'none'
            }
        }).appendTo('body');

        // Calculate GIF position over the textarea
        var offset = $('#input_2_1').offset();
        var width = $('#input_2_1').outerWidth();
        var height = $('#input_2_1').outerHeight();

        gif.css({
            top: offset.top + (height / 2) - (gif.height() / 2), // Center vertically
            left: offset.left + (width / 2) - (gif.width() / 2) // Center horizontally
        }).show();
    }
});
</script>

[fullmotiongroup (Mayur Jobanputra)]

Added a way to play an audio file now also. Plays mp3 file at 20% volume and the form submit doesn’t occur until end of audio file.

<script>
jQuery(document).ready(function($) {
    // Preload audio files
    var audioFiles = [
        'https://littlewinsapp.com/wp-content/uploads/2023/12/claps1.mp3',
        'https://littlewinsapp.com/wp-content/uploads/2023/12/good1.mp3'
    ];

    audioFiles.forEach(function(audioFile) {
        var audio = new Audio(audioFile);
        audio.preload = 'auto';
    });

    // Set focus to the textarea on page load
    $('#input_2_1').focus();

    // Handle Enter keypress and click on submit button
    $('#input_2_1').keypress(handleSubmit);
    $("#gform_2 [type=submit]").on("click", handleSubmit);
    
    
    
    function handleSubmit(e) {
        if (e.type === 'keypress' && (e.which !== 13 || e.shiftKey)) {
            return; // Ignore keypresses that are not Enter or are Shift+Enter
        }
    
        e.preventDefault(); // Prevent default form submission
    
        // Change opacity of the textarea and submit button
        var textarea = $('#input_2_1');
        var submitButton = $("#gform_2 [type=submit]");
        textarea.css("opacity", 0.2);
        submitButton.css("opacity", 0.2);
    
        // Position and show the GIF animation
        positionAndShowGif();
    
        // Store the reference to "this"
        var formElement = $(this).closest("form");
    
        // Play a random audio file and submit the form when it ends
        playRandomAudio(function() {
            formElement.submit();
        });
    }

    function positionAndShowGif() {
        var gif = $('<img>', {
            id: 'loading-gif',
            src: 'https://littlewinsapp.com/wp-content/uploads/2023/12/bouncy-top-hat.gif',
            css: {
                position: 'absolute',
                display: 'none'
            }
        }).appendTo('body');

        var offset = $('#input_2_1').offset();
        var width = $('#input_2_1').outerWidth();
        var height = $('#input_2_1').outerHeight();

        gif.css({
            top: offset.top + (height / 2) - (gif.height() / 2), // Center vertically over the textarea
            left: offset.left + (width / 2) - (gif.width() / 2) // Center horizontally
        }).show();
    }

   function playRandomAudio(callback) {
        var randomIndex = Math.floor(Math.random() * audioFiles.length);
        var audio = new Audio(audioFiles[randomIndex]);
        audio.volume = 0.2; // Set volume to 20% (0.2)
        audio.onended = callback; // Call the callback function when audio ends
        audio.play();
    }
});
</script>