Home/ Questions/Q 7051277
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T03:14:39+00:00

I have the following form and javascript function on my web page. This is

  • 0

I have the following form and javascript function on my web page. This is a dummy function that I am using to test whether what I would like to do is possible.

What I am attempting to do is have a form send an AJAX request to the server, so that the server can update the database while the page itself continues along it’s predetermined path. I am in a tight time crunch, so I unfortunately do not have time to rewrite the entire page to better support this. The problem that I have is the xmlhttp object does not seem to return properly. I get a readyState of 4 but a status of 0. can someone please explain what I need to do?

Here’s my code:

ajax.php

<html>
<head>
<script type="text/javascript">
function test(){
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange=function(){
        document.getElementById("new").innerHTML+="<b>"+xmlhttp.readyState+"</b> "+xmlhttp.status;

        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("hello").innerHTML=xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET","response.php",true);
    xmlhttp.send();
}
</script>
</head>

<body>
<?php
if ($_POST){
  echo $_POST['hello'];
}
?>

<form action="ajax.php" method="post">
<input type="text" name="hello" />
<input type="submit" value="submit" onclick="test();" />
</form>

<div id="hello"></div>
<h3>debug</h3>
<div id="new"></div>
</body>
</html>

response.php

<?php
echo "Hello there";
?>

EDIT

Please note that I do not want to prevent the default behavior. In fact, the forn must be submitted as usual. I simply want to add an AJAX request to the process.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can’t trigger an AJAX request and allow the form to submit at the same time. Incomplete AJAX requests are cancelled when the page reloads (as is the case when the form is submitted). You’ll either have to not submit the form at all, or wait until your AJAX call has completed before submitting the form. If you wanted to go the second route, you could make the following changes to your code:

    <html>
<head>
<script type="text/javascript">
function test(){
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange=function(){
        document.getElementById("new").innerHTML+="<b>"+xmlhttp.readyState+"</b> "+xmlhttp.status;

        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("hello").innerHTML=xmlhttp.responseText;
            **document.getElementById("ajaxform").submit();**
        }
    }

    xmlhttp.open("GET","response.php",true);
    xmlhttp.send();
}
</script>
</head>

<body>
<?php
if ($_POST){
  echo $_POST['hello'];
}
?>

<form action="ajax.php" method="post" **id="ajaxform"**>
<input type="text" name="hello" />
<input type="submit" value="submit" onclick="test();**return false;**" />
</form>

<div id="hello"></div>
<h3>debug</h3>
<div id="new"></div>
</body>
</html>

    Changes/additions are marked with **.

    Note that there are a few practices in there I don’t like, in particular using the onsubmit, etc attributes of HTML tags to attach Javascript event handlers.

    • 0