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.getElementById('listendiv');
var numi = document.getElementById('listendivval');
var num = (document.getElementById("listendivval").value -1)+
2;
numi.value = num;
var divIdName = "listen"+num;
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);
var htmlstr="<td><input type=text id="+divIdName+"
name="+divIdName+" size=21 maxlength=21 />&nbsp;";
htmlstr=htmlstr+"<input type=button value=\" -\"
onclick=\"javascript:removeListen(\'" + divIdName + "\');\">&nbsp;";
htmlstr=htmlstr+"<input type=button value=\" +\"
onclick=\"javascript:addListen();\" /></td>";
newdiv.innerHTML=htmlstr;
ni.appendChild(newdiv);
}

//remove a listen textfield in the apache config form
function removeListen(divNum){
var d = document.getElementById('listendiv');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}

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

//check listen values
function checklistens(divNum){
var num = document.getElementById("listendivval").value;
var lnum= "listen"+num;
var numi = document.getElementById(lnum).value;
alert("numi="+numi);
var numi = document.getElementById(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]

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.getElementById('listendiv');
var numi = document.getElementById('listendivval');
var num = (document.getElementById("listendivval").value -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.getElementById("listendivval").value+1;

numi.value = num;

Unless you are going to use numi somewhere else, just do:

document.getElementById('listendivval') = num;

var divIdName = "listen"+num;
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);

Why not access the attribute directly:

newdiv.id = 'listen' + num;

var htmlstr="<td><input type=text id="+divIdName+"
name="+divIdName+" 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=\"javascript:removeListen(\'" + divIdName + "\');\">&nbsp;";

There is no need for 'javascript:' in the value of an onclick attribute.

Your button can be:

var oBut = document.createElement('input');
oBut.type = 'button';
oBut.value = '-';
oBut.onclick = function() {removeListen(newdiv);};
newdiv.appendChild(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=\"javascript:addListen();\" /></td>";
newdiv.innerHTML=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(divNum){
var d = document.getElementById('listendiv');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);

You could do:

var olddiv = document.getElementById(divNum);
olddiv.parentNode.removeChild(olddiv);

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

[...]

 

[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.getElementById('listendiv');
var num = +document.getElementById("listendivval").value+1;
document.getElementById('listendivval').value = num;
var divIdName = "listen"+num;

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

//add text box
var otext = document.createElement('input');
otext.type = 'text';
otext.size=21;
otext.maxlength=21;
newdiv.appendChild(otext);


//add space
var onbsp = document.createTextNode(" ");
newdiv.appendChild(onbsp);

//add minus button
var oBut = document.createElement('input');
oBut.type = 'button';
oBut.value = '-';
oBut.onclick = function() {removeListen(divIdName);};
newdiv.appendChild(oBut);

//add plus button
oBut = document.createElement('input');
oBut.type = 'button';
oBut.value = '+';
oBut.onclick = function() {addListen();};
newdiv.appendChild(oBut);

olddiv.appendChild(newdiv);
}

//remove a listen textfield in the apache config form
function removeListen(divNum){
var d = document.getElementById('listendiv');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}

//check listen values
function verifyListens(){
var d=document.apacheconfig;
var i=0;
var listenPattern=/^listen/;
for(;d!=null;i++){
if( d.name.match(listenPattern)){
if(!verifyListenValue(d)){
d.focus();
return false;
}
}
}
}
</code>