CODEWITHSUNDEEP
javascripthtml
user3869979
user3869979

Reputation: 21

submitting form then showing loading image by javascript

I am submitting a form and loading loading gif in the same div by replacing html of form by html of loading image.

I am first submitting the form then loading gif, because I have to replace the content of div(in which form exist) with loading image.

Logs 1,2,3 are printing, loading image is showing but form is not submitting Please help.

<script>
/* javascriptfunction */

Submit_and_loadimage() {


console.log("1");

document.getElementById("form_in_div").submit(); 

 or   

document.forms['form_name'].submit();


console.log("2");
document.getElementById("form_in_div").innerHTML ='LOADING_IMAGE-DIV';

console.log("3");

}

Upvotes: 0

Views: 9100

Answers (4)

Zohaib Waqar
Zohaib Waqar

Reputation: 1239

then try this Add div and make it hide by Default.

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />     </div>

And in java script on page load show that div containg loading image

<script language="javascript" type="text/javascript">
     $(window).load(function() {
     $('#loading').hide();
  });
</script>~

Upvotes: 0

Zohaib Waqar
Zohaib Waqar

Reputation: 1239

Let suppose on button click you are calling ajax method

<button onclick="LoadData();"/>

before ajax call show image and onComplete ajax method hide this image

function LoadData(){
    $("#loading-image").show();
    $.ajax({
          url: yourURL,
          cache: false,
          success: function(html){
            $("Your div id").append(html);
          },
          complete: function(){
            $("#loading-image").hide();
          }
        });
}

Upvotes: 0

GaurabDahal
GaurabDahal

Reputation: 876

you can submit your form using ajax so that page won't redirect. put your loading '.gif' image somewhere in a hidden block

<div style="display:none" class="loading">
    <img src="path/to/loading.gif" />
</div>

set the display of this div to inline-block when you click the submit button. Then make an ajax call. and hide this div again when yo get response from the server.

with jquery you can do it like

jQuery('#submitbtn').click(function(){
    jQuery('.loading').show();
    jQuery.post( "test.php", { name: "John", time: "2pm" })
      .done(function( data ) {
        alert( "Data Loaded: " + data );
        jQuery('.loading').hide();
    });
});

Upvotes: 0

sourabh devpura
sourabh devpura

Reputation: 625

You won't be able to do this easily with plain javascript. When you post a form, the form inputs are sent to the server and your page is refreshed - the data is handled on the server side. That is, the submit() function doesn't actually return anything, it just sends the form data to the server.

If you really wanted to show this kind of working image Javascript (without the page refreshing), then you'll need to use AJAX, and when you start talking about using AJAX, you'll need to use a library. jQuery is by far the most popular, and my personal favourite. There's a great plugin for jQuery called Form which will do exactly what it sounds like you want.

Here's how you'd use jQuery and that plugin:

Show your image on form submit

$('#myForm')
    .ajaxForm({
        url : 'myscript.php', // or whatever
        dataType : 'json',
        success : function (response) {
           // hide your image
        }
    })
;

Upvotes: 2

Related Questions