Home » Jquery » javascript – count number of misspelled words

javascript – count number of misspelled words

Posted by: admin February 22, 2020 Leave a comment

Questions:

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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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;
            }
            jQuery(function($) {
                var textData = $("#Text").val();
                $.ajax({
                    type: "POST",
                    url: "/path/to/scripts/ajax/spellcheckText.php",
                    data: textData,
                    success: (function (response) {
                        let percentage = response.percentage;
                        if (percentage < 80){
                            alert("A number of misspelled words were detected. Please correct and submit again.");
                            return false;
                        }
                    })
                });
            })
        }
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="form-group">
        <form method=POST action="/path/to/scripts/ajax/processText.php" name="textform" id="textQuestion">
            <h3>$thesequestions{'theQuestionText'}</h3>
            <p>
                <textarea name="textarea" class="standard-editor" id="Text"></textarea>
            </p>
            <br/>
            <input class="btn btn-primary" type="submit" onclick="return checkWordCount()" 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="/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 };
                        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{'theQuestionText'}</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>```

The revised JavaScript now properly reads the content from the textarea from tinyMCE’s getContent(). Also now pass the text to be spell checked down to the spell checker and am able to read and process a percentage of misspellings in the text in the browser.

Only issue at present is that I have not been able to reach the second post where the textarea is recorded in the database. Not sure if the event.PreventDefault() in the onsubmit is correctly placed. Any additional hints would be greatly appreciated.

How to&Answer: