Post Comments Without Reloading the Page

add_action( 'wp_ajax_wpide_comment', 'wpide_ajax_comment' );
add_action( 'wp_ajax_nopriv_wpide_comment', 'wpide_ajax_comment' );

function wpide_ajax_comment() {
    $comment = wp_handle_comment_submission( wp_unslash( $_POST ) );

    if ( is_wp_error( $comment ) ) {
        wp_send_json_error( array( 'message' => wp_strip_all_tags( $comment->get_error_message() ) ), 400 );
    }

    $user = wp_get_current_user();
    do_action( 'set_comment_cookies', $comment, $user, ! empty( $_POST['wp-comment-cookies-consent'] ) );

    $approved = '1' === (string) $comment->comment_approved;
    $html     = sprintf(
        '<li id="comment-%1$d" class="comment"><article class="comment-body"><footer class="comment-meta"><b class="fn">%2$s</b></footer><div class="comment-content">%3$s</div>%4$s</article></li>',
        (int) $comment->comment_ID,
        esc_html( get_comment_author( $comment ) ),
        wp_kses_post( wpautop( $comment->comment_content ) ),
        $approved ? '' : '<p class="comment-awaiting-moderation"><em>Your comment is awaiting moderation.</em></p>'
    );

    wp_send_json_success( array( 'html' => $html, 'approved' => $approved ) );
}

add_action( 'wp_footer', function () {
    if ( ! is_singular() || ! comments_open() ) {
        return;
    }
    ?>
<script>
( function () {
    var form = document.getElementById( 'commentform' );
    if ( ! form || ! window.fetch || ! window.FormData ) { return; }
    form.addEventListener( 'submit', function ( event ) {
        event.preventDefault();
        var button = form.querySelector( '[type="submit"]' );
        var data = new FormData( form );
        data.append( 'action', 'wpide_comment' );
        if ( button ) { button.disabled = true; }
        var status = form.querySelector( '.wpide-comment-status' );
        if ( ! status ) { status = document.createElement( 'p' ); status.className = 'wpide-comment-status'; status.setAttribute( 'role', 'status' ); form.appendChild( status ); }
        fetch( <?php echo wp_json_encode( admin_url( 'admin-ajax.php' ) ); ?>, { method: 'POST', body: data, credentials: 'same-origin' } )
            .then( function ( r ) { return r.json(); } )
            .then( function ( res ) {
                if ( ! res.success ) { status.textContent = res.data && res.data.message ? res.data.message : 'Your comment could not be posted.'; return; }
                var list = document.querySelector( '.comment-list, .commentlist, .wp-block-comment-template' );
                if ( list ) { list.insertAdjacentHTML( 'beforeend', res.data.html ); }
                form.reset();
                status.textContent = res.data.approved ? 'Thanks, your comment has been posted.' : 'Thanks, your comment is awaiting moderation.';
            } )
            .catch( function () { form.submit(); } )
            .finally( function () { if ( button ) { button.disabled = false; } } );
    } );
} )();
</script>
    <?php
} );