javascriptでフォームから複数のtextの値を取得

投稿者: Anonymous

複数のフォームがあることを想定して(heading_1, heading_2, heading_3…..)それぞれのインプットの値を取得、HTMLに表示したいのですが、なぜか取得できません。

個別にheading_1とフォームnameを入力すると問題無く取得できるのですが、thisFormNameを使用するとうまく行かなくなってしまいます。

また、出力はフォームと同じ様に
<h4>タグで出力<p>タグで出力という形で結合してinnerHTMLで出力までを想定しております。

_x000D_

_x000D_

function saveField(obj) {_x000D_
  var thisFormName = obj.parentNode.name;_x000D_
  var textboxValue = document.thisFormName.headingTitle.value;_x000D_
  var textareaValue = document.thisFormName.content.value;_x000D_
_x000D_
  alert(textboxValue);_x000D_
  alert(textareaValue);_x000D_
}

_x000D_

<form id="freeText_1" name="heading_1">_x000D_
  <h4>見出しを入力</h4>_x000D_
  <input type="text" id="headingTitle1" name="headingTitle">_x000D_
  <h5>自由文を入力</h5>_x000D_
  <textarea id="content_1" rows="5" cols="80" name="content"></textarea>_x000D_
  <button onclick="saveField(this);">確定</button>_x000D_
</form>

_x000D_

_x000D_

_x000D_

何でも構いませんのでご指摘を頂ければと思いますので宜しくお願いいたします。

解決

下記のように変更します。
要点は、プロパティと文字列(名前)が違うということですね。文字列をプロパティ名として使うには
オブジェクト[プロパティ名を表す文字列]
のようにします。

function saveField(obj) {
  var thisFormName = obj.parentNode.name;
  var textboxValue = document[thisFormName].headingTitle.value;
  var textareaValue = document[thisFormName].content.value;

  alert(textboxValue);
  alert(textareaValue);
}
回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *