jQuery를 사용하여 양식 제출을 클릭 한 후 gif로드

양식을 제출하면로드하는 gif를 표시하려고합니다. 로드하는 gif가 표시되도록 코드가 올바르게 작동하지 않습니다. gif 이미지가 visibility: hidden으로 설정되어 있습니다.jQuery를 사용하여 양식 제출을 클릭 한 후 gif로드

<script src="js/jquery-1.11.1.min.js"></script> 

<div class="" style="width: 480px; margin: 0 auto; margin-top: 20px;" id="form_wrapper"> 
    <img src="img/loader.gif" id="gif" style="display: block; margin: 0 auto; width: 100px; visibility: hidden;"> 
    <div class="fade" id="form"> 
     <form action="process_login.php" method="POST" name="simplelogin" id="login_form"><br /> 
      <label for="username">&nbsp; Username:</label> 
      <input type="username" name="username" id="username" size="30" required><br><br> 
      <label for="password">&nbsp; Password:</label> 
      <input type="password" name="password" id="password" size="30" required><br><br> 
      <input class="load_button" type="submit" name="submit" id="submit" value="Submit" placeholder="Submit"> 
     </form> 
    </div> 
</div> 
<div class="fifty"></div> 

<script type="text/javascript"> 
    $('.load_button').submit(function() { 
     $('#gif').show(); 
     return true; 
    }); 
</script>

출처

2014-11-19 ValleyDigital

와 함수에 넣고 다음을 실행할 수 있습니다 http://api.jquery.com/submit /'input' 엘리먼트는'submit'와 같은'names' 또는'ids'가 없어야합니다. – RST

고맙습니다. @RST 고쳐 줄게. – ValleyDigital

show() 방법 만 display CSS 설정에 영향을 미칩니다. 가시성을 설정하려면 직접해야합니다. 또한 .load_button 요소는 버튼이며 submit 이벤트를 발생시키지 않습니다. 당신은 일에 그의 form에 선택을 변경해야 할 것 :

$('#login_form').submit(function() { 
    $('#gif').css('visibility', 'visible'); 
});

출처

2014-11-19 20:27:50

제출하기 전에'setTimeout()'을 사용하여 잠시 멈추고 gif를 보여줄 수도 있습니다. –

버튼 입력이 제출 이벤트가 없습니다. 대신 폼에 이벤트 핸들러를 연결하십시오 :

<script type="text/javascript"> 
    $('#login_form').submit(function() { 
     $('#gif').show(); 
     return true; 
    }); 
</script>

출처

2014-11-19 20:32:21 dave

더 나은 만

참조 JS를 사용하여 깨끗한 예 : TheDeveloperBlog.com

1 단계 - 자바 스크립트를 작성하고 HTML 페이지에 넣습니다.

<script type="text/javascript"> 
    function ShowLoading(e) { 
     var div = document.createElement('div'); 
     var img = document.createElement('img'); 
     img.src = 'loading_bar.GIF'; 
     div.innerHTML = "Loading...<br />"; 
     div.style.cssText = 'position: fixed; top: 5%; left: 40%; z-index: 5000; width: 422px; text-align: center; background: #EDDBB0; border: 1px solid #000'; 
     div.appendChild(img); 
     document.body.appendChild(div); 
     return true; 
     // These 2 lines cancel form submission, so only use if needed. 
     //window.event.cancelBubble = true; 
     //e.stopPropagation(); 
    } 
</script>

양식에서 submit 이벤트에 Java 스크립트 함수를 호출하십시오.

<form runat="server" onsubmit="ShowLoading()"> 
</form>

곧 양식을 제출하면로드 이미지가 표시됩니다.

출처

2015-06-18 04:40:11 BenW

양식이 다시 나타난 후에 Loading 배너가 제거되지 않습니다. –

무엇 온 클릭 기능에 대한 : 물론

<form id="form"> 
    <input type="text" name="firstInput"> 
    <button type="button" name="namebutton" 
      onClick="$('#gif').css('visibility', 'visible'); 
        $('#form').submit();"> 
    </form>

당신이의 jQuery API에 따르면, 온 클릭

출처

2017-03-01 09:35:00 Nebulosar

jQuery를 사용하여 양식 제출을 클릭 한 후 gif로드

답변

관련 문제