I have an html
form, wich, Its data is sent trough an AJAX
post to a php
File.
After the insert to a database, I need to show to the user that, the data he just sent, has been successfully inserted.
Everything works fine, but the real problem is that, the page refreshes so fast that I don't get to even see the content of the message.
Thing's to consider:
- After the
Ajax
call I make a function call to the same page to refresh it, because if not, the page never does. - I have a
<div>
in thishtml
form, that is hidden, intended to just unhide itself after the response of the server.
So I have two questions:
- First of all, how I am doing it, is there an any better way?
- Is it possible to make the message persistent after the refreshing of the page?
I leave some of the JS code (to make it short since everything works just fine), and the html part that contains the div here:
$('#MiForm').on('submit', function( event )
{
//Creating the necessary instances and data
//Here is where I put different messages for the div "alert"
xhttp.onreadystatechange = function()
{ //Response from the server.
if (xhttp.readyState < 4)
{// Waiting response from server.
document.getElementById('Alert').hidden = false;
document.getElementById('Alert').innerHTML = "Sending Request...";
}
else if (xhttp.readyState === 4)
{// 4 = Response from server has been loaded
if (xhttp.status == 200 && xhttp.status < 300) // (200-299) is succesful.
document.getElementById('Alerta').innerHTML = 'Everything OK!';
}
};
//the Send function and data.
event.preventDefault(); //-->preventing the submit of the normal form cause I use AJAX.
window.location.href = '../Ui/WorkerForm.php' //--->this is where I load the same page where Im on, but it seems that it does it too fast.
});
And the HTML:
<div id="Alert" class="alert alert-success" hidden="true" role="alert"></div>
One more thing, the php page that I send data to, does not return any value manually, It just get the data and calls the classes to make the insert.