内容へ移動
あちあち情報局
趣味や日曜プログラムなどを書いています
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
トップページ
»
textフォーム値の取得するJavaScript
js_getform
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
{{tag>プログラミング関連 Javascript}} [[start]]>[[programming_start]] ====== textフォーム値の取得するJavaScript ====== Javascript でtextフォームから文字列を取得する方法。 取得方法は複数あるので代表的な物を3つ紹介します。3番のid属性での取得する方法が使いやすい。 注意:取得した値を使用する場合は状況に応じて例外処理を行ってください。例えばHTML使用可能な場所に出力する場合はクロスサイトスクリプティング対策、SQLで使用するならSQLインジェクション対策などです。デモではhtmlの使えないアラートダイアログに出力しているため処理はしていません。 ---- ===== デモ ===== 下記のフォームに文字を入力しボタンを押すと、入力された文字列が表示されます。 <HTML> <form name="form1"> <input type="text" name="name1" id="id1" value="abc" maxlength="10"><br/ > <input type="button" value="1.name属性から取得" onclick="sample1()"><br/ > <input type="button" value="2.elements番号から取得" onclick="sample2()"><br/ > <input type="button" value="3.id属性から取得" onclick="sample3()"> </form> <script><!-- function sample1(){ //name属性から取得 var str=document.form1.name1.value; alert(str); } function sample2(){ //elements番号から取得 var str=document.form1.elements[0].value; alert(str); } function sample3(){ //id属性から取得 var str=document.getElementById("id1").value; alert(str); } // --> </script> </HTML> \\ ===== サンプル ===== <code javascript> <form name="form1"> textフォームに文字を入力してボタンを押して下さい<br /> <input type="text" name="name1" id="id1" value="abc" maxlength="10"><br/ > <input type="button" value="name属性から取得" onclick="sample1()"><br/ > <input type="button" value="elements番号から取得" onclick="sample2()"><br/ > <input type="button" value="id属性から取得" onclick="sample3()"> </form> <script><!-- function sample1(){ //name属性から取得 var str=document.form1.name1.value; alert(str); } function sample2(){ //elements番号から取得 var str=document.form1.elements[0].value; alert(str); } function sample3(){ //id属性から取得 var str=document.getElementById("id1").value; alert(str); } // --> </script> </code> ===== PR ===== <html> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- respon_0 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9251612436023685" data-ad-slot="1409739163" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </html> ===== 説明 ===== ==== 1.name属性から取得 ==== fomeのname属性とinput(text)のフォーム名から取得します。 注意:name属性は値の重複が認められているので重複がある場合はエラーになります。 <code> document.(input textのname属性値).value; または document.(Formのname属性値).(input textのname属性値).value; </code> ==== 2.elements番号から取得 ==== formのname属性とinput等の入力要素番号から取得します。要素番号は上から順番に0番から開始する数字です。 注意:name属性は値の重複が認められているので重複がある場合はエラーになります。 <code> document.(Formのname属性値).elements[番号].value; </code> ==== 3.id属性から取得 ==== html文法ではid属性の重複が認められてないので確実に値を取得できます。文法に反してidの重複があった場合は1つめを取得するようです(Edge以外で試してないのでブラウザによって異なるかも) <code> document.getElementById(id属性値).value; </code> ---- [[start]]>[[programming_start]]
js_getform.txt
· 最終更新: 2018/05/14 21:22 by
管理者
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ