Issues with javascript in IE6

Question

leviathan185 14 Junior Poster

15 Years Ago

My issue may be similar to daved83's issue where my script works as designed in firefox but when used in IE6 (the only IE i have tried so far but matters because it will only be used on IE6 at this stage)

his was in AJAX and I am new to JavaScript and didnt understand his code that well.

The dynamic dropdown is supposed to come under the already populated table but in IE6 it removes the table and only populates the dynamic content.

here is my code

<!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>
<script type="text/javascript">
// <![CDATA[

  function generate()
  {
      var sms = ''

     var impact = document.sms.impacted.value;
     var status = document.sms.status.value;
     var action = document.sms.action.value;
     var BR = '\n';
     sms = sms + '<table name="table2" width="500" border="0" align="center">';
     sms = sms + '<tr><td>';
     sms = sms + '<textarea name="template" rows="10" cols="55">';
     sms = sms + 'Service Impacted: '+ impact + BR;
     sms = sms + 'Service Status  : '+ status + BR;
     sms = sms + 'Next Action     : '+ action + BR;
     sms = sms + '</textarea>';
     sms = sms + '</td></tr></table>';

     document.getElementById('sms').innerHTML=sms;
     //document.getElementById('blank').innerHTML='';
  }
  
  function noComms()
  {
  		var service = document.sms.impacted.value;
  		var istatus = 'Loss of '+service+' to site';
  		
  		var status = document.sms.status.value;
  		
  		status = istatus;
  }
// ]]>
</script>
<link href="scripts/imt.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript">
<!--

-->
</script>

<div id="page">
    <div id="wrapper">
        <div id="header"></div>
        <div id="topSpacer"></div>
        <div id="body">&nbsp;
        	<h2 align="center">The Fault logging assistant</h2>
        	<h3 align="center"></h3>
						<form name="sms" action="">
						 <table name="table" width="500" border="0" align="center">
						  <tr align="center">
						   <td colspan="2">
						    <h3>SMS Template Generator</h3>
						   </td>
						  </tr>
						  <tr>
						   <td><strong>Service Impacted: </strong></td>
						   <td>
						    <select name="impacted">
						     <option value="">-- Please Select --</option>
						     <option value="data">Data</option>
						     <option value="voice">Voice</option>
						    </select>
						   </td>
						  </tr>
						  <tr>
						   <td><strong>Service Status: </strong></td>
						   <td>
						    <input type="text" name="status" value="">
						   </td>
						  </tr>
						  <tr>
						    <td></td>
						    <!-- <td><input type="radio" name="noComms" onchange="noComms()">Click for loss of comms to site!</td> -->
						  </tr>
						  <tr>
						   <td><strong>Next Action: </strong></td>
						   <td>
						    <input type="text" name="action" value="">
						   </td>
						  </tr> 
						   <td><input type="button" name="button" value="Generate" onClick="generate()">
						  <tr>
						  </tr>
						  <tr>
						   <td colspan="2">
							 <br/>    
						   <br />
						   </td>
						  </tr>
						 </table>
						</form>
						&nbsp;
        </div>
        <div id="body">
        	<span id="sms"></span>
        </div>
        <div id="bottomSpacer"></div>
        <div id="footer">
        	SMS Template Generator V-1.0    Designed By xxxx xxxxxx.  2009
        </div>      
    </div>
</div>
</body>
</html>

Is there a way to fix this for IE6?

javascript

2 Contributors
3 Replies
157 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by essential

essential 84 Posting Shark

15 Years Ago

Hi Lev,

i've made a lite modification inside your function and preserved all of your implemented lines:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="./scripts/imt.css" media="all"?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>www.daniweb.com</title>
<link rel="stylesheet" type="text/css" href="./scripts/imt.css" media="all" />
<script type="text/javascript">
// <![CDATA[

function generate( ) {
   var form = document.getElementById("sms");
   try {
      var table = form.children[ 0 ];
      var textArea = document.createElement( "textarea" );
      textArea.rows = "10";
      textArea.cols = "55";
      textArea.id = "template";
      textArea.name = "template"; 
      var text = { 
impacted : "Service Impacted: ", _status : "Service Status: ", _action : "Next Action: " };
         for ( var val in text ) {
         textArea.appendChild( document.createTextNode( text[ val ] + form[ val ].value + "\n" ));
         } 
      var newTable = table.cloneNode( 0 );
      var tBody = document.createElement( "tbody" );
      newTable.appendChild( tBody );
      var row = tBody.insertRow( -1 );
      row.insertCell( -1 ).appendChild((( document.createDocumentFragment()).appendChild( textArea )));
      form.replaceChild( newTable, table );
   } catch( e ) {
// Your implemented lines: 
   var sms = ''
   var impact = document.sms.impacted.value;
   var status = document.sms.status.value;
   var action = document.sms.action.value;
   var BR = '\n';
   sms = sms + '<table name="table2" width="500" border="0" align="center">';
   sms = sms + '<tr><td>';
   sms = sms + '<textarea name="template" rows="10" cols="55">';
   sms = sms + 'Service Impacted: '+ impact + BR;
   sms = sms + 'Service Status  : '+ status + BR;
   sms = sms + 'Next Action     : '+ action + BR;
   sms = sms + '</textarea>';
   sms = sms + '</td></tr></table>';
   form.innerHTML= sms;
   }
}
  
  function noComms()
  {
        var service = document.sms.impacted.value;
        var istatus = 'Loss of '+service+' to site';
        
        var status = document.sms.status.value;
        
        status = istatus;
  } 

// ]]>
</script>
</head>
<body>
<div id="page">
<div id="wrapper">
<div id="header"></div> <!-- div :: #header -->

<div id="topSpacer"></div> <!-- div :: #topSpacer -->

<div id="body">&#32;
<h2 align="center">The Fault logging assistant</h2>
<h3 style="text-align : center"></h3>
<form id="sms" name="sms" action="#" onsubmit="return false;">
<table id="table" frame="box" rules="all" width="500" border="0" align="center">
                    <tr align="center">
                     <td colspan="2">
                      <h3>SMS Template Generator</h3>
                     </td>
                    </tr>
                    <tr>
                     <td><strong>Service Impacted: </strong></td>
                     <td>
                      <select id="impacted" name="impacted" size="1">
                       <option value="">-- Please Select --</option>
                       <option value="data">Data</option>
                       <option value="voice">Voice</option>
                      </select>
                     </td>
                    </tr>
                    <tr>
                     <td><strong>Service Status: </strong></td>
                     <td>
                      <input type="text" id="_status" name="_status" value="" />
                     </td>
                    </tr>
                    <tr>
                      <td></td>
                      <!-- <td><input type="radio" name="noComms" onchange="noComms()">Click for loss of comms to site!</td> -->
                    </tr>
                    <tr>
                     <td><strong>Next Action: </strong></td>
                     <td>
                      <input type="text" id="_action" name="_action" value="" />
                     </td>
                    </tr> 
                     <td><input type="button" name="button" value="Generate" onClick="generate()">
                    <tr>
                    </tr>
                    <tr>
                     <td colspan="2">
                      <br/>    
                     <br />
                     </td>
                    </tr>
                   </table>
                  </form>
                  &nbsp;
        </div>
        <div id="bOdy">
<!-- 
*******************
~ Conflicting id's 
*******************
   [ div ] : #body 2x 
   [ form, span ] : #sms 2x 
--> 
<span id="sMs"></span>
        </div>
        <div id="bottomSpacer"></div>
        <div id="footer">
           SMS Template Generator V-1.0    Designed By xxxx xxxxxx.  2009
        </div>      
    </div>
</div>
</body>
</html>

hope it grabs what you need...

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

leviathan185 14 Junior Poster · Answer 1 · 2009-08-28T04:48:52+00:00

Hi Lev,

i've made a lite modification inside your function and preserved all of your implemented lines:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="./scripts/imt.css" media="all"?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>www.daniweb.com</title>
<link rel="stylesheet" type="text/css" href="./scripts/imt.css" media="all" />
<script type="text/javascript">
// <![CDATA[

function generate( ) {
   var form = document.getElementById("sms");
   try {
      var table = form.children[ 0 ];
      var textArea = document.createElement( "textarea" );
      textArea.rows = "10";
      textArea.cols = "55";
      textArea.id = "template";
      textArea.name = "template"; 
      var text = { 
impacted : "Service Impacted: ", _status : "Service Status: ", _action : "Next Action: " };
         for ( var val in text ) {
         textArea.appendChild( document.createTextNode( text[ val ] + form[ val ].value + "\n" ));
         } 
      var newTable = table.cloneNode( 0 );
      var tBody = document.createElement( "tbody" );
      newTable.appendChild( tBody );
      var row = tBody.insertRow( -1 );
      row.insertCell( -1 ).appendChild((( document.createDocumentFragment()).appendChild( textArea )));
      form.replaceChild( newTable, table );
   } catch( e ) {
// Your implemented lines: 
   var sms = ''
   var impact = document.sms.impacted.value;
   var status = document.sms.status.value;
   var action = document.sms.action.value;
   var BR = '\n';
   sms = sms + '<table name="table2" width="500" border="0" align="center">';
   sms = sms + '<tr><td>';
   sms = sms + '<textarea name="template" rows="10" cols="55">';
   sms = sms + 'Service Impacted: '+ impact + BR;
   sms = sms + 'Service Status  : '+ status + BR;
   sms = sms + 'Next Action     : '+ action + BR;
   sms = sms + '</textarea>';
   sms = sms + '</td></tr></table>';
   form.innerHTML= sms;
   }
}
  
  function noComms()
  {
        var service = document.sms.impacted.value;
        var istatus = 'Loss of '+service+' to site';
        
        var status = document.sms.status.value;
        
        status = istatus;
  } 

// ]]>
</script>
</head>
<body>
<div id="page">
<div id="wrapper">
<div id="header"></div> <!-- div :: #header -->

<div id="topSpacer"></div> <!-- div :: #topSpacer -->

<div id="body"> 
<h2 align="center">The Fault logging assistant</h2>
<h3 style="text-align : center"></h3>
<form id="sms" name="sms" action="#" onsubmit="return false;">
<table id="table" frame="box" rules="all" width="500" border="0" align="center">
                    <tr align="center">
                     <td colspan="2">
                      <h3>SMS Template Generator</h3>
                     </td>
                    </tr>
                    <tr>
                     <td><strong>Service Impacted: </strong></td>
                     <td>
                      <select id="impacted" name="impacted" size="1">
                       <option value="">-- Please Select --</option>
                       <option value="data">Data</option>
                       <option value="voice">Voice</option>
                      </select>
                     </td>
                    </tr>
                    <tr>
                     <td><strong>Service Status: </strong></td>
                     <td>
                      <input type="text" id="_status" name="_status" value="" />
                     </td>
                    </tr>
                    <tr>
                      <td></td>
                      <!-- <td><input type="radio" name="noComms" onchange="noComms()">Click for loss of comms to site!</td> -->
                    </tr>
                    <tr>
                     <td><strong>Next Action: </strong></td>
                     <td>
                      <input type="text" id="_action" name="_action" value="" />
                     </td>
                    </tr> 
                     <td><input type="button" name="button" value="Generate" onClick="generate()">
                    <tr>
                    </tr>
                    <tr>
                     <td colspan="2">
                      <br/>    
                     <br />
                     </td>
                    </tr>
                   </table>
                  </form>
                  &nbsp;
        </div>
        <div id="bOdy">
<!-- 
*******************
~ Conflicting id's 
*******************
   [ div ] : #body 2x 
   [ form, span ] : #sms 2x 
--> 
<span id="sMs"></span>
        </div>
        <div id="bottomSpacer"></div>
        <div id="footer">
           SMS Template Generator V-1.0    Designed By xxxx xxxxxx.  2009
        </div>      
    </div>
</div>
</body>
</html>

hope it grabs what you need...

Ha ha I cant beleive I made such a noob mistake giving 2 elements the same ID:$

Thank you so much essential, the code you have provided will also give me something to learn as well. Cheers

essential 84 Posting Shark Featured Poster · Answer 2 · 2009-08-28T09:40:29+00:00

essential 84 Posting Shark

15 Years Ago

You are always welcome :)