Question

我发布的图片和文字数据工作正常，但在发布时我想要显示图片同时我要禁用发布按钮，表单提交后应隐藏图像，并启用发布按钮。

以下是我的代码，这里我正在显示图像并禁用发布按钮，但它无法正常工作。

<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>

Answer 1

将ajaxform部分更改为：

    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);

想要在ajax提交时显示图像并禁用提交按钮

1 个答案: