How to bind HTML fields with javascript object

Question

I have to bind HTML fields with javascript objects. This is my HTML-

<div>
   <img src="value1"><br/>    
   <p>value2</p>
   <a href="value3"/>
</div>

I have value1,value2,value3 in javascript function. How can I bind this values to html fields?

What do you mean to say by `javascript Oject`. Please clarify — Rajeev Kumar, Jul 05 '13 at 06:13
By javascript object, I just meant javascript variables. `var value1` — Sandy, Jul 05 '13 at 06:15
so you mean when you change value1, you want the img src=value1 to be updated automatically too ? — drhanlau, Jul 05 '13 at 06:22
@cherhan- yes exactly. These values are in a aspx page, every time it loads, values might be different. — Sandy, Jul 05 '13 at 06:27
Or perhaps http://stackoverflow.com/questions/620265/can-i-set-up-html-email-templates-with-asp-net — mplungjan, Jul 05 '13 at 07:39
@mplungjan- My requirement is like values are there in a aspx.cs page and i need to bind those values inside fields of a div and again same values needed to binded in another javascript function. So which would be fine- calling values from code behind to div and javascript function or save code behind values to var variable to a javascript function and both div and javascript function takes it. — Sandy, Jul 05 '13 at 08:16

Sergio · Accepted Answer · 2013-07-05T06:41:53.730

2

FIDDLE here

If you have values in javascript that you want to change in the HTML the best is to create those elements in javascript. But if I just follow your HTML you can use:
(there are some markup errors in your html, so I changed that)

html

<div><img id="value1" src="#" /><br/>    
<p id="value2">value2</p>
<a id="value3" href="#">Link</a></div>

script

// here you give value to the js variables
var value1 = 'image.jpg'; 
var value2 = 'Test text';
var value3 = 'http://www.stackoverflow.com';
// here you put/bind the values with the ids in the html
document.getElementById('value1').src = value1;
document.getElementById('value2').innerHTML = value2;
document.getElementById('value3').href= value3

edited Jul 05 '13 at 06:41

answered Jul 05 '13 at 06:30

Sergio

28,539
11
85
132

I think he wants to databind them – mplungjan Jul 05 '13 at 07:38
I followed your code- end up in an error `Uncaught TypeError: Cannot set property 'src' of null ` – Sandy Jul 05 '13 at 07:42
@Sandy, that means `document.getElementById('value1')` doesn't exist. Please double check the id, in the javascript and your html. Are you running the code inside a function? Did you see my FIDDLE, does it work as you expect there? – Sergio Jul 05 '13 at 07:47
@sergio- this is what I tried- `

value2
Link
` whats wrong here? – Sandy Jul 05 '13 at 08:05
@Sandy, it looks good, check here (http://jsfiddle.net/yxgKW/) you could try to put the script part inside the body though. – Sergio Jul 05 '13 at 08:08
@Sandy, try `window.onload = load;` without the `()`. By using the `()` the function runs imediatly without waiting for the window.onload – Sergio Jul 05 '13 at 09:06
@Sandy, nice! glad I could help – Sergio Jul 05 '13 at 09:38
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/32936/discussion-between-sandy-and-sergio) – Sandy Jul 05 '13 at 09:38

score -1 · Answer 2 · answered Jul 05 '13 at 06:20

For example:

<div><img id="image" src=value1><br/>    
<p id="paragraph">value2</p>
<a id="link" href=value3/></div>

document.getElementById('image').src = value1;
document.getElementById('paragraph').innerHtml = value2;
document.getElementById('link').href=value3

score -1 · Answer 3 · answered Jul 05 '13 at 06:21

-1

bind like that document.getElementById('image').src = value1;

answered Jul 05 '13 at 06:21

SANDEEP

1,062
3
14
32

How to bind HTML fields with javascript object

3 Answers3