HTML、formに表示される値、valueをinnerHTML、document.formsで変更する

概要

JavaScriptでHTMLとformの表示を変更するときに苦労したので、解決した方法を簡単なアプリを作ってまとめておきます。

作成するアプリ

実装内容

受信のボタンを押すと
・フォームの表示
・HTMLの表示
・ボタンの表示
の3つの表示が変更される。

作成・編集するファイル

・routes.rb
・texts_controller.rb
・index.html.erb

この3つのファイルを編集します。
ルーティング、コントローラーについては特に説明しません。

ルーティング

ルーティングは以下のように記載してください。

routes.rb

Rails.application.routes.draw do
  root to: 'texts#index'
  resources :texts, only: [:index]
end

コントローラー

コントローラーは以下のように記載してください。

texts_controller.rb

class TextsController < ApplicationController
  def index
  end
end

ビュー

ビューは以下のように記載してください。

index.html.erb

<h2>Text Change</h2>
<form id="formId" name="formName">
<input id="textId" name="textName" type="textbox" value="変更前">
<input type="button" id="btnId" name="btnName" value="送信" onclick="textChange()">
</form>
<div id="htmlId">変更前</div>

<script>

var formElements = document.forms.formId;
function textChange() {
  htmlId.innerHTML = "HTMLに表示";
  formElements.textId.value = "フォームに表示";
  formElements.btnId.value = "受信";  
}

</script>

では、ポイントを説明します。

<form id="formId" name="formName">
  <input type="textbox" id="textId" name="textName" value="変更前">
  <input type="button" id="btnId" name="btnName" value="送信" onclick="textChange()">
</form>
<div id="htmlId">変更前</div>

input、formはそれぞれid、nameを設定しましょう。
あとでこのid、nameを使用します。
divはidだけ設定します。

type="button"のタグの中にonclickを記載して、JavaScriptで発火させる関数を設定しましょう。
今回発火させる関数はtextChange()という関数です。

var formElements = document.forms.formId;
function textChange() {
  htmlId.innerHTML = "HTMLに表示";
  formElements.textId.value = "フォームに表示";
  formElements.btnId.value = "受信";
}

まず、HTMLの表示を変更するinnerHTMLについて説明します。
HTMLの表示を変更したい場合は

// (取得したid).innerHTML = (表示したい内容)
htmlId.innerHTML = "HTMLに表示";

という感じに設定します。
HTMLの変更で実装する内容はこれで終了です。

次にformの表示を変更するdocument.formsについて説明します。

まずformの表示する内容を変更する場合innerHTMLと違って必要になってくるのが、document.formsです。
使い方はdocument.formsの後に、変更を加えたいformのid、nameを設定することでform以下のinputの表示する内容を変更できるようになります。

<%# document.forms.formId(formName)で設定 %>
<form id="formId" name="formName">
</form>

<script>
  //どちらでもOK
  var formElements = document.forms.formId;
  var formElements = document.forms.formName;
</script>

次は実際に表示を変更するコードです。

<%# document.forms.formId(formName)で設定 %>
<form id="formId" name="formName">
  <input id="textId" name="textName" type="textbox" value="変更前">
  <input type="button" id="btnId" name="btnName" value="送信" onclick="textChange()">
</form>

<script>
var formElement = document.forms.formId
function textChange() {
  // textIdのvalueの表示をフォームに表示に変更
  formElement.textId.value = "フォームに表示";
  // btnIdのvalueの表示を受信に変更
  formElement.btnId.value = "受信";
}
</script>

formElementで設定したform以下のinputにはtextboxとbuttonがあります。
これらの表示を変更するためには、表示を変更したいinputのid、name、最後にvalueを設定することで、=（イコール）で設定した値に変更することができます。

  // どちらでもOK
  formElement.textId.value = "フォームに表示";
  formElement.textName.value = "フォームに表示";
  // どちらでもOK
  formElement.btnId.value = "受信";
  formElement.btnName.value = "受信";

これで説明は終了です。

最後に

今回は<form>での実装でしたが、form_with等にid、nameを設定しても同様のことができるのでやってみてください。

参考にした記事、サイト