Post in Text Field from Ajax

spighita

Hi,
I'm trying to decide which route to go with this. I looked into AJAX and I'm learning as I read. I'm trying to figure out how to post a variable with going from AJAX to PHP and then coming back to HTML.

There may be other solutions to this and I'd love to hear them but I'd rather focus on this particular example if possible.

<html>
<body>
<script language="javascript" type="text/javascript">
<!-- 

function ajaxFunction(){
	var ajaxRequest;  

try{

	ajaxRequest = new XMLHttpRequest();
} catch (e){

	try{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){

			alert("No Browser Support!");
			return false;
		}
	}
}

ajaxRequest.onreadystatechange = function(){
	if(ajaxRequest.readyState == 4){
		document.myForm.var_1.value = ajaxRequest.responseText;
	}
}
ajaxRequest.open("GET", "test.php", true);
ajaxRequest.send(null); 
}

//-->
</script>

<form name='myForm' method="post">
Name: <input type='text' name='username' onChange="ajaxFunction();" /> <br />
Post Response from PHP: <input type='text' name='var_1'  size='50' />
</form>
</body>
</html>

The test.php file needs to read the Name file and post it in the Post Response from PHP.

test.php

print_r($_POST);

Thank you for taking your time in reading this.

johanafm

I've made some minor change to your html code. The main thing is including a button to initiate the ajax get request.
The other differences is removing "language='javascript'" from the script element (no such thing as a language attribute for this element, and for language attributes, there are no such value as "javascript" (it would be 'en', 'fr' etc).
Also, iirc, the form element takes no inline elements as children, which means that you need to wrap any form element in a block element such as div or fieldset.

<script type="text/javascript">
function ajaxFunction(){
    var ajaxRequest;  

try{

    ajaxRequest = new XMLHttpRequest();
} catch (e){

    try{
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e){

            alert("No Browser Support!");
            return false;
        }
    }
}

ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
        /* There is no name attribute for forms, which means you can't use
            documents.formName.elementName, but you can use
            document.forms[0] (assuming this is the first form on the page) */
        document.forms[0].var_1.value = ajaxRequest.responseText;
    }
}
ajaxRequest.open("GET", "test.php", true);
ajaxRequest.send(null);
}
</script>
</head>
<body>
<!-- no name attribute for forms -->
<form action="" method="post">
	<div>
		Name <input type="text" id="name" value="" />
	</div>
	<div>
		<input type="button" onclick="ajaxFunction();" value="Get data" /> <input type="text" id="var_1" value="" />
	</div>
</form>
</body></html>

Your php script should reside in the same place as the above file, since you use a relative path for your request "test.php", and abviously has to be named "test.php".

All that's needed in that file is an echo statement (but you probably want logic to decide what value to echo) and an appropriate content-type header. Also, for IE8 to respect your content type headers, you will need to also send a proprietary MS header: x-content-type-options: nosniff

<?php
# content type header
header('content-type: text/plain; charset=utf-8');

# ridiculous microsoft crap, which means: please respect my decisions
header('x-content-type-options: nosniff');

echo 5;

# exit is not necessary, but a trailing space or something like that would otherwise end up in the target input field.
exit;
?>