Simple Ajax form
vicente.batista
I have been trying to construct a simple form by using Prototype,
but without any success. Let me explain what I am trying to do. The
form consists of a single initial button, which is used to enable
(display) the submit button. Then, the submit button makes an Ajax GET
request by means of Prototype to a local PHP file. This PHP file
prints the client's IP address, which should be the content of the
'responseText' field of the Ajax object. Then, the 'responseText' is
shown to the user. Here's the source code:
<!-- index.html -->
<html>
<head>
<title>AJAX with Prototype</title>
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript">
function Display(id) {
var element = document.getElementById(id);
element.style.display = "inline";
}
function Hide(id) {
var element = document.getElementById(id);
element.style.display = "none";
}
function makeRequest()
{
var url = encodeURIComponent('/getIP.php');
new Ajax.Request(url, {
method:'get',
onSuccess: function(transport) {
var response = transport.responseText || "no response text";
alert("Success! \n\n" + response);
},
onFailure: function(){ alert('Something went wrong...') }
});
}
</script>
</head>
<body>
<form method="POST" action="">
<input type="button" value="Show Submit" id="ini_submit" onclick="Hide
(this.id);Display('submit_button');"></input>
<input type="submit" onclick="makeRequest();" name="button"
value="Submit" id="submit_button" style="display: none;"></input>
</form>
</body>
</html>
<!-- getIP.php -->
<?php
$remoteip = '';
$remoteip = $_SERVER['REMOTE_ADDR'];
echo $remoteip;
?>
The code runs smoothly but the 'responseText' is always empty.
Is there any problem with my PHP file?
Any ideas?
Thanks in advance!
Michael Haston
Code ...
function ajaxRequest2(){
var url = "/cgidev2p/r_chgpwd.pgm";
var pars = 'v_current=' + escape($F('v_current')) +
'&v_new=' + escape($F('v_new')) + '&v_confirm=' + escape($F('v_confirm')) +
'&sessionid=' + escape($F('sessionid'));
//var submitObj = document.getElementById('goButton');
new Ajax.Request(url, {
method: 'get',
//contentType: 'application/json',
parameters: pars,
onSuccess: function(transport){
alert("Success");
var json = transport.responseJSON;
alert(json.success);
}
, onError: function(transport){
alert("skipped");
}
, onComplete: function(transport){
alert("Complete");
}
});
}
Alerts that I see are Success and Complete. The alert(json.success) does
not fire.
If I change the code to alert(json) the alert fires with "null".
Michael Haston
Dave Kibble
Your PHP should emit a valid HTML file (i.e. include head and body
tags), but I don't know if that would necessarily stop it working.
Vicente h.f. Batista
The PHP correctly emits the IP. Yesterday, I caught the problem.
After the following modifications:
function makeRequest()
{
var url = 'getIP.php';
...
}
and
<form method="POST" action="" onsubmit="makeRequest(); return false;" >
...
<input type="submit" name="button" value="Submit" id="submit_button"
style="display: none;"></input>
...
the code has worked.
Anyway, thank you very much!