目次

,

ここは旧トップページ＞日曜プログラミング

textフォーム値の取得するJavaScript

Javascript でtextフォームから文字列を取得する方法。

取得方法は複数あるので代表的な物を3つ紹介します。3番のid属性での取得する方法が使いやすい。

注意：取得した値を使用する場合は状況に応じて例外処理を行ってください。例えばHTML使用可能な場所に出力する場合はクロスサイトスクリプティング対策、SQLで使用するならSQLインジェクション対策などです。デモではhtmlの使えないアラートダイアログに出力しているため処理はしていません。

デモ

下記のフォームに文字を入力しボタンを押すと、入力された文字列が表示されます。





サンプル

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

PR

説明

1.name属性から取得

fomeのname属性とinput(text)のフォーム名から取得します。

注意：name属性は値の重複が認められているので重複がある場合はエラーになります。 

document.(input textのname属性値).value;
または
document.(Formのname属性値).(input textのname属性値).value;

2.elements番号から取得

formのname属性とinput等の入力要素番号から取得します。要素番号は上から順番に0番から開始する数字です。

注意：name属性は値の重複が認められているので重複がある場合はエラーになります。 

document.(Formのname属性値).elements[番号].value;

3.id属性から取得

html文法ではid属性の重複が認められてないので確実に値を取得できます。文法に反してidの重複があった場合は1つめを取得するようです（Edge以外で試してないのでブラウザによって異なるかも） 

document.getElementById(id属性値).value;

ここは旧トップページ＞日曜プログラミング