Want to show image and disable submit button while ajax submit

Question

I am posting image and text data that is working properly, but during posting i want to show images and same time i want to disable post button, after form submission image should be hidden and post button should be enabled.

following is my code, here i am showing image and disabling post button but it is not working.

<form id="own_message_post" action="ownmessages" method="post"> 
      <textarea name="message" rows="4" cols="45" id="text_message" placeholder="Update your status"></textarea> 
        <img src="images/loader.gif" alt="posting" id="loading_img" style="visibility: hidden;">
        <input id="fileupload" type="file" name="user_post_image" data-url="ownmessages">
          <select name="msg_visibility">
             <option value="public">Public</option>
             <option value="friends">Friends</option>
             <option value="me">Me only</option>
          </select>
       <input type="submit" value="Post" id="submit_form_button"> 
       </form>

<script> 
        // wait for the DOM to be loaded 
         $(document).ready(function() { 
         // bind 'myForm' and provide a simple callback function 
          $('#submit_form_button').click(function() {
           var a= $('#text_message').val();
           if(a=='' || a.length==0)
             {
                   $('#err').text("Please post your status");
                    return false;
               }
           if(a.length<10)
              {
                   $('#err').text("minimum 10 characters are required");
                   return false;
              }

        });
      $('#own_message_post').ajaxForm(function(data) {

              $("#loading_img").css("visibility", "visible");
              $('#submit_form_button').attr("disabled", true);
              $('#messages_and_pages').html(data);
              $('#text_message').val("");
              $('#fileupload').val("");
              $('#submit_form_button').removeAttr('disabled');
              $("#loading_img").css("visibility", "hidden");

          }); 
     }); 
</script>

possible duplicate of http://stackoverflow.com/questions/8140946/how-to-show-a-loading-gif-mean-while-a-submit-form-is-being-executed-jquery — Vortex, Mar 25 '13 at 06:33

score 0 · Answer 1 · answered Mar 25 '13 at 06:45

Change the ajaxform part to this:

    var options = { 
            beforeSubmit:  function() { 
                         // code for disable button and hide/show stuff
    }, 
            success: function(data) {
                        // code for enable button and show stuff
    }};

    $('#own_message_post').ajaxForm(options);

Want to show image and disable submit button while ajax submit

1 Answers1