stuck on how to access a textfield added in a div

[Ed]

Hi,

I'm stuck at the moment trying to work out how to access the value of a
textfield which gets added in a DIV element.

I have functions to add and remove the textfields from the elements as
shown here:

function addListen(){
var ni = document.getEle mentById('liste ndiv');
var numi = document.getEle mentById('liste ndivval');
var num = (document.getEl ementById("list endivval").valu e -1)+
2;
numi.value = num;
var divIdName = "listen"+nu m;
var newdiv = document.create Element('div');
newdiv.setAttri bute("id",divId Name);
var htmlstr="<td><i nput type=text id="+divIdName+ "
name="+divIdNam e+" size=21 maxlength=21 />&nbsp;";
htmlstr=htmlstr +"<input type=button value=\" -\"
onclick=\"javas cript:removeLis ten(\'" + divIdName + "\');\">&nbsp;" ;
htmlstr=htmlstr +"<input type=button value=\" +\"
onclick=\"javas cript:addListen ();\" /></td>";
newdiv.innerHTM L=htmlstr;
ni.appendChild( newdiv);
}

//remove a listen textfield in the apache config form
function removeListen(di vNum){
var d = document.getEle mentById('liste ndiv');
var olddiv = document.getEle mentById(divNum );
d.removeChild(o lddiv);
}

And I'm trying to write a function here to verify the contents of the
new textfields added:

//check listen values
function checklistens(di vNum){
var num = document.getEle mentById("liste ndivval").value ;
var lnum= "listen"+nu m;
var numi = document.getEle mentById(lnum). value;
alert("numi="+n umi);
var numi = document.getEle mentById(lnum). focus;

return false;
}

However I keep getting an undefined object in the alert. Can anyone see
what I'm doing wrong please?

Thanks,

Ed.

[RobG]

Ed wrote:

Hi,

I'm stuck at the moment trying to work out how to access the value of a
textfield which gets added in a DIV element.

I have functions to add and remove the textfields from the elements as
shown here:

function addListen(){
var ni = document.getEle mentById('liste ndiv');
var numi = document.getEle mentById('liste ndivval');
var num = (document.getEl ementById("list endivval").valu e -1)+
2;
Rather than using subtraction to ensure num is a number, use unary
'+'. There also seems little point in using numi:

var num = +document.getEl ementById("list endivval").valu e+1;

numi.value = num;
Unless you are going to use numi somewhere else, just do:

document.getEle mentById('liste ndivval') = num;

var divIdName = "listen"+nu m;
var newdiv = document.create Element('div');
newdiv.setAttri bute("id",divId Name);
Why not access the attribute directly:

newdiv.id = 'listen' + num;

var htmlstr="<td><i nput type=text id="+divIdName+ "
name="+divIdNam e+" size=21 maxlength=21 />&nbsp;";
I'm not sure what this line was before it was wrapped, but if there
was no space between divIdName and the 'name' attribute then that will
likely cause a problem. It's always a good idea to quote attribute
values even it it isn't strictly needed.

You have also given the input the same ID as the div which is invalid
HTML and will cause problems.

You are using innerHTML to add part of a table, and adding it to a div
which again is invalid HTML.

Do not allow posted code to be automatically wrapped, manually wrap it
at about 70 characters.

htmlstr=htmlstr +"<input type=button value=\" -\"
htmlstr += "<input type=button value=\" -\"

onclick=\"javas cript:removeLis ten(\'" + divIdName + "\');\">&nbsp;" ;
There is no need for 'javascript:' in the value of an onclick attribute.

Your button can be:

var oBut = document.create Element('input' );
oBut.type = 'button';
oBut.value = '-';
oBut.onclick = function() {removeListen(n ewdiv);};
newdiv.appendCh ild(oBut);

Untested, but newdiv creates a closure that will refer back to the div
you are creating, even after the function has ended.

htmlstr=htmlstr +"<input type=button value=\" +\"
onclick=\"javas cript:addListen ();\" /></td>";
newdiv.innerHTM L=htmlstr;
I'm not sure what most browsers will do with this, but it is invalid
HTML. You should never use innerHTML to write parts of tables, either
write the entire table or just cell contents.

If you are modifying tables, use the DOM.

The same comments for the remove button apply to the add button.

ni.appendChild( newdiv);
}

//remove a listen textfield in the apache config form
function removeListen(di vNum){
var d = document.getEle mentById('liste ndiv');
var olddiv = document.getEle mentById(divNum );
d.removeChild(o lddiv);

You could do:

var olddiv = document.getEle mentById(divNum );
olddiv.parentNo de.removeChild( olddiv);

Maybe when the above is fixed your other functions may work...

[...]
--
Rob

[Ed]

Hi Rob,

Many thanks for your detailed reply. I have updated my code as per your
suggestions, and it works now. The only snag I have is when I click on
a link on the page and then go back, my div element has vanished, and I
have to enter the form values again.

Any ideas how I could get round this?

Thanks,

Ed.

<code>
//add another listen textfield in the apache config form
function addListen(){
var olddiv = document.getEle mentById('liste ndiv');
var num = +document.getEl ementById("list endivval").valu e+1;
document.getEle mentById('liste ndivval').value = num;
var divIdName = "listen"+nu m;

var newdiv = document.create Element('div');
newdiv.id = divIdName;

//add text box
var otext = document.create Element('input' );
otext.type = 'text';
otext.size=21;
otext.maxlength =21;
newdiv.appendCh ild(otext);
//add space
var onbsp = document.create TextNode(" ");
newdiv.appendCh ild(onbsp);

//add minus button
var oBut = document.create Element('input' );
oBut.type = 'button';
oBut.value = '-';
oBut.onclick = function() {removeListen(d ivIdName);};
newdiv.appendCh ild(oBut);

//add plus button
oBut = document.create Element('input' );
oBut.type = 'button';
oBut.value = '+';
oBut.onclick = function() {addListen();};
newdiv.appendCh ild(oBut);

olddiv.appendCh ild(newdiv);
}

//remove a listen textfield in the apache config form
function removeListen(di vNum){
var d = document.getEle mentById('liste ndiv');
var olddiv = document.getEle mentById(divNum );
d.removeChild(o lddiv);
}

//check listen values
function verifyListens() {
var d=document.apac heconfig;
var i=0;
var listenPattern=/^listen/;
for(;d[i]!=null;i++){
if( d[i].name.match(lis tenPattern)){
if(!verifyListe nValue(d[i])){
d[i].focus();
return false;
}
}
}
}
</code>