Ajax loaded element not recognized in ajax post send(element)?

[crobinson42]

I have a div that is loaded via ajax. In the div is a select box. I am having trouble getting the value from the select box

function testA(){
  	var test=document.getElementById("toUser").value;
	alert(test);
}

^ This does not work.

function testA(){
  	var test=document.getElementById("toUser");
	alert(test);
}

^ This returns null.... any idea?

Ultimately i'm trying to pass the variable 'test' via ajax post request (ie: xmlhttp.send(test) but when i specify .value on the var it jams the ajax request up?

[jscheuer1]

Those tests most likely mean that, at the time they're executed there either is no element with that id, or that there are more than one element with that id.

Some browsers will see a form element with a name as the same thing as one with an id, but others will not.

If you're importing the form via AJAX, it might be written in non-standard HTML that the browser cannot see as containing an element with that id.

Another possibility is that, if those aren't the exact functions, and they're created on the fly, that at the time they're created there's no element by that id or more than one.

[crobinson42]

function testAjaxElement(){
  	var testElement=document.getElementById("ajaxLoadedElement").value;
	alert("Ajax Loaded Element= "+testElement);
}

^This works

xmlhttp.open("POST","new_msg_save.php",true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xmlhttp.send("test="+document.getElementById("sbj").value); 

^This does not....

xmlhttp.open("POST","new_msg_save.php",true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xmlhttp.send("test=test value"); 

^This works

I'm so confused about this because the page is recognizing the element on the alert() and when you hard code a value in the send() but hangs up the ajax request when you use document.getElementById().value?!

[jscheuer1]

Assuming that there is such an element with that id and that it has a value property, it may be that the value is one that cannot be processed that way. Try:

xmlhttp.open("POST","new_msg_save.php",true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
var data = encodeURIComponent(document.getElementById("sbj").value);
xmlhttp.send("test=" + data);

Or (harder for humans to read, but avoids using a variable name which might already be in use for something else):

xmlhttp.open("POST","new_msg_save.php",true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xmlhttp.send("test=" + encodeURIComponent(document.getElementById("sbj").value));

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[crobinson42]

encodeURIComponent() did not work either, the debug tool in firefox says element null -ajax still hangs up


http://redshielddefense.com/test/9apr12/test.php

[jscheuer1]

The problem is that you're wiping out the form before you get the value from it:

function ajaxSaveMsg(divTag)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  	//loading animation
	document.getElementById([divTag]).innerHTML="loading...";

	
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById([divTag]).innerHTML=xmlhttp.responseText;
	parent.calcHeight();
    }

  }	
	
xmlhttp.open("POST","new_msg_save.php",true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xmlhttp.send("sbj=" + encodeURIComponent(document.getElementById("sbj").value));

}.

You can probably do like so:

function ajaxSaveMsg(divTag)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

	var data = document.getElementById("sbj").value;

  	//loading animation
	document.getElementById([divTag]).innerHTML="loading...";

	
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById([divTag]).innerHTML=xmlhttp.responseText;
	parent.calcHeight();
    }

  }	
	
xmlhttp.open("POST","new_msg_save.php",true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xmlhttp.send("sbj=" + data);

}

Incidentally, parent.calcHeight(); is not a function and is causing an error. So either remove it from this and the GET function (the one named ajaxRequest) or create/define it. Since it comes after everything else is done, it doesn't appear to cause any real problems. But it might at some point.

[crobinson42]

Man, thanks a ton! This was a real hair puller!!