SO - 21247164

by Arun P Johny

HTML

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<body>
    <form action="goto.php" method="post" name="myform" id="myform" onsubmit="return formSubmit(this);" class="form-wrapper cf">
        <input name="statusid" autocomplete="off" id="statusid" placeholder="Enter ID Here" required="" type="text">
        <input type="submit" name="submit_btn" class="submit" id="submit_btn" value="submit" style="
    overflow: visible;  position: relative;  float: right;  border: 0;  padding: 0;  cursor: pointer;  height: 40px;  width: 159px;  font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';  color: #fff;  text-transform: uppercase;  background: #4363aa;  -moz-border-radius: 0 3px 3px 0;  -webkit-border-radius: 0 3px 3px 0;  border-radius: 0 3px 3px 0;  text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
">
    </form>
    <div id="loading" style="display:none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: #2d4e87;z-index: 99;">
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div class="text" style="position: absolute;top: 45%;left: 0;height: 100%;width: 100%;font-size: 20px;text-align: center;"><b style="color: white;">Loading...please wait.
</b>
            <br>
            <img src='http://likepana.com/images/loading.gif'>
        </div>
</body>

CSS

body {
    font: 15px'Lucida sans', Arial, Helvetica;
    color: #eee;
    text-align: center;
}
a {
    color: #ffffff;
}
/*-------------------------------------*/
 .cf:before, .cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
.cf {
    zoom:1;
}
/*-------------------------------------*/
 .form-wrapper {
    width: 600px;
    padding: 18px;
    margin: 5px;
    background: #444;
    background: rgba(0, 0, 0, .2);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}
.form-wrapper input {
    width: 430px;
    height: 20px;
    padding: 10px 5px;
    float: left;
    font: 18px arial, sans-serif;
    border: 0;
    background: #eee;
    -moz-border-radius: 3px 0 0 3px;
    -webkit-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, .8) inset;
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .8) inset;
    box-shadow: 0 0 2px rgba(0, 0, 0, .8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: bold;
}
.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: bold;
}
.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: bold;
}
.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    width: 160px;
    font: bold 15px/40px'lucida sans', 'trebuchet MS', 'Tahoma';
    color: #fff;
    text-transform: uppercase;
    background: #4363aa;
    -moz-border-radius: 0 3px 3px 0;
   ...

JavaScript

$(function () {
    $("#myform").submit(function (e) {
        $("#controller").hide();
        $("#loading").show();
        e.preventDefault();
        //or return false; - prevent default & stops propagation
    });
});