Vfrdtyky

I have a button click function like this :

   $("#submitButton").click(function (e) {



      e.preventDefault();

       console.log("let's show my div");

      $('#mydiv').show();

      //and then doing a lot of front end operations and some ajax calls

   })

When I click the submit button, I get the console.log message immediately. But .show() method works like 7-8 seconds after that. Can you tell me how I can make .show() work immediately? Thanks.

EDIT :
My HTML code looks like this :

    <div class="main">

        <form id="myform" enctype="multipart/form-data" class="contact-forms">

             <div class="first-line">

                <div class="span3 main-row">

                    <div class="input">

                        <input type="text" id="id" name="id" placeholder="insert your ID"  maxlength="7"  oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(..*)./g, '$1');"  />



                    </div>



                </div>



            </div>



            <div class="first-line">

                <div class="span8 main-row">

                    <div class="input">

                        <input type="text" id="name" name="name" placeholder="Your name" />

                    </div>



                </div>

             </div>

   <div id="mydiv" style="display:none">



                    <label>

                        Processing, please wait.

                    </label>



        </div>

        </form>

     </div>

This is example of showing the div , you should hide your div with display none not hidden class , if you use hidden class just remove class to show your div

function ShowDiv(){

$("#mydiv").show();

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="mydiv" style='display:none;'>Hello</div>

<button onclick="ShowDiv()"> ShowMe</button>