0

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

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

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

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

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

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

1 件の回答 1

1

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

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

  alert(textboxValue);
  alert(textareaValue);
}
1
  • 確認した所、ご指摘の通りでした。有難うございます。
    – user76333
    Commented 2015年3月19日 1:13

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。