jQueryのFormプラグインの簡単な入門
3、Formプラグインの簡単な入門
ステップ1:フォームを追加
ステップ2:jquery.jsとform.jsファイルの含む
3、Formプラグインの詳しい使用方法及び応用例
http://www.malsup.com/jquery/form/
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
このプラグインの作者はformを紹介しています.jsの時、こんな一言を言いました.
フォームプラグインAPI英語原文:http://www.malsup.com/jquery/form/#apiフォーム・プラグインAPIでは、フォーム・データの管理とフォームのコミットを容易にする方法がいくつかあります.ajaxFormは必要なすべてのイベントリスナーを追加し、AJAXのフォーム提出の準備をします.ajaxFormはフォームをコミットできません.documentのready関数ではajaxFormを使用してAJAXにフォームを発行する準備を行います.ajaxFormは0個または1個のパラメータを受け入れます.この個々のパラメータは、コールバック関数であってもよいし、Optionsオブジェクトであってもよい.リンク可能(Chainable):はい.例:
$('#myFormId').ajaxForm();
ajaxSubmitはすぐにAJAXからフォームを提出します.ほとんどの場合、ajaxSubmitを呼び出してユーザーのフォームの送信に応答します.ajaxSubmitは0個または1個のパラメータを受け入れます.この個々のパラメータは、コールバック関数であってもよいし、Optionsオブジェクトであってもよい.リンク可能(Chainable):はい.例://バインドフォームコミットイベントプロセッサ$('#myFormId').submit(function(){//フォームをコミット$(this).ajaxSubmit()//一般ブラウザによるフォームのコミットとページナビゲーションの生成(ページのリフレッシュを防止?)false return falseを返します. });
formSerializeは、フォームをシリアル化(またはシーケンス化)してクエリー文字列にします.このメソッドは、name 1=value 1&name 2=value 2のフォーマットの文字列を返します.リンク可能(Chainable):いいえ、このメソッドは文字列を返します.例:var queryString=$('#myFormId').formSerialize();//$を使用できるようになりました.get、$.post、$.ajax等でデータ$を提出する.post('myscript.php', queryString);
FieldSerializeは、フォームのフィールド要素をシリアル化(またはシーケンス化)してクエリー文字列にします.これは、一部のフォームフィールドのみをシリアル化(またはシーケンス化)する必要がある場合に便利です.このメソッドは、name 1=value 1&name 2=value 2のフォーマットの文字列を返します.リンク可能(Chainable):いいえ、このメソッドは文字列を返します.例:var queryString=$('#myFormId.specialFields').fieldSerialize();
FieldValueは、挿入配列に一致するフォーム要素の値を返します.0.91版から、この方法は常に配列の形でデータを返します.要素値が無効と判定された場合、配列は空です.そうしないと、1つ以上の要素値が含まれます.リンク可能(Chainable):いいえ、このメソッドは配列を返します.例://パスワード入力値var value=$('#myFormId:password')を取得する.fieldValue(); alert('The password is: ' + value[0]);
resetFormは、フォーム要素の元のDOMメソッドを呼び出すことで、フォームを初期状態に復元します.リンク可能(Chainable):はい.例:$('#myFormId').resetForm();
clearFormフォーム要素を消去します.この方法では、すべてのテキスト(text)入力フィールド、パスワード(password)入力フィールド、テキスト領域(textarea)フィールドを空にし、select要素の選択を消去し、すべてのラジオボタンと複数選択(checkbox)ボタンを非選択状態にリセットします.リンク可能(Chainable):はい.$('#myFormId').clearForm();
clearFieldsフィールド要素をクリアします.一部のフォーム要素をクリアする必要がある場合にのみ便利です.リンク可能(Chainable):はい.
$('#myFormId .specialFields').clearFields();
OptionsオブジェクトajaxFormとajaxSubmitは、1つのOptionsオブジェクトを使用して提供できる多くのオプションパラメータをサポートしています.OptionsはJavaScriptオブジェクトにすぎません.targetは、ページ内のサーバ応答によって更新される要素を示す属性と値のセットを含みます.要素の値は、jQueryセレクタ文字列、jQueryオブジェクト、またはDOM要素として指定できます.デフォルト:null.urlフォームデータをコミットするURLを指定します.デフォルト:フォームのaction属性値typeフォームデータをコミットする方法(method):GETまたはPOSTを指定します.デフォルト:フォームのmethodプロパティ値(デフォルトがGETでない場合).beforeSubmitフォームのコミット前に呼び出されたコールバック関数.「beforeSubmit」コールバック関数はフックとして提供され、プリコミットロジックまたはフォームデータの検証を実行します.「beforeSubmit」コールバック関数がfalseを返す場合、フォームはコミットされません.「beforeSubmit」コールバック関数には、配列形式のフォームデータ、jQueryフォームオブジェクト、およびajaxFormm/ajaxSubmitに入力されたOptionsオブジェクトの3つの呼び出しパラメータがあります.フォーム配列は、次のようなデータを受け入れます.
[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
デフォルト:nullsuccessフォームが正常にコミットされた後に呼び出されるコールバック関数.「success」コールバック関数が指定されている場合、サーバから応答が返されると呼び出されます.次に、dataTypeオプション値によってresponseTextに戻すかresponseXMLに戻すかが決定されます.デフォルト:nulldataTypeが返すデータ型.null、xml、script、またはjsonのいずれかです.DataTypeは、サーバの応答をどのように処理するかを規定する方法を提供します.これはjQueryに直接反映されます.http Dataメソッドで行きます.次の値は、「xml」:dataType=「xml」の場合、サーバ応答をXMLとして扱います.また、successコールバックメソッドが指定されている場合、responseXML値が返されます.'json':dataType='json'の場合、サーバ応答は評価され、指定されている場合は「success」コールバックメソッドに渡されます.script':dataType='script'の場合、サーバ応答は純粋なテキストに評価されます.デフォルト:null(サーバがresponseText値を返す)semantic Boolean flag indicating whether data must be submitted in strict semantic order(slower).Note that the normal form serialization is done in semantic order with the exception of input elements of type="image". You should only set the semantic option to true if your server has strict semantic requirements and your form contains an input element of type="image".ブールフラグは、データが意味順に厳格に従わなければならないかどうかを示します(slower?)提出します.注:一般的に、type=「image」のinput要素を除いて、フォームは意味順にシリアル化(またはシーケンス化)されています.サーバに厳格な意味要件があり、フォームにtype=「image」のinput要素が含まれている場合は、semanticをtrueに設定する必要があります.(注:この一節は理解できないので、翻訳しても意味が通じないかもしれませんが、達人に指摘してください.)デフォルト:false resetFormブールフラグは、フォームのコミットに成功した場合にリセットするかどうかを示します.Default value:null clearFormブールフラグは、フォームが正常にコミットされた場合にフォームデータが消去されるかどうかを示します.デフォルト:nullインスタンス://Optionsオブジェクトvar options={target:'#divToUpdate',url:'comment.php',success:function(){alert('Thanks for your comment!'); } };//optionsをajaxForm$('#myForm')に渡す.ajaxForm(options);
注意:Optionsオブジェクトは、jQueryの$に値を渡すためにも使用できます.ajaxメソッド.もしあなたが$に詳しいなら.ajaxがサポートするoptionsでは、OptionsオブジェクトをajaxFormとajaxSubmitに渡すことができます.
ステップ1:フォームを追加
<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> ステップ2:jquery.jsとform.jsファイルの含む
<head>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/form.js"></script>
<script type="text/javascript">
// 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> 3、Formプラグインの詳しい使用方法及び応用例
http://www.malsup.com/jquery/form/
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
このプラグインの作者はformを紹介しています.jsの時、こんな一言を言いました.
Submitting a form with AJAX doesn't get any easier than this! フォームプラグインAPI英語原文:http://www.malsup.com/jquery/form/#apiフォーム・プラグインAPIでは、フォーム・データの管理とフォームのコミットを容易にする方法がいくつかあります.ajaxFormは必要なすべてのイベントリスナーを追加し、AJAXのフォーム提出の準備をします.ajaxFormはフォームをコミットできません.documentのready関数ではajaxFormを使用してAJAXにフォームを発行する準備を行います.ajaxFormは0個または1個のパラメータを受け入れます.この個々のパラメータは、コールバック関数であってもよいし、Optionsオブジェクトであってもよい.リンク可能(Chainable):はい.例:
$('#myFormId').ajaxForm();
ajaxSubmitはすぐにAJAXからフォームを提出します.ほとんどの場合、ajaxSubmitを呼び出してユーザーのフォームの送信に応答します.ajaxSubmitは0個または1個のパラメータを受け入れます.この個々のパラメータは、コールバック関数であってもよいし、Optionsオブジェクトであってもよい.リンク可能(Chainable):はい.例://バインドフォームコミットイベントプロセッサ$('#myFormId').submit(function(){//フォームをコミット$(this).ajaxSubmit()//一般ブラウザによるフォームのコミットとページナビゲーションの生成(ページのリフレッシュを防止?)false return falseを返します. });
formSerializeは、フォームをシリアル化(またはシーケンス化)してクエリー文字列にします.このメソッドは、name 1=value 1&name 2=value 2のフォーマットの文字列を返します.リンク可能(Chainable):いいえ、このメソッドは文字列を返します.例:var queryString=$('#myFormId').formSerialize();//$を使用できるようになりました.get、$.post、$.ajax等でデータ$を提出する.post('myscript.php', queryString);
FieldSerializeは、フォームのフィールド要素をシリアル化(またはシーケンス化)してクエリー文字列にします.これは、一部のフォームフィールドのみをシリアル化(またはシーケンス化)する必要がある場合に便利です.このメソッドは、name 1=value 1&name 2=value 2のフォーマットの文字列を返します.リンク可能(Chainable):いいえ、このメソッドは文字列を返します.例:var queryString=$('#myFormId.specialFields').fieldSerialize();
FieldValueは、挿入配列に一致するフォーム要素の値を返します.0.91版から、この方法は常に配列の形でデータを返します.要素値が無効と判定された場合、配列は空です.そうしないと、1つ以上の要素値が含まれます.リンク可能(Chainable):いいえ、このメソッドは配列を返します.例://パスワード入力値var value=$('#myFormId:password')を取得する.fieldValue(); alert('The password is: ' + value[0]);
resetFormは、フォーム要素の元のDOMメソッドを呼び出すことで、フォームを初期状態に復元します.リンク可能(Chainable):はい.例:$('#myFormId').resetForm();
clearFormフォーム要素を消去します.この方法では、すべてのテキスト(text)入力フィールド、パスワード(password)入力フィールド、テキスト領域(textarea)フィールドを空にし、select要素の選択を消去し、すべてのラジオボタンと複数選択(checkbox)ボタンを非選択状態にリセットします.リンク可能(Chainable):はい.$('#myFormId').clearForm();
clearFieldsフィールド要素をクリアします.一部のフォーム要素をクリアする必要がある場合にのみ便利です.リンク可能(Chainable):はい.
$('#myFormId .specialFields').clearFields();
OptionsオブジェクトajaxFormとajaxSubmitは、1つのOptionsオブジェクトを使用して提供できる多くのオプションパラメータをサポートしています.OptionsはJavaScriptオブジェクトにすぎません.targetは、ページ内のサーバ応答によって更新される要素を示す属性と値のセットを含みます.要素の値は、jQueryセレクタ文字列、jQueryオブジェクト、またはDOM要素として指定できます.デフォルト:null.urlフォームデータをコミットするURLを指定します.デフォルト:フォームのaction属性値typeフォームデータをコミットする方法(method):GETまたはPOSTを指定します.デフォルト:フォームのmethodプロパティ値(デフォルトがGETでない場合).beforeSubmitフォームのコミット前に呼び出されたコールバック関数.「beforeSubmit」コールバック関数はフックとして提供され、プリコミットロジックまたはフォームデータの検証を実行します.「beforeSubmit」コールバック関数がfalseを返す場合、フォームはコミットされません.「beforeSubmit」コールバック関数には、配列形式のフォームデータ、jQueryフォームオブジェクト、およびajaxFormm/ajaxSubmitに入力されたOptionsオブジェクトの3つの呼び出しパラメータがあります.フォーム配列は、次のようなデータを受け入れます.
[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
デフォルト:nullsuccessフォームが正常にコミットされた後に呼び出されるコールバック関数.「success」コールバック関数が指定されている場合、サーバから応答が返されると呼び出されます.次に、dataTypeオプション値によってresponseTextに戻すかresponseXMLに戻すかが決定されます.デフォルト:nulldataTypeが返すデータ型.null、xml、script、またはjsonのいずれかです.DataTypeは、サーバの応答をどのように処理するかを規定する方法を提供します.これはjQueryに直接反映されます.http Dataメソッドで行きます.次の値は、「xml」:dataType=「xml」の場合、サーバ応答をXMLとして扱います.また、successコールバックメソッドが指定されている場合、responseXML値が返されます.'json':dataType='json'の場合、サーバ応答は評価され、指定されている場合は「success」コールバックメソッドに渡されます.script':dataType='script'の場合、サーバ応答は純粋なテキストに評価されます.デフォルト:null(サーバがresponseText値を返す)semantic Boolean flag indicating whether data must be submitted in strict semantic order(slower).Note that the normal form serialization is done in semantic order with the exception of input elements of type="image". You should only set the semantic option to true if your server has strict semantic requirements and your form contains an input element of type="image".ブールフラグは、データが意味順に厳格に従わなければならないかどうかを示します(slower?)提出します.注:一般的に、type=「image」のinput要素を除いて、フォームは意味順にシリアル化(またはシーケンス化)されています.サーバに厳格な意味要件があり、フォームにtype=「image」のinput要素が含まれている場合は、semanticをtrueに設定する必要があります.(注:この一節は理解できないので、翻訳しても意味が通じないかもしれませんが、達人に指摘してください.)デフォルト:false resetFormブールフラグは、フォームのコミットに成功した場合にリセットするかどうかを示します.Default value:null clearFormブールフラグは、フォームが正常にコミットされた場合にフォームデータが消去されるかどうかを示します.デフォルト:nullインスタンス://Optionsオブジェクトvar options={target:'#divToUpdate',url:'comment.php',success:function(){alert('Thanks for your comment!'); } };//optionsをajaxForm$('#myForm')に渡す.ajaxForm(options);
注意:Optionsオブジェクトは、jQueryの$に値を渡すためにも使用できます.ajaxメソッド.もしあなたが$に詳しいなら.ajaxがサポートするoptionsでは、OptionsオブジェクトをajaxFormとajaxSubmitに渡すことができます.