Another Newbie Query [Archive]

Dayo

09-02-2008, 09:36 PM

I have been following the example from this linked website (http://blog.paranoidferret.com/index.php/2008/06/04/simple-ajax-php-and-javascript/) and can get it to work but wondering if anyone could give me a pointer to extending it.

Essentially, I want to trap the contents of the innerHTML call and write it to my HTML so that it actually appears in the source code.

Here is a simplified illustration of what I want to achieve

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type='text/javascript' src='js_file_with_functions_from_website.js'></script>
<title>PHP AJAX Example</title>
</head>
<body>
<div id='ResponseDiv'>Text_1</div>
<script language="JavaScript" type="text/javascript">

</script>
<div id='outputDiv'>PUT_innerHTML_OUTPUT_FROM_ABOVE_HERE</div>
</body>
</html>

Thanks for your help

P.S I found this code (http://www.ajaxf1.com/tutorial/ajax-php.html?page=3) that might be closer to what I want as it seems to change stuff displayed.

Dayo

09-02-2008, 10:35 PM

I just looked at my post again and realised it doesn't make much sense so here goes again.

I am writing code to post to an e-commerce site. This contains some sensitive info that I don't want the user to see. I can do the post to the site ok with hidden form fields but if the user has disabled JS, this info can be viewed in the source.

What I want to achieve is a situation where the transaction details are only written to the form if JS is enabled.

Here is what I currently have as an attempt

<!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" dir="ltr" lang="en">
<head>
<title>A TITLE</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script language="javascript" type="text/javascript">
var output_data;
function getValue()
{
x=document.getElementById("ResponseDiv").innerHTML;
}
function getXMLHttp()
{
var xmlHttp
try
{
//Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
//Internet Explorer
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
return false;
}
}
}
return xmlHttp;
}

function MakeRequest()
{
var xmlHttp = getXMLHttp();

xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
HandleResponse(xmlHttp.responseText);
}
}
xmlHttp.open("GET", "secure_form.php", true);
xmlHttp.send(null);
}
function HandleResponse(response)
{
document.getElementById('ResponseDiv').innerHTML = response;
}
</script>
</head>
<body onload="submitForm();">
<form name="myForm" action="https://www.an_ecommerce_site.com" method="post" id="myForm">
<div id='ResponseDiv'><input type="hidden" name="transaction_details" value="Sensitive" /></div>
<script language="JavaScript" type="text/javascript">
MakeRequest();
getValue();
document.write(output_data);
</script>
</form>
<script language="JavaScript" type="text/javascript">
document.myForm.submit();
</script>
<SOME_HTML_TO_SHOW_IF_JS_IS_DISABLED>
</body>
</html>

The file called "secure_form.php" simply contains echo $transaction_details which are the hidden form fields.

I will appreciate any pointers on what I am missing.

Thanks a lot.