0

I'm learning to create a submission form using AJAX and PHP. It is working, but only intermittently. Much of the time, the form does not update after hitting Submit. But when it does work (and shows my successful submission text), the page quickly refreshes again, and goes back to the form input page. What am I doing wrong?

Note: In case it's relevant, I also tried using the "POST" method, but I kept getting "405 Method not allowed" errors. I'm assuming that's to do with how my web server is setup, but I couldn't find any settings to allow (or deny) POST submissions. Just in case that has anything to do with the solution.

Here is my HTML page code:

<html>
<head>
<script>
function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };

        xmlhttp.open("GET","refresh.php?q="+str.value,true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>


<form action="#" method="get" onsubmit="return showUser(this.name)">
<label>Name :</label>
<input id="name" name="name" placeholder="Name" type="text">
<input type="submit" value="Submit">
</form>

<br>
<div id="txtHint"><b>Table should show up here...</b></div>
</body>
</html>

And here is my "refresh.php" page code:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<?php
$q = strval($_GET['q']);

echo '<p>Hello World</p>';
echo $q; 
echo "<p>Table shows up here!</p>";

?>
</body>
</html>
toblerone
  • 57
  • 7
  • 1
    Stop the bubbling! You could also look into jquery for your js, as it would save you a lot of headaches in the future (and make you a lazy js coder, but hay, why not?). Hint: add `return false;` at the end of your `showUser()` function. – IncredibleHat Nov 04 '17 at 15:53
  • Could be duplicate of https://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted – IncredibleHat Nov 04 '17 at 15:56
  • `return false` did the trick! Thank you so much. Now to learn about bubbling and jquery... :) – toblerone Nov 04 '17 at 16:08
  • 1
    `return false` works, because the `onsubmit` event is just something the browser does when the form is being submitted (before actually). So you can error check, or hijack it. A function returns true by default, so the form continues to submit after the function is done. When it does this, it goes to `action` (or same page if no `action`). This is why putting `return false` will tell the onsubmit function to halt the form submit process itself at the end. Preventing the page from refreshing. – IncredibleHat Nov 04 '17 at 16:17
  • I see. So, does that mean that the form "technically" isn't actually being submitted? Rather, the showUser function just gets run instead. So it looks to the user like a regular form submission, but it really isn't, so to speak? – toblerone Nov 04 '17 at 16:29
  • 1
    Correct. You can control many things by doing this. Ajax calls for bits of data, update the DOM with data changes, handling input verification before sending to the server, etc etc etc. If you wanted to fire off an ajax call AND submit the form, you can do that as well, but make sure to chain the events so that the ajax finishes before the page changes ;) – IncredibleHat Nov 04 '17 at 16:38
  • 1
    Try using jQuery its much easier and also have to write less code. – Zaheen Nov 04 '17 at 16:41

1 Answers1

0

As pointed out by @Randall and @Balwant the answer was to add return false; at the end of the showUser() function.

toblerone
  • 57
  • 7