web-dev-qa-db-ja.com

html-ロード時に入力テキストを埋める方法は？

ビューにHTMLフォームがあり、サーバーから取得したjson変数でいくつかの入力フィールドに入力する必要があります。入力フィールドごとにJavaScriptコードを記述したくありません。代わりに、入力タグのvalue属性のjson変数にアクセスしたいと思います。

onloadタグのinputイベントをテストしましたが、効果はありません。

<input type="text" class="form-control" onload="this.value = 'value';" name="company[name]" />
javascriptjqueryhtmljsononload
8
hamed

これは純粋な/バニラのJavascriptソリューションです

JSONデータと同じ<input>要素の名前を保持します。アイデアは、JSONデータのキーを使用して<input>にアクセスすることです。

これがworking code snippet：です。

const values = {
  a: 5,
  b: 15
}

const keys = Object.keys(values)
const length = keys.length

for(let i = 0; i < length; i++){
    const key = keys[i]
    document.getElementsByName(key)[0].value = values[key]
}
<input type="text" class="form-control" name="a" />
<input type="text" class="form-control" name="b" />
3
Rahul Desai

onloadイベントは_<body>_タグと他のいくつかのタグで動作します。またはwindow.onload = function(){}を使用することもできます。以下のサンプルコードを参照してください

[〜＃〜] html [〜＃〜]

_ <input type="text" class="form-control" name="company[name]" id="company_name"/>
_

JSコード

_window.onload = function(){
  document.getElementById("company_name").value = "value";
}
_

PS：idは一意のセレクターになるため、入力要素にid属性を追加します。

_window.onload_イベント匿名関数で右セレクターを使用してすべての要素にアクセスできます

[〜＃〜]更新[〜＃〜]

@ AlexanderO'Maraによって提案されました

「onload」は、次のHTMLタグでサポートされています。

_<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
_

そして、以下のJavascriptオブジェクト：

_image, layer, window
_
6
Girish
$('document').ready(function () {
   $('input').val('value')
})

$('document').ready(function() {
  $('input').val('value')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="form-control" name="company[name]" />
3
Vitorino fernandes