CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Medoju Narendar
Medoju Narendar

Reputation: 185

Wait Message when submitting form

I want to do something very simple. I have one button in my page..

<body>
<img src="images/myloadingimage.png" style="display: none;" id="loading_image">
    <form id="myform" type="post" action="test.php" >
        Name : <input type="name" id="name" value="" /><br />
        LName : <input type="lname" id="lname" value="" /><br />
        <input type="submit" id="submit" name="Submit" />
    </form>
</body>

Now what I want is when the user presses this submit button.. It shows that "loading" gif animation until form submission completes. I want in Javascript. How do i implement this.

Upvotes: 1

Views: 12345

Answers (6)

abhiklpm
abhiklpm

Reputation: 1653

If you dont want to use ajax you can do like this. Before displaying the loading icon, you will also need to add code for any javascript validation if needed.

$("#submit").on("click", function(e){
     $("#loading_image").show();
     $("#myform").submit();
     e.preventDefault();
});

Upvotes: 1

StateLess
StateLess

Reputation: 5402

simply over write default form action and display the loading icon and remove on successful completion of your ajax request.

sample:

   $("form").submit(function (e) {
            e.preventDefault(); // stops the default action
            $("#loader").show(); // shows the loading screen
            $.ajax({
                url: test.php,
                type: "POST"
                success: function (returnhtml) {
                    $("#loader").hide(); // hides loading sccreen in success call back
                }
            });
        });

Upvotes: 1

Hugo Yates
Hugo Yates

Reputation: 2111

I like to park a div off screen like so the image is preloaded:

<div id="LoadingDiv" style="left: -200px;">
    <div>
        <img src="images/loading.gif" title="Loading" />
        <div class="LoadingTitle">Loading...</div>
    </div>
</div>

then use a bit of JQuery:

var div = $("#LoadingDiv");
function LoadingDiv() {
    div.animate({
        left: parseInt(div.css('left'), 10) == 0 ?
          -div.outerWidth() * 2 :
          0
    });
}

(that's the simpler version)

Upvotes: 3

Frebin Francis
Frebin Francis

Reputation: 1915

Use Jquery BlockUI plugin with jquery Ajax call.

for showing loading message you need to write 

$.blockUI();

for hiding loading message you need to write

$.unblockUI();

There are also lots of customizations available for this plugin. Check the demos here

This link will help you to integrate Jquery BlockUI plugin with Jquery Ajax call

Hope this helps.

Upvotes: 1

Aravind Bharathy
Aravind Bharathy

Reputation: 1610

You can achieve this through jQuery.

Make a jQuery ajax POST request

//Do the image load here
//now make the ajax call
$.post("test.php",$('#myform').serialize(),function(data){
     //if success
     //remove gif image
     //continue with whatever you want
},"json");//incase you need a json reply

Upvotes: 0

dfsq
dfsq

Reputation: 193271

You will need to handle form onsubmit event manually, making POST AJAX request. Before request you show loading image and once it's complete you need to hide it again.

Check the code with comments on important places:

$('#myform').on('submit', function(e) {

    // Prevent default browser form submission with page reload
    e.preventDefault();

    // Show loading indicator
    var $loading = $('#loading_image').show();

    // Make POST request with form parameters
    $.post(this.action, $(this).serialize()).done(function(response) {

        // Hide loading image once request is complete
        $loading.hide();

        // Do something with responce
        console.log(response);
    });
})

Upvotes: 0

Related Questions