LoginSignup
3
2

More than 3 years have passed since last update.

inputタグとtextareaタグでのvalueの渡し方について

Last updated at Posted at 2021-03-03

概要

Laravelで編集機能を実装中にDBから取得したデータをviewへ表示しようとした時が
inputタグの場合は取得したデータが表示されているのに、texereaタグでは表示されなかった原因を記載します。

問題

なぜかタイトルは取得したデータが取得できているのに本文ではできていなかった。
(DBには確かにデータはあるにも関わらず)

form.balade.php

<label for="name">タイトル</label>
<input type="text" class="form-control" name="title" value="{{ $memo->title }}">

<label for="text">本文</label>
<textarea class="form-control" rows="10" name="memo" value="{{ $memo->text }}"></textarea>

image.png

解決

正しい書き方はこうだ

form.balade.php

<label for="name">タイトル</label>
<input type="text" class="form-control" name="title" value="{{ $memo->title }}">

<label for="text">本文</label>
<textarea class="form-control" rows="10" name="memo">{{ $memo->memo }}</textarea>

原因:texereaタグにvalu属性には対応していない

inputタグにはclass属性と同じ箇所にvalue属性も記述することでデータを表示することができるが、textareaタグにはそうではない。
私はなぜかinputタグと同じ要領でやれば表示されると勘違いしていたが、そうではなかったのだ。

form.balade.php

//間違い
<textarea class="form-control" rows="10" name="memo" value="{{ $memo->text }}">

//正しい
<textarea class="form-control" rows="10" name="memo">{{ $memo->memo }}</textarea>

追記:JavaScriptの場合は指定できる

@il9437 さんからコメントで教えて頂きました。

JavaScript場合は、textareaにもvalue値を指定できるようです。

test.js
<textarea id='ta'></textarea>
<script>
  document.getElementById('ta').value = 'test';
</script>

image.png

以上となります。
もし悩まれている方の解決策になれば幸いです。

3
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2