Кнопка preloader

Question

Кнопка отправки onclick, вызывающая функцию. (OnClick = "обязательные ноты()"). Это занимает немного времени для загрузки. Поэтому добавлен скрипт preloader. Теперь предварительный загрузчик работает, но не вызывает функцию. Спрашивается справка. Спасибо

function mandatoryNotes() 
 
{ 
 
    document.getElementById("formsubmitbutton").style.display = "none"; // to undisplay 
 
    document.getElementById("buttonreplacement").style.display = ""; // to display 
 
    return true; 
 
} 
 
var FirstLoading = true; 
 
function RestoreSubmitButton() 
 
{ 
 
    if(FirstLoading) 
 
    { 
 
     FirstLoading = false; 
 
     return; 
 
    } 
 
    document.getElementById("formsubmitbutton").style.display = ""; // to display 
 
    document.getElementById("buttonreplacement").style.display = "none"; // to undisplay 
 
} 
 

 
//code for calling page 
 

 
{ 
 
    var formvalue="invoiceAttributesDetailsFORM"; 
 
    validateInput(document.invoiceAttributesDetailsFORM); 
 
    var queryString; 
 
    if(checkValidation=="true"){ 
 
     //added by Nilanjana for 184932g 
 
     //alert("entered"); 
 
     submitSpecialBidDetails(document.invoiceAttributesDetailsFORM); 
 
     queryString = "&EUAM_SELECTED_FORM=" + formvalue; 
 
     var legendURL = "/EUAM/ADRGateway?jadeAction=MANDATORY_NOTES_ACTION_HANDLER"; 
 
     var winData = 'scrollbars=yes,resizable=yes,status=yes,width=500,height=500'; 
 
     window.open("MandatoryNotes.jsp", "ADDVIEWNOTES",winData); 
 
     window.close(); 
 
    } 
 
}

<div class="em" id="formsubmitbutton"> 
 
<input type="button" name="Submit" value="Submit" class="buttonEm" onClick="mandatoryNotes()"> 
 
</div> 
 
<div id="buttonreplacement" style="margin-left:30px; padding-top:15px; display:none;"> 
 
<img src="loadingSubmit.gif"alt="loading..."> 
 
</div>

Answer 1

Не вы используете какой-либо асинхронный метод, как AJAX с просьбой XHR, чтобы отправить форму. Поскольку ваш запрос займет время, чтобы запустить предварительный загрузчик, должен отображаться до тех пор, пока не появится результат. Я бы порекомендовал вас посмотреть JQuery ajax Вы можете написать свой код отправки и начать предварительный загрузчик перед отправкой запроса и прекратить его после получения ответа.

$(document).ready(function(){ 
 
    $('#submitbutton').on('click',function(){ 
 
    var mydata = [];  
 
    var jqxhr = $.ajax({ 
 
        url: '', 
 
        type: 'POST', 
 
        data: mydata , 
 
        dataType: 'json', 
 
        contentType: 'application/json', 
 
        beforeSend: mandatoryNotes() 
 
       }) 
 
        .done(function (ajax_data) { 
 
         
 
         RestoreSubmitButton(); 
 
        }) 
 
        .fail(function (jqXHR, textStatus) { 
 
         
 
         RestoreSubmitButton(); 
 
        }); 
 
       return false; 
 
      }); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="em" id="formsubmitbutton"> 
 
    <input type="button" name="Submit" value="Submit" id='submitbutton' class="buttonEm" onClick="mandatoryNotes()"> 
 
</div> 
 
<div id="buttonreplacement" style="margin-left:30px; padding-top:15px; display:none;"> 
 
    <img src="loadingSubmit.gif"alt="loading..."> 
 
</div>