Sunday, April 8, 2012

jquery newsletter submit - loading message



i have a newsletter form i use on my site using ajax with jquery. i want to show to a user a wait message. what is the best option?





heres what i have so far:







<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$('#submit').click(function(e) {

$.ajax({

type: "POST",

url: '/save.php',

data: $('#form').serialize(),

cache: false,

success: function(result) {

// my code when success

}

});

});

});



</script>



<div id="newsletter">

<form id="form">

<label for="email">Your Email*:</label>

<input name="email" value="" type="text" id="email" size="30" maxlength="255" />

<span id="submit">Submit</span>

</form>

</div>







thanks



Source: Tips4all

1 comment:

  1. You can do it something like this.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $('#submit').click(function(e) {

    //Put the loding script here
    $("#preloader").show();

    $.ajax({
    type: "POST",
    url: '/save.php',
    data: $('#form').serialize(),
    cache: false,
    success: function(result) {
    // my code when success
    //Stop the preloader if the process is done
    $("#preloader").hide();
    }
    });
    });
    });



    <div id="newsletter">
    <form id="form">
    <label for="email">Your Email*:</label>
    <input name="email" value="" type="text" id="email" size="30" maxlength="255" />
    <span id="submit">Submit</span>
    <img src="preloader.gif" id="preloader" />
    </form>
    </div>


    When the user hit the submit show your preloader image. After the process is done, hide it.

    ReplyDelete