WEBシステム開発・デザイン制作などすべての作業を一貫してご提供しております。(大阪・東京近辺)

簡単画面遷移無しフォーム jQuery Form Plugin(jquery.form.js)

one page(1ページ)完結のサイトの場合、お問い合わせフォームなどの入力エラー、確認画面、完了画面のページ遷移も省略させたい思う時がある。

jquery.form.jsを利用すれば、簡単にOne Page完結のAjaxフォームを設置することが可能だ。

通常のForm形式のタグを記述し、jquery.form.jsを実行するだけなので、いろいろなプロジェクトのフォームを切り替えて利用することが容易かもしれない。

HTML5のvalidation機能と合わせて利用すれば、クライアント側のコード量を抑えたWEB制作ができることだろう。


jQuery Form Plugin 利用 例)


<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>



<html>
<head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js”></script>
<script src=”http://malsup.github.com/jquery.form.js”></script>

<script>
// wait for the DOM to be loaded
$(document).ready(function() {
// bind ‘myForm’ and provide a simple callback function
$(‘#myForm’).ajaxForm(function() {
alert(“Thank you for your comment!”);
});
});
</script>
</head>



■jQuery Form Plugin
jquery.malsup.com/form/