javascript code not working in ie but working in firefox

sukanya.paul · February 4, 2009

hi,

i had written a code for creating modules and sub modules dynamically. the problem is the code is working in mozilla but not in ie.. this is a big problem.can anyone help me solve it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="js/menu.css">
<title>Employ Me - Creating Feature List</title>
<link href="images/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var addInput_count = 1;
var addSec_count = 1;
function addInput() {
var c = addInput_count++;
var parent = document.getElementById('myform')
var objBr = document.createElement('br');
var objNew = document.createElement('div');
objNew.setAttribute('name', 'mod_div_' + c);
objNew.setAttribute('id', 'mod_div_' + c);
var mod_id = 'mod_div_' + c ;
var objInput1 = document.createElement('input');
objInput1.setAttribute('type', 'text');
objInput1.setAttribute('style','margin-left:50px;');
objInput1.setAttribute('name', 'module_' + c);
var objB = document.createElement('button');
objB.setAttribute('type', 'button');
objB.setAttribute('name', 'addSec');
objB.setAttribute('style', 'margin-left:5px;');
objB.setAttribute('value', c);
objB.setAttribute('onclick', 'alert("hello");');
objB.appendChild(document.createTextNode('add sub module'));
var objC = document.createElement('button');
objC.setAttribute('type', 'button');
objC.setAttribute('name', 'remMod');
objC.setAttribute('style', 'margin-left:5px;');
objC.setAttribute('value', c);
objC.setAttribute('onclick', 'this.parentNode.parentNode.removeChild(this.parentNode);');
objC.appendChild(document.createTextNode('Remove Module'));
objNew.appendChild(document.createElement('br'));

var myText = document.createTextNode("Add Module:");
var font = document.createElement("font");
font.setAttribute('style', 'color:#000066;font-size:10px;font-weight:normal;');
font.appendChild(myText);
objNew.appendChild(font);
objNew.appendChild(objInput1);
objNew.appendChild(objB);objNew.appendChild(objC);
objNew.appendChild(document.createElement('br'));
objNew.appendChild(document.createElement('br'));
parent.appendChild(objNew);
}
function removeElement(divNum) {
  var d = document.getElementById('myform');
  var olddiv = document.getElementById('mod_div_'+divNum);
  d.removeChild(olddiv);
}
function addSec(c) {
var count=0;
var s = addSec_count++;
var parent1 = document.getElementById('mod_div_' + c)
var objNewsec = document.createElement('div');
objNewsec.setAttribute('name', 'sec_div_' + c+'_'+s);
objNewsec.setAttribute('id', 'sec_div_' + c+'_'+s);
var objC = document.createElement('button');
objC.setAttribute('type', 'button');
objC.setAttribute('name', 'addSec');
objC.setAttribute('value', s);
objC.setAttribute('onclick', 'javascript:addSubSec(this.value);');
objC.appendChild(document.createTextNode('add sub section'));
var myText = document.createTextNode("Add Sub Module:");
var font = document.createElement("font");
font.setAttribute('style', 'color:#000066;font-size:10px;font-weight:normal;');
font.appendChild(myText);
objNewsec.appendChild(font);
var objInput2 = document.createElement('input');
objInput2.setAttribute('type', 'text');
objInput2.setAttribute('name', 'Section-'+c +'_'+s);
objInput2.setAttribute('style','margin-left:75px;');
objNewsec.appendChild(objInput2);
objNewsec.appendChild(document.createElement('br'));
parent1.appendChild(objNewsec);
}
</script>

</head>
<body  leftmargin="2" topmargin="0" marginheight="2" marginwidth="0">

<table width="101%" height="50%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F6F7F2">
<!-- First Row -->
<tr>
<!-- Second Row End -->
    <td height="425" valign="top" bgcolor="f6f7f2"><div align="center">
        <table width="100%" cellpadding="0" cellspacing="0">
          <tr>
            <td align="center"><span class="bigfnt">
		Preparing Feature List </span></td>
          </tr>
        </table>
<br />      </div>
    <table width="97%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#D0CDAE" >
      <tr>
          <td align="center" >
	  <form method="POST" action="form_dyn.php" onSubmit="return check()">
        	<table width="80%" border="0" cellspacing="0" cellpadding="0">
		   <tr><td colspan="2"> </td></tr>
		  <tr>
			<td valign="top" class="fields">Project Name : </td>
			<td><input type="text" name="txtproj_name" id="txtproj_name" /><br /></td>
		  </tr>
		  <tr><td colspan="2"> </td></tr>
		  <tr>
			<td valign="top" class="fields">Scope of Project</td>
			<td><textarea name="txtproj_scope" id="txtproj_scope" rows="10" cols="50" ></textarea></td>
		  </tr>
		  <tr><td colspan="2"> </td></tr>
		  </tr>
		  <tr>
		  <td colspan="2">
		  <div style="border:thin solid #000000; overflow:scroll; width:800px; height:300px;">
  <input name="moreMods" type="button" id="moreMods" onclick="addInput();" value="Add Module" /><br /><br />
  <div id="myform"></div>
</div>
		  </td>
		  </tr>
		  <tr><td colspan="2"> </td></tr>
		  <tr>
			<td colspan="2" align="center"><input type="submit" name="submit" value="submit" /></td>
		  </tr>
		  <tr><td colspan="2"> </td></tr>
	    </table>
		</form>
	  </td>
      </tr>
    </table></td></tr>
<tr>
  <td height="15" valign="top" bgcolor="f6f7f2"><?php //include("footer.php") ?></td>
</tr>
</table>
</body>

</html>

Thanks in advance,

Sukanya

Psycho · February 4, 2009

It looks as if IE is not pardsing some of the attributes for the button element the same as FF is. I *think* IE is trying to create an INPUT BUTTON and FF is creating just a BUTTON. I say this because the value and the textnode are concatenated in the IE scenario.

I know I've done a similar script in the past, but I can't find it at the moment. You should be able to find a solution with some Googling. However, in the process of evaluating your code I have rewritten it to be much more flexible and readable.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="js/menu.css">
<title>Employ Me - Creating Feature List</title>
<link href="images/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

var addInput_count = 1;
var addSec_count = 1;

function addInput()
{
var c = addInput_count++;

var newDiv = createDiv('mod_div_' + c, 'mod_div_' + c);
    newDiv.appendChild(document.createElement('br'));
    newDiv.appendChild(createText('Add Module:', 'color:#000066;font-size:10px;font-weight:normal;'));
    newDiv.appendChild(createInput('text', 'module_' + c, 'margin-left:50px;'));
    newDiv.appendChild(createButton('addSec', c, 'add sub module', 'margin-left:5px;', 'alert("hello");'));
    newDiv.appendChild(createButton('remMod', c, 'Remove Module', 'margin-left:5px;', 'this.parentNode.parentNode.removeChild(this.parentNode);'));
    newDiv.appendChild(document.createElement('br'));
    newDiv.appendChild(document.createElement('br'));

document.getElementById('myform').appendChild(newDiv);
}
function removeElement(divNum)
{
var olddiv = document.getElementById('mod_div_'+divNum);
document.getElementById('myform').removeChild(olddiv);
}
function addSec(c)
{
//var count=0;
var s = addSec_count++;

var objNewsec = createDiv('sec_div_' + c+'_'+s, 'sec_div_' + c+'_'+s);
    objNewsec.appendChild(createText("Add Sub Module:", 'color:#000066;font-size:10px;font-weight:normal;'));
    objNewsec.appendChild(createInput('text', 'Section-'+c +'_'+s, 'margin-left:75px;'));
    objNewsec.appendChild(createButton('addSec', s, 'add sub section','', 'javascript:addSubSec(this.value);'));
    objNewsec.appendChild(document.createElement('br'));

document.getElementById('mod_div_' + c).appendChild(objNewsec);
}
function createDiv(name, id)
{
var divObj = document.createElement('div');
    divObj.setAttribute('name', name);
    divObj.setAttribute('id', id);
return divObj;
}
function createText(text, style)
{
var textObj = document.createTextNode(text);
var spanObj = document.createElement("span");
    spanObj.setAttribute('style', style);
    spanObj.appendChild(textObj);
return spanObj;
}
function createInput(type, name, style)
{
var inptObj = document.createElement('input');
    inptObj.setAttribute('type', type);
    inptObj.setAttribute('name', name);
    inptObj.setAttribute('style', style);
return inptObj;
}

function createButton(name, value, text, style, onclick)
{
var bttnObj = document.createElement('button');
    bttnObj.setAttribute('type', 'button');
    bttnObj.setAttribute('name', name);
    bttnObj.setAttribute('value', value);
    bttnObj.setAttribute('style', style);
    bttnObj.setAttribute('onclick', onclick);
//	    bttnObj.appendChild(document.createTextNode(text));
return bttnObj;
}
</script>

</head>
<body  leftmargin="2" topmargin="0" marginheight="2" marginwidth="0">

<table width="101%" height="50%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F6F7F2">
<!-- First Row -->
<tr>
<!-- Second Row End -->
    <td height="425" valign="top" bgcolor="f6f7f2"><div align="center">
        <table width="100%" cellpadding="0" cellspacing="0">
          <tr>
            <td align="center"><span class="bigfnt">
		Preparing Feature List </span></td>
          </tr>
        </table>
<br />      </div>
    <table width="97%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#D0CDAE" >
      <tr>
          <td align="center" >
	  <form method="POST" action="form_dyn.php" onSubmit="return check()">
        	<table width="80%" border="0" cellspacing="0" cellpadding="0">
		   <tr><td colspan="2"> </td></tr>
		  <tr>
			<td valign="top" class="fields">Project Name : </td>
			<td><input type="text" name="txtproj_name" id="txtproj_name" /><br /></td>
		  </tr>
		  <tr><td colspan="2"> </td></tr>
		  <tr>
			<td valign="top" class="fields">Scope of Project</td>
			<td><textarea name="txtproj_scope" id="txtproj_scope" rows="10" cols="50" ></textarea></td>
		  </tr>
		  <tr><td colspan="2"> </td></tr>
		  </tr>
		  <tr>
		  <td colspan="2">
		  <div style="border:thin solid #000000; overflow:scroll; width:800px; height:300px;">
  <input name="moreMods" type="button" id="moreMods" onclick="addInput();" value="Add Module" /><br /><br />
  <div id="myform"></div>
</div>
		  </td>
		  </tr>
		  <tr><td colspan="2"> </td></tr>
		  <tr>
			<td colspan="2" align="center"><input type="submit" name="submit" value="submit" /></td>
		  </tr>
		  <tr><td colspan="2"> </td></tr>
	    </table>
		</form>
	  </td>
      </tr>
    </table></td></tr>
<tr>
  <td height="15" valign="top" bgcolor="f6f7f2"><?php //include("footer.php") ?></td>
</tr>
</table>
</body>

</html>

Sign In

javascript code not working in ie but working in firefox

Recommended Posts

sukanya.paul

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information