count number of misspelled words

0
votes

I have a project where I need to count the number of misspelled words in a text area and prevent submission of the web form if there are too many misspellings. The JavaScript editor, tinyMCE is used for the entry form. A PHP script, spellcheckText.php, counts the misspellings, if any, and returns a JSON encoded result back to the brows. Code example below:

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <link rel="stylesheet" src="/simages/css/bootstrap/3.3.7/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="/simages/scripts/js/tinymce/js/tinymce/tinymce.min.js"></script>
        <script>
            tinymce.init({
                selector: ".standard-editor",
                plugins: "wordcount spellchecker",
                paste_as_text: false,
                theme: "modern",
                branding: false,
                content_style: ".mce-content-body {font-size:16px;font-family:Arial,sans-serif;}",
                browser_spellcheck: true,
                toolbar: "undo redo",
                spellchecker_rpc_url: '/simages/spellchecker/spellchecker.php',
                menubar: "tools",
                statusbar: true,
                height: "400",
                width: "600",
                paste_data_images: false,
                paste_enable_default_filters: false,
                paste_preprocess: function(plugin, args) {
                    args.content = '';
                }
  
            });
        </script>
        <script type="text/javascript">
            function checkWordCount() {
                var wordCount = tinyMCE.activeEditor.plugins["wordcount"].getCount();
                if (wordCount < 50) {
                    alert("Need 50 words or greater for your text submission...");
                    return false;
                }
                var essayContent = tinyMCE.activeEditor.getContent({format: 'text'});
                function getSpellCount(essayContent){
                    return new Promise((resolve,reject) => {
                        jQuery(function(\$) {
                            var values = { 'str': essayContent };
                            \$.ajax({
                                type: "POST",
                                url: "/path/to/spellcheckEssay.php",
                                data: values,
                                success: resolve,
                                error: reject,
                            })
                        });
                    })
                }
                var percentage = getSpellCount(essayContent);
                percentage.then(function(result){
                    console.log(result);
                    var grade = result.percentage;
                    if(grade < 80){
                        alert("Please edit your response.");
                        return false;
                    }else{
                        document.essayform.submit();
                    }
                }).catch(function (error) {
                    console.log('Failed',error);
                });
            }
        </script>
    </head>
    <body>
    <div class="container-fluid">
        <div class="form-group">
            <form method=POST action="/path/to/ajax/textWords.php" name="essayform" id="essayQuestion" onsubmit="event.preventDefault();checkWordCount();">
                <h3>$thesequestions{'Text'}</h3>
                <p>
                    <textarea name="textarea" class="standard-editor" id="essay"></textarea>
                </p>
                <br/>
                <input class="btn btn-primary" type="submit" value="Submit Text"/>
            </form>
        </div>
    </div>
    </body>
    </html>```
I don't do front end coding that often, so don't know if the attempt to post twice in the same form is the problem or something else. Results of this example is a blank page where form's post action is executed. Don't believe that jQuery section is executed.

Open to suggestions for a better method.

Thank you.

**Below is a revision of the original code post**:

    ```<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <link rel="stylesheet" src="/css/bootstrap/3.3.7/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="/scripts/js/tinymce/js/tinymce/tinymce.min.js"></script>
        <script>
            tinymce.init({
                selector: ".standard-editor",
                plugins: "wordcount spellchecker",
                paste_as_text: false,
                theme: "modern",
                branding: false,
                content_style: ".mce-content-body {font-size:16px;font-family:Arial,sans-serif;}",
                browser_spellcheck: true,
                toolbar: "undo redo",
                spellchecker_rpc_url: '/simages/spellchecker/spellchecker.php',
                menubar: "tools",
                statusbar: true,
                height: "400",
                width: "600",
                paste_data_images: false,
                paste_enable_default_filters: false,
                paste_preprocess: function(plugin, args) {
                    args.content = '';
                }
  
            });
        </script>
        <script type="text/javascript">
            function checkWordCount() {
                var wordCount = tinyMCE.activeEditor.plugins["wordcount"].getCount();
                if (wordCount < 50) {
                    alert("Need 50 words or greater for your text submission...");
                    return false;
                }
                var essayContent = tinyMCE.activeEditor.getContent({format: 'text'});
                function getSpellCount(essayContent){
                    return new Promise((resolve,reject) => {
                        jQuery(function($) {
                            var values = { 'str': essayContent };
                            console.log(values);
                            $.ajax({
                                type: "POST",
                                url: "/path/to/ajax/spellcheckText.php",
                                data: values,
                                success: resolve,
                                error: reject,
                            })
                        });
                    })
                }
                var percentage = getSpellCount(essayContent);
                percentage.then(function(result){
                    console.log(result);
                    var grade = result.percentage;
                    if(grade < 80){
                        alert("A number of misspelled words were detected. Please correct and submit again.");
                        return false;
                    }
                }).catch(function (error) {
                    console.log('Failed',error);
                });
            }
        </script>
    </head>
    <body>
    <div class="container-fluid">
        <div class="form-group">
            <form method=POST action="/path/to/ajax/textWords.php" name="essayform" id="essayQuestion" onsubmit="event.preventDefault();checkWordCount();">
                <h3>$thesequestions{'Text'}</h3>
                <p>
                    <textarea name="textarea" class="standard-editor" id="essay"></textarea>
                </p>
                <br/>
                <input class="btn btn-primary" type="submit" value="Submit Text"/>
            </form>
        </div>
    </div>
    </body>
    </html>```
1
javascriptjquerytinymce-4
The issue is that the ajax method is asynchronous. You cannot return false from an ajax call to cancel the form submit. The form will have already submitted by the time the ajax call returns. – Taplar
Thank you for your pointer about asynchronous and ajax. Have posted a revision. – Eric Peers

1 Answers

0
votes

Below is the revised code. The path to the solution was pointed out by Taplar where I was returning false incorrectly. Also accessing the tinyMCE data correctly helps make things work.

```<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" src="/simages/css/bootstrap/3.3.7/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="/scripts/js/tinymce/js/tinymce/tinymce.min.js"></script>
    <script>
        tinymce.init({
            selector: ".standard-editor",
            plugins: "wordcount spellchecker",
            paste_as_text: false,
            theme: "modern",
            branding: false,
            content_style: ".mce-content-body {font-size:16px;font-family:Arial,sans-serif;}",
            browser_spellcheck: true,
            toolbar: "undo redo",
            spellchecker_rpc_url: '/path/to/spellchecker/spellchecker.php',
            menubar: "tools",
            statusbar: true,
            height: "400",
            width: "600",
            paste_data_images: false,
            paste_enable_default_filters: false,
            paste_preprocess: function(plugin, args) {
                args.content = '';
            }

        });
    </script>
    <script type="text/javascript">
        function checkWordCount() {
            var wordCount = tinyMCE.activeEditor.plugins["wordcount"].getCount();
            if (wordCount < 50) {
                alert("Need 50 words or greater for your text submission...");
                return false;
            }
            var essayContent = tinyMCE.activeEditor.getContent({format: 'text'});
            function getSpellCount(essayContent){
                return new Promise((resolve,reject) => {
                    jQuery(function($) {
                        var values = { 'str': essayContent };
                        console.log(values);
                        $.ajax({
                            type: "POST",
                            url: "/path/to/ajax/spellcheckText.php",
                            data: values,
                            success: resolve,
                            error: reject,
                        })
                    });
                })
            }
            var percentage = getSpellCount(essayContent);
            percentage.then(function(result){
                console.log(result);
                var grade = result.percentage;
                if(grade < 80){
                    alert("A number of misspelled words were detected. Please correct and submit again.");
                    return false;
                }
            }).catch(function (error) {
                console.log('Failed',error);
            });
        }
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="form-group">
        <form method=POST action="/path/to/ajax/textWords.php" name="essayform" id="essayQuestion" onsubmit="event.preventDefault();checkWordCount();">
            <h3>$thesequestions{'text'}</h3>
            <p>
                <textarea name="textarea" class="standard-editor" id="essay"></textarea>
            </p>
            <br/>
            <input class="btn btn-primary" type="submit" value="Submit Text"/>
        </form>
    </div>
</div>
</body>
</html>```