IE behaves differently for dynamic form. [Archive]

View Full Version : IE behaves differently for dynamic form.

abduraooft

01-27-2008, 12:07 PM

Hi ,

I'm trying to make a dynamic form, where I want to add/remove a set of controls (say for Name,Email etc).

Just started but IE behaves differently that FF in the beginning itself. "Add more" works but "Remove this" doesn't. Also the CSS for dynamically created elements doesn't work. Here is my code so far.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
font-size:12px;
}
div.details{
margin-top:10px;
clear:both;
}
div.details input{
border:1px solid #777;
font:12px Arial;
margin-right:5px;
width:150px;
}
label{
float:left;
width:150px;
padding-left:1px;
margin-right:5px;
border-right:1px solid #777;
}
fieldset#fieldset a{
border:1px solid #777;
background:lightblue;
padding:2px;
text-decoration:none;
}
</style>
<script type="text/javascript">

function addElement() {
var ni = document.getElementById('fieldset');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divId = 'row'+num;
newdiv.setAttribute('id',divId);
newdiv.setAttribute('class','details');

var Names= new Array('Name','Email','Company','Designation');
for(var i=0;i<4;i++){
var input=document.createElement('input');
input.setAttribute('type','text');
input.setAttribute('name',Names[i]+'_'+num);
newdiv.appendChild(input);
}

var a=document.createElement('a');
a.href='#';
a.setAttribute('onclick','removeElement("'+divId+'")');
a.innerHTML='Remove this';
newdiv.appendChild(a);

ni.appendChild(newdiv);
}
function removeElement(divNum) {
var d = document.getElementById('fieldset');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}
</script>
</head>

<body>
<form name="form1" id="form1">
<fieldset id="fieldset">
<label>Name</label><label>Email</label><label>Company</label><label>Designation</label>
<a href="#" onclick="addElement(); return false;">Add more</a>
<div id="row0" class="details">
<input type="text" class="text" name="Name_0"/><input type="text" name="Email_0"/><input type="text" name="Company_0"/><input type="text" name="Designation_0"/>
</div>

</fieldset>
<div>
<input type="submit" value="Submit"/>
<input type="hidden" value="0" id="theValue" />
</div>
</form>
</body>
</html>

Please give some hints.
regards,

abduraooft

01-27-2008, 03:41 PM

To make the client-side validation easier, I changed the name of fields. Now tha validation is also OK, but IE refuses to perform "Remove this" and give a uniform style to the new elements. I'm posting the full code to test easily at your end.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Dynamic Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
font:12px arial;
}
div.details{
margin-top:10px;
clear:both;
}
div.details input{
border:1px solid #777;
font:12px Arial;
margin-right:5px;
width:150px;
font-family:Arial;
}
label{
float:left;
width:150px;
padding-left:1px;
margin-right:5px;
border-right:1px solid #777;
}
fieldset#fieldset a{
border:1px solid #777;
background:lightblue;
padding:2px;
text-decoration:none;
}
</style>
<script type="text/javascript">

function addElement() {
var ni = document.getElementById('fieldset');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divId = 'row'+num;
newdiv.setAttribute('id',divId);
newdiv.setAttribute('class','details');
//
var Names= new Array('Name','Email','Company','Designation');
for(var i=0;i<4;i++){
var input=document.createElement('input');
input.setAttribute('type','text');
input.setAttribute('name',Names[i]+'[]');
input.setAttribute('style','font-family:arial;');
newdiv.appendChild(input);
}
var a=document.createElement('a');
a.href='#';
a.setAttribute('onclick','removeElement(\''+divId+'\');');
a.innerHTML='Remove this';
newdiv.appendChild(a);

ni.appendChild(newdiv);
}
function removeElement(divNum) {
var d = document.getElementById('fieldset');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}
function validate_this(){
var Error = false;
var f = document.forms.form_nominate;
var Names= new Array('Name','Email','Company','Designation');
var emailfilter=/^\w+[\+\.\w-]*@([\w-]+\.)*\w+[\w-]*\.([a-z]{2,4}|\d+)$/i;
for(i=0;i<4;i++){

switch(i){
case 0:
case 2:
case 3: var elmts = document.getElementsByName(Names[i]+'[]');
elmts = elmts.length ? elmts : [elmts];
for(j=0;j<elmts.length;j++){

trim_obj(elmts[j]);
if(elmts[j].value.length<5){
alert("Please complete the "+Names[i]);
elmts[j].focus();
return false;
}

}
break;
case 1:
var elmts = document.getElementsByName(Names[i]+'[]');
elmts = elmts.length ? elmts : [elmts];
for(j=0;j<elmts.length;j++){
trim_obj(elmts[j]);
if(!emailfilter.test(elmts[j].value)){
alert("Please complete the "+Names[i]);
elmts[j].focus();
return false;
}

}
break;
}
}

}
function trim_obj(obj){
obj.value=obj.value.replace(/^[\r\n\s]+|[\r\n\s]+$/g,'');
return(obj)
}
</script>
</head>

<body>
<form name="form_nominate" id="form1" method="post" onsubmit="validate_this(); return false;">
<fieldset id="fieldset">
<label>Name</label><label>Email</label><label>Company</label><label>Designation</label>
<a href="#" onclick="addElement(); return false;">Add more</a>

<div id="row0" class="details">
<input type="text" class="text" name="Name[]"/><input type="text" name="Email[]"/><input type="text" name="Company[]"/><input type="text" name="Designation[]"/>
</div>
</fieldset>
<div>
<input type="submit" value="Submit"/>
<input type="hidden" value="0" id="theValue" />
</div>
</form>
</body>
</html>

thanks.

A1ien51

01-27-2008, 09:00 PM

Well one issue I see will effect you on the server.

IE does not set name with ceateElement on form fields.

Look at an example I create here to show you how to avoidn that problem:
http://www.pascarello.com/examples/createElement.html

Eric

abduraooft

01-28-2008, 08:20 AM

Thanks for your reply.
But my validation works in IE also, where I've used
var elmts = document.getElementsByName(Names[i]+'[]');
to get the array of elements having a common name(asy Name[], Email[] etc). But as you said, the DOM inspector of web-developer toolbar can't see the name of them.

For the time being I'm focused on
var a=document.createElement('a');
a.href='#';
a.setAttribute('onclick','removeElement(\''+divId+'\');');
a.innerHTML='Remove this';
newdiv.appendChild(a);
function removeElement(divNum) {
var d = document.getElementById('fieldset');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
} Why that onclick doesn't work in IE? Any other alternatives to do this. (Hope the intention is clear from the full set of code)

It is interesting to see that only the dynamically created onclick has the problem. If I place an anchor
<a href="#" onclick="removeElement('row1');">Remove this</a>, then it can remove that div if exist. Again from the address bar I'm able to remove any existing div by
javascript:removeElement("rowN");void 0;, where N is order of any existing div. Please help me.

tagnu

01-28-2008, 09:36 AM

try this instead of onClick()
a.href='javascript:removeElement(\''+divId+'\');';

abduraooft

01-28-2008, 02:57 PM

try this instead of onClick()
a.href='javascript:removeElement(\''+divId+'\');';
Thanks, that did the trick.
Stupid IE(6) wants everything in nonstandard!

A1ien51

01-28-2008, 03:12 PM

abduraooft

01-28-2008, 03:55 PM

You probably needed to have a return false after the function call in the onclick. Also another thing IE is not the greatest with using setAttribute. Sometimes object.eventHandler is better.

Also are you testing on IE6 or 7?

Eric
Thanks for the info. I'm very new to this DOM methods. Tested in IE6 where return false is also not working with onclick as you suggested above.

Kor

01-29-2008, 08:23 AM

IE does not treat events and event handlers as attributes. The common simple solve is to use DOM 0 syntax, an anonymous, and a closure. On the other hand, if you want to use the index of a loop tour within a function called on a created event , you could create a custom property for that element:

for(var i=0;i<elem.length;i++){
elem[i].ind=i; //custom property
elem[i].onclick=function(){alert(this.ind)}//DOM 0 + anonymous + closure
}

abduraooft

01-29-2008, 08:42 AM

Thanks, that is very near!
Since I've to attach the onclick dynamically with each of the newly created anchors, I modified it to
a.href='#';
a.onclick=function(){removeElement(divId);}

_Aerospace_Eng_

01-29-2008, 08:54 AM

Does it work now?

abduraooft

01-29-2008, 10:10 AM

Does it work now?
Yes, do you see any reason why it shoudn't work?
The anchors work as desired in IE6,IE7 and FF, but there is a validation problem in IE.
The newly created elements are not counted towards the array of elements having the same name on form submit. Here is my new code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Dynamic Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
font:12px arial;
}
#fieldset div{
margin-top:10px;
clear:both;
}
#fieldset input{
border:1px solid #777;
font-size:12px;
margin-right:5px;
width:148px;
font-family:Arial;
}
label{
float:left;
width:150px;
padding-left:1px;
margin-right:5px;
border-right:1px solid #777;
text-align:center;
}
fieldset#fieldset a{
border:1px solid #777;
background:lightblue;
padding:2px;
text-decoration:none;
}
</style>
<script type="text/javascript">

function addElement() {
var ni = document.getElementById('fieldset');
var numi = document.getElementById('theValue');
//var num = (document.getElementById('theValue').value -1)+ 2;
var num = (numi.value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divId = 'row'+num;
newdiv.setAttribute('id',divId);
//
var Names= new Array('Name','Email','Company','Designation');
for(var i=0;i<4;i++){
var input=document.createElement('input');
input.setAttribute('type','text');
input.setAttribute('name',Names[i]+'[]');
newdiv.appendChild(input);
}
var a=document.createElement('a');

//a.href='javascript:removeElement(\''+divId+'\');';
a.href='#';
a.onclick=function(){removeElement(divId);}

a.innerHTML='Remove this';
newdiv.appendChild(a);

ni.appendChild(newdiv);
}
function removeElement(divNum) {
var d = document.getElementById('fieldset');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}
function validate_this(){
var Error = false;
var f = document.forms.form_nominate;
var Names= new Array('Name','Email','Company','Designation');
var emailfilter=/^\w+[\+\.\w-]*@([\w-]+\.)*\w+[\w-]*\.([a-z]{2,4}|\d+)$/i;
for(i=0;i<4;i++){

switch(i){
case 0:
case 2:
case 3: var elmts = document.getElementsByName(Names[i]+'[]');
elmts = elmts.length ? elmts : [elmts];
for(j=0;j<elmts.length;j++){
alert(elmts.length);
trim_obj(elmts[j]);
if(elmts[j].value.length<5){
alert("Please complete the "+Names[i]);
elmts[j].focus();
return false;
}

}
break;
case 1:
var elmts = document.getElementsByName(Names[i]+'[]');
elmts = elmts.length ? elmts : [elmts];
for(j=0;j<elmts.length;j++){
trim_obj(elmts[j]);
if(!emailfilter.test(elmts[j].value)){
alert("Please complete the "+Names[i]);
elmts[j].focus();
return false;
}
}
break;
}
}
f.submit();

}
function trim_obj(obj){
obj.value=obj.value.replace(/^[\r\n\s]+|[\r\n\s]+$/g,'');
return(obj)
}
</script>
</head>

<body>
<form name="form_nominate" method="post" onsubmit="validate_this(); return false;">
<fieldset id="fieldset">
<label>Name</label><label>Email</label><label>Company</label><label>Designation</label>
<a href="#" onclick="addElement(); return false;">Add more</a>
<div >
<input type="text" class="text" name="Name[]"/><input type="text" name="Email[]"/><input type="text" name="Company[]"/><input type="text" name="Designation[]"/>
</div>
</fieldset>
<div>
<input type="submit" value="Submit"/>
<input type="hidden" value="0" id="theValue" />
</div>
</form>
</body>
</html>
Please run the code to see the difference in behavior for alert(elmts.length); in IE & FF

Kor

01-29-2008, 01:15 PM

make it:

a.href='#';
a.onclick=function(){removeElement(divId);return false}

to avoid a scroll up...

woof... when you remove an element from a parent, you can not expect that the indexes you might have given to some name/id should change.

Have you considered a solution which:
1. uses cloneNode() to add new "lines"
2. automatically gives and re-indexes all the names/ids when adding a new "line"
3. automatically gives and re-indexes all the names/ids when removing a new "line"

Need an example?

Ryans

01-30-2008, 07:22 AM

Thanks for your reply.
I'm very new to this DOM methods. Tested in IE6 where return false is also not working with onclick as you suggested above

abduraooft

01-30-2008, 07:58 AM

Ryans,Don't be over smart :mad:

Kor

01-30-2008, 08:01 AM

Thanks for your reply.
I'm very new to this DOM methods. Tested in IE6 where return false is also not working with onclick as you suggested above
It works, unless the function has a syntax error. If so, IE stops the coding, so that it will never return false in the end...

abduraooft

01-30-2008, 08:05 AM

It works, unless the function has a syntax error. If so, IE stops the coding, so that it will never return false in the end...
Huh, that was a spam ,copied one of my previous reply. Just started today's experiments, I'll check and reply you soon :)

Kor

01-30-2008, 09:19 AM

Huh, that was a spam ,copied one of my previous reply. Just started today's experiments, I'll check and reply you soon :)
Spam? What spam? I don't get it...

abduraooft

01-30-2008, 10:18 AM

make it:

a.href='#';
a.onclick=function(){removeElement(divId);return false}

to avoid a scroll up...
That's fine!

woof... when you remove an element from a parent, you can not expect that the indexes you might have given to some name/id should change.

Have you considered a solution which:
1. uses cloneNode() to add new "lines"
2. automatically gives and re-indexes all the names/ids when adding a new "line"
3. automatically gives and re-indexes all the names/ids when removing a new "line"
Sorry, didn't get the term 're-indexing' and it's purpose in this context.
Need an example? really.. :), please show some.

PS: Spam? What spam? I don't get it... Oops, not you :)
http://www.codingforums.com/showpost.php?p=650356 (by me).
http://www.codingforums.com/showpost.php?p=650836
when I first viewed, felt like a dream, then scrolled up and found my own. He used another thread also. Too clever(?)

Kor

01-30-2008, 10:29 AM

oops... I remembered that several months ago, the Codingforums site was hack attacked. For about a half a day users were invited to double their user/password via a javascript prompt, which, obviously, sent their private data to a hacker's DB... A cheap javascript injection attack. Now, if you have fallen into that trap, that means someone else, maybe via a bot, uses your identity... Change your password and your mail respond address NOW.

abduraooft

02-04-2008, 03:50 PM

Still my client-side validation works with the help(?) of server-side script.
ie, If($error==1), populate all controls with php and then IE behaves gently!

$error=0;
foreach($_POST['Name'] as $Name )
if(strlen(trim($Name))<5)
$error=1;
if($error==0)
//proceed
else
{
$Name=$_POST['Name'];
$Email=$_POST['Email'];
$Company=$_POST['Company'];
$Designation=$_POST['Designation'];

for($i=0;$i<count($Name);$i++)
echo "<div >
<input type=\"text\" class=\"text\" name=\"Name[]\" value=\"{$Name[$i]}\"/>
<input type=\"text\" name=\"Email[]\" value=\"{$Email[$i]}\" />
<input type=\"text\" name=\"Company[]\" value=\"{$Company[$i]}\" />
<input type=\"text\" name=\"Designation[]\" value=\"{$Designation[$i]}\" />
</div>";
}