show image while processing a form with jquery

Question

show image while processing a form with jquery

Navigation

#1 by (0 votes)

-1

I have a form on an html page that is sent to a php file. My idea is that once the form is sent and until the data is loaded into the php, an animation is displayed on the screen.

The problem is that the animation is not showing.

The html file is as follows

<html>
<head>
    <meta charset="UTF-8">
    <title>load</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <style>
        #cargando,#carga{
            text-align: center;
        }
    </style>
</head>
<body>
<form id=create method=POST action=archivo.php>
<input type=text name=nombre>
<input type="submit" value="Create" /> 
</form>
<div id='cargando' style='display:none'>
  <img src="load.gif" ><h3>Cargando página ...</h3>
</div>
<div id=cargado></div>
</body>
</html>
<script>
$(document).on("submit", "form", function(event)
{
    event.preventDefault();
    $('#cargando').show();
    var url=$(this).attr("action");
    $.ajax({
        url: url,
        type: 'POST',
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {
            $('#cargando').hide();
            $('#cargado').html(data); //content loads here

        },
        error: function (xhr, desc, err)
        {
            console.log("error");

        }
    });        

});
</script>

And file.php is:

<?php
sleep(3);
echo $_POST['nombre'];
?>

jquery html

asked by Emilio Galarraga 27.11.2017 в 19:09

source

1 answer

How to make a chain of elements p / p that moves infinitely to the left Fixed Cell Height

score 0 · Accepted Answer

You can use the event beforeSend of ajax which runs while the data is processed on the server:

For more information on ajax events you can visit Ajax Events

NOTE: Remember that the id attribute is a unique and unrepeatable identifier, so it should not be repeated between 2 or more elements.

<html>
<head>
    <meta charset="UTF-8">
    <title>load</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <style>
        #cargando,#carga{
            text-align: center;
        }

        #cargando{
            display:none;
        }
    </style>
</head>
<body>
<form id=create method=POST action=archivo.php>
<input type=text name=nombre>
<input type="submit" value="Create" /> 
<div id='cargando'>
  <img src="load.gif" ><h3>Cargando página ...</h3>
</div>
<div id=respuesta></div>
</form>
</body>
</html>
<script>
$(document).on("submit", "form", function(event)
{
    event.preventDefault();

    var url=$(this).attr("action");
    $.ajax({
        url: url,
        type: 'POST',
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        beforeSend: function(){
            $('#cargando').show();
        },
        success: function (data, status)
        {
            $('#cargando').hide();
            $('#respuesta').html(data); //content loads here

        },
        error: function (xhr, desc, err)
        {
            console.log("error");

        }
    });        

});
</script>