Form input and Ajax

Discussion in 'JavaScript' started by cesarcesar, Feb 27, 2007.

0
  1. #1
    I'm trying to get this code to work dynamically. Basically i need the JS function to be generic per form and input textfield name. I believe my issue is in my form document declarations, my usage of the *dyn* variable.

    FYI, If i make the text input name *dyn*, it works great.

    Thanks. Cesar.

    Javascript 
    
<script language="JavaScript">
function getData(dyn)
{
	var req = null;

	document.this_form.dyn.value="Started...";
	if(window.XMLHttpRequest)
		req = new XMLHttpRequest();
	else if (window.ActiveXObject)
		req  = new ActiveXObject(Microsoft.XMLHTTP);

	req.onreadystatechange = function()
	{
		document.this_form.dyn.value="Wait server...";
		if(req.readyState == 4)
		{
			if(req.status == 200)
			{
				document.this_form.dyn.value="Received:" + req.responseText;
			}
			else
			{
				document.this_form.dyn.value="Error: returned status code " + req.status + " " + req.statusText;
			}
		}
	};
	req.open("POST", "get.php", true);
	req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	req.send(null);
}
</script>
    Code (markup):
    HTML 
    
<FORM name="this_form" method="POST" action="">
<INPUT type="BUTTON" value="Submit"  ONCLICK="getData('company_name')">
<input type="text" name="company_name" size="32" value="">
</FORM>
    Code (markup):
     
    cesarcesar, Feb 27, 2007 IP
  2. cesarcesar

    cesarcesar Peon

    Messages:
    188
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Here is working code to fill a text area with a value via ajax.
    
<!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" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script language="JavaScript">

function getData(dyn)
{
	var req = null;
    var input = document.getElementById(dyn);
	input.value = "Started...";
	if(window.XMLHttpRequest)
		req = new XMLHttpRequest();
	else if (window.ActiveXObject)
		req  = new ActiveXObject(Microsoft.XMLHTTP);

	req.onreadystatechange = function()
	{
		input.value = "Wait server...";
		if(req.readyState == 4)
		{
			if(req.status == 200)
			{
				input.value = "Received:" + req.responseText;
			}
			else
			{
				input.value = "Error: returned status code " + req.status + " " + req.statusText;
			}
		}
	};
	req.open("POST", "get.php", true); // returns string "working"
	req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	req.send(null);
}

</script>
</head>
<body>

<FORM name="this_form" method="POST" action="">
<INPUT type="BUTTON" value="Submit"  ONCLICK="getData('company_name')">
<input type="text" id="company_name" name="company_name" size="32" value="">
</FORM>
    Code (markup):
    </body>
    </html>
     
    cesarcesar, Feb 27, 2007 IP
  3. Aragorn

    Aragorn Peon

    Messages:
    1,491
    Likes Received:
    72
    Best Answers:
    1
    Trophy Points:
    0
    #3
    Use the following code to create the request object
    
if(window.XMLHttpRequest) {
	req = new XMLHttpRequest();
}else{
	try{ 
		req = new ActiveXObject('MSXML2.XMLHTTP');
	}catch(e){ 
		try { 
			req = new ActiveXObject('Microsoft.XMLHTTP');
		}catch(e){
			// Unsupported Browser
			return false;
		} 
	} 
}
    Code (markup):
    You forgot to put the quotes around 'Microsoft.XMLHTTP'
     
    Aragorn, Feb 27, 2007 IP