Post not able to capture value in Chrome and Firefox

Dear All,
I have form where I add dynamic html element as below. In the php code (getMasterList.php) via ajax I have built the full drop down list. So when I post the form in IE when I do like this $masterID=$_POST[‘masterID’]; I am able to capture the form value. But in both firefox and chrome it shows me empty. Any solution please?

function getMaster(entID,nextElement) 
{ 
var table = document.getElementById('myTable'); 
var rowCount = table.rows.length; 
//alert("Row count : "+rowCount); 

if(rowCount>2) 
{ 
for(var i=2; i<rowCount; i++) 
{ 
var row = table.rows[i]; 

table.deleteRow(i); 
rowCount--; 
i--; 
} 
} 

differentiator=Math.floor(Math.random()*50000); 
//if (str=="") 
// { 
// document.getElementById("cbTrailerList").innerHTML=""; 
// return; 
// } 
if (window.XMLHttpRequest) 
{// code for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp=new XMLHttpRequest(); 
} 
else 
{// code for IE6, IE5 
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
xmlhttp.onreadystatechange=function() 
{ 
if (xmlhttp.readyState==4 && xmlhttp.status==200) 
{ 
//alert("Test : "+xmlhttp.responseText); 
//document.getElementById("cbTrailerList").innerHTML=xmlhttp.responseText; 
var x=document.getElementById('myTable').insertRow(2); 
var y=x.insertCell(0); 
var z=x.insertCell(1); 
y.innerHTML="<label class=description for=element_1>Master <font color='red'>*</font></label> "; 
z.innerHTML=xmlhttp.responseText; 
var a=document.getElementById('myTable').insertRow(3); 
var b=a.insertCell(0); 
var c=a.insertCell(1); 
b.innerHTML=""; 
c.innerHTML="<p class=error id='masterIDError'>"; 

if(nextElement=="trailer") 
{ 
getTrailer(entID); 
} 
else 
{ 
getSlaves(entID); 
} 
} 

} 
xmlhttp.open("GET","getMasterList.php?e="+entID+"&d="+differentiator,true); 
xmlhttp.send(); 


} 

You’re using GET, but it sounds like you need to use POST in your request to getMasterList.php.

innerHTML has several limitations.

Here’s one possible solution
DOMscripting: Fixing innerHTML

Dear Paul,
Do you think below is right I have tried to adapt based on your example.

var newdiv = document.createElement(“div”);
newdiv.innerHTML = xmlhttp.responseText;
//var container = document.getElementById(“container”);
//container.appendChild(newdiv);

  y.innerHTML="&lt;label class=description for=element_1&gt;Master &lt;font color='red'&gt;*&lt;/font&gt;&lt;/label&gt; "; 
  //z.innerHTML=xmlhttp.responseText;
  
  z.appendChild(newdiv);

Let’s get rid of those commented-out lines and see if things make sense.


var newdiv = document.createElement("div");
newdiv.innerHTML = xmlhttp.responseText;
y.innerHTML="<label class=description for=element_1>Master <font color='red'>*</font></label> "; 
z.appendChild(newdiv);

Assuming that y and z are meaningful locations, it seems okay.

If you don’t want the div container though, you can instead append the first child of the div and keep on looping until no more child nodes remain.

Dear Paul,
Below is my full code excluding the comments. So first I will insert a row and represent as x then I add two columns. Is this fine? I am not clear about this “If you don’t want the div container though, you can instead append the first child of the div and keep on looping until no more child nodes remain.”. Currently actually I dont have a div in my codes so what should I put instead of the div. Just to inform you further xmlhttp.responseText is a drop down list completely built in the php codes and just insert here.

 var x=document.getElementById('myTable').insertRow(2); 
  var y=x.insertCell(0); 
  var z=x.insertCell(1); 
  
  var newdiv = document.createElement("div");
  newdiv.innerHTML = xmlhttp.responseText;           
  y.innerHTML="&lt;label class=description for=element_1&gt;Master &lt;font color='red'&gt;*&lt;/font&gt;&lt;/label&gt; ";      
  z.appendChild(newdiv);

Yes that’s fine, apart from of course the horror of using tables for layout.

The variable called newdiv is the div.

The responseText is put inside of that div, and that div is then appended on the cell referred to by the z variable.


<td> <!-- from insertCell -->
    <div> <!-- from createElement('div') -->
        <!-- content from responseText -->
    </div>
</td>

If you don’t want that div to be involved in things, you can instead just loop through the div and append to the DOM the contents of the div instead.


while (newdiv.hasChildNodes()) {
    z.appendChild(newdiv.firstChild);
}

which results in the following type of HTML structure:


<td> <!-- from insertCell -->
    <!-- content from responseText -->
</td>

That’s the thing. You don’t change that part at all.

That’s right.

Dear Paul,
I do not what the div to be involved but first how to define the var newdiv = document.createElement(“div”); what must I replace it with? Beside table what layout do you normally suggest or use?

I do not what the div to be involved but first how to define the var newdiv = document.createElement(“div”); what must I replace it with? [/quote]

Leave that part as it is. You need to set the innerHTML of something, so that newdiv variable just remains as a javascript variable, unattached to the DOM.

That’s something for the CSS boys to go through with you about.
Just as a taster though, have a look at these CSS Zen Garden designs

Even though the presentation of the content looks very different for all of those designs, the HTML content remains exactly the same for each and every layout that you see there. It’s a testimony to the power of the dark side CSS presentation.

Dear Paul,
So meaning to say I just define like this a new var newdiv=“”;. Then I run the while loop is it?

The innerHTML property must be set on an element, otherwise it won’t work.

Dear Paul,
If that is the case then what must I replace this var newdiv = document.createElement(“div”); with? Because if I define just blank like this var newdiv=“”; is wrong too right?

Dear Paul,
So in mycase I will get those extra divs right? I think that is fine right is that going to cause any harm? No right only extra codes?

No you will not, because the newdiv variable is not attached to the page. By holding it separate from the page you can loop through it and pluck bits from inside of the div and put those bits on the page.

Dear Paul,
But earlier your state that this is what will happen with the extra div right.

<td> <!-- from insertCell –>
<div> <!-- from createElement(‘div’) –> <!-- content from responseText –> </div>
</td>

That was showing you how your existing solution affects the HTML contents of the page.

You will see after that a different version without the div part, where a while loop is used to move parts out of the div variable, and on to the page.

Dear Paul,
Ok I got it just use the while loop will solve the div problem.

Dear Paul,
I have tried something like this, it is able to build the drop down list with all the values but when I sumbit on Firefox the same problem is empty but IE is again ok.

var x=document.getElementById(‘myTable’).insertRow(2);
var y=x.insertCell(0);
var z=x.insertCell(1);

  var newdiv = document.createElement("div");
  newdiv.innerHTML = xmlhttp.responseText;
  y.innerHTML="&lt;label class=description for=element_1&gt;Master &lt;font color='red'&gt;*&lt;/font&gt;&lt;/label&gt; "; 
  while (newdiv.hasChildNodes()) 
  {    
    z.appendChild(newdiv.firstChild);      	
  }

On Firefox, can you confirm that xmlhttp.responseText contains anything?