html - how to fill input text on load?

javascript jquery html json onload
hamed picture hamed · Dec 27, 2014 · Viewed 44.4k times · Source

I have an HTML form in the view and I need to fill out some input fields with json variables that come from the server. I don't want to write javascript code for each input field, instead, I want to access json variable in the value attribute of input tag.

I tested onload event for input tag but ot does not have any effects.

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

Answer

Girish picture Girish · Dec 27, 2014

onload event is work with <body> tag and some other tags, or you can also use window.onload = function(){} see below sample code

HTML

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

JS CODE

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

PS: id will be unique selector so add id attribute in input element.

you can access all element using right selector in window.onload event anonymous function

UPDATE

suggested by @AlexanderO'Mara

'onload' is supported by the following HTML tags:

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

And the following Javascript objects:

image, layer, window

Related questions

How to send a JSON object using html form data

So I've got this HTML form: <html> <head><title>test</title></head> <body> <form action="myurl" method="POST" name="myForm"> <p><label for="…

Read More
Creating a JSON dynamically with each input value using jquery

I got a situation where I would like to read some data off a JSON format through PHP, however I am having some issues understanding how I should construct the Javascript object to create the JSON format dynamically. My scenario …

Read More
how to use json file in html code

I have json file mydata.json, and in this file is some json-encoded data. I want obtain this data in file index.html and process this data in JavaScript. But a don't know how to connect.json file in .html …

Read More