【Form Plugin】画面遷移なしでフォーム送信を可能にするjQuery

こんにちは、ハル@haru_elpisです。

画面遷移なしでフォーム送信を可能にする［Form plugin］の紹介です。

Form pluginの使い方

ダウロード

GitHub - jquery-form/form: jQuery Form Plugin

jQuery Form Plugin. Contribute to jquery-form/form developme...

github.com

ダウンロードした「jquery.form.min.js」・「jquery.formjs」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。

HTML head

src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./js/jquery.form.min.js"></script>
<script src="./js/jquery.formjs"></script>

HTML body

<form id="myForm" action="comment.php" method="post"> 
    Name: <input type="text" name="name" /> 
    Comment: <textarea name="comment"></textarea> 
    <input type="submit" value="Submit Comment" /> 
</form>

JavaScript

<script>  
        $(document).ready(function() { 
            $('#myForm').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 
        }); 
</script>