この文書の現在のバージョンと選択したバージョンの差分を表示します。
js_getform [2018/05/14 21:22] 管理者 作成 |
js_getform [2018/05/14 21:22] (現在) 管理者 作成 |
||
---|---|---|---|
ライン 1: | ライン 1: | ||
+ | {{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]] | ||