[JS] Pointing to a div

Seachmall

I have a script that updates the page while you fill in a form. However I need to fill in several divs (which all contain the same info) with one form.

For example,

<div id="list1">
    <div id="jsfirstname">
          John
    </div>
    <div id="jssurname">
          Doe
    </div>
</div>
<div id="list2">
     <div id="jsfirstname">
          Jane
     </div>
     <div id="jssurname">
          Smith
     </div>
</div>

And my form

<form>
<input type="text" onChange="update(this.id)" id="firstname">
<input type="text" onChange="update(this.id)" id="surname">\
</form>

And the script

function(id){
    var newvalue = document.getElementById(id).value;
    document.getElementById("js"+id).innerHTML=newvalue;
}

Now this works fine if there is only list, however there is two so how do I tell the script wheter it should be list 1 or list 2?

EDIT -- Made each id unique. I was hoping there was some way around it .

Bluefrog

Well the ID's should be unique but it's not mandatory. You could loop through the divs in each list div and populate them so something like:

var list1divs = list1.getElementsByTagName('div') will give you an array of all the divs in the list1 div so for instance list1divs[[0] would be equivalent to document.getElementById('jsfirstname');

You iterate through them to populate your values. With an little ingenuity you could map the form element array to the listdivs array to simplify the process of updating. You could even iterate through the list divs depending on what exactly you are trying to achieve.

Seachmall wrote:

I have a script that updates the page while you fill in a form. However I need to fill in several divs (which all contain the same info) with one form.

For example,

<div id="list1">
    <div id="jsfirstname">
          John
    </div>
    <div id="jssurname">
          Doe
    </div>
</div>
<div id="list2">
     <div id="jsfirstname">
          Jane
     </div>
     <div id="jssurname">
          Smith
     </div>
</div>

And my form

<form>
<input type="text" onChange="update(this.id)" id="firstname">
<input type="text" onChange="update(this.id)" id="surname">\
</form>

And the script

function(id){
    var newvalue = document.getElementById(id).value;
    document.getElementById("js"+id).innerHTML=newvalue;
}

Now this works fine if there is only list, however there is two so how do I tell the script wheter it should be list 1 or list 2?

EDIT -- Made each id unique. I was hoping there was some way around it .

Seachmall

Thanks but I got it done. It actually came out better than my original plan!

I think its the same idea as yours though, I'm too tired to compare.