Jquery Загрузка изображения в форму поиска

Question

Я хочу отобразить изображение loading.gif при поиске домена нажатием кнопки.Поэтому, когда php обрабатывает запрос поиска по доменному имени, изображение загрузки появляется и исчезает при появлении результатов поиска.

Ниже кода с моей страницы php:

<form class="form-full-width" method="post">
 <div class="group align-center form-row">
  <input autofocus class="group-stretch" type="text" name="domain" placeholder="" value="" pattern="^[a-zA-Z0-9\.-]*$" title="">
   <input type="hidden" name="token" value="70ed0e77d1b8f7124c494a970929ccb2">
    <button class="button-secondary"> Search </button>
 </div>
 </form>

---

Это результатпосле нажатия кнопки поиска, появится примерно через 5-30 секунд после нажатия кнопки поиска

$response = '<section class="content-row">
   <div class="container">
     <center>
       <header class="content-header">
         <h3><i class="fa fa-check text-color-success icon-left"></i> Selamat! Domain <b class="text-color-primary">'.$domain.'</b> Tersedia</h3>
           <h4>Hanya dengan <b>Rp. 200.000</b> / tahun</h4>
             <p>
              <a href="member.domain.com/cart.php?a=add&amp;domain=register&amp;sld='.$domain.'" class="button button-primary">
              <i class="fa fa-shopping-cart icon-left"></i>DAFTARKAN
              </a>
             </p>
             <p>
            atau<br><a href="#saran">Lihat saran domain lainnya <i class="fa fa-angle-double-right"></i></a>
             </p>
         </header>
       </center>
     </div>
  </section>

---

Javascript

  <script type="text/javascript">
    $( document ).ready(function() {
       $('.button-secondary').click(function(){
          var domain = $('input[name=domain]').val()

            $.get( "cari-domain-function.php?domain="+domain, function( data ) {
            $( "section.content-row-gray" ).html(data);
                });

              event.preventDefault();
            })
        });
  </script>

Answer 1

добавьте <img id='loading' src='loading.gif' style='display:none' >, чтобы скрыть изображение, затем, когда запросы поиска добавят это в ваш скрипт, $("#loading").css("display","block"); впоследствии, когда php запрос завершится $("#loading").css("display","none");, надеюсь, что это будет работать

HTML

    <form class="form-full-width" method="post">
     <img id='loading' src='loading.gif' style='display:none' >
     <div class="group align-center form-row">
       <input autofocus class="group-stretch" type="text" name="domain" 
         placeholder="" value="" pattern="^[a-zA-Z0-9\.-]*$" title="">
        <input type="hidden" name="token" 
          value="70ed0e77d1b8f7124c494a970929ccb2">
        <button class="button-secondary"> Search </button>
      </div>
    </form>

JQuery

<script type="text/javascript">
$( document ).ready(function() {
  $('.button-secondary').click(function(){
    $("#loading").css("display","block");
    var domain = $('input[name=domain]').val()

    $.get( "cari-domain-function.php?domain="+domain, function( data ) {
      $( "section.content-row-gray" ).html(data);
      $("#loading").css("display","none"); 
    });

    event.preventDefault();
  })
});
</script>

JQuery EDIT

<script type="text/javascript">
$( document ).ready(function() {
  $(document).on('click','.button-secondary',function(){
    $("#loading").css("display","block");
    var domain = $('input[name=domain]').val()

    $.get( "cari-domain-function.php?domain="+domain, function( data ) {
      $( "section.content-row-gray" ).html(data);
      $("#loading").css("display","none"); 
    });

    event.preventDefault();
  })
});
</script>