表單提交按鈕在頁面加載后無法立即使用

Question

我將Bootstrap格式的表格用於Parsley驗證。 問題在於，在加載頁面時，“提交”按鈕暫時不會執行任何操作。 延遲會有所不同，但有時會長達10秒！

該代碼正在使用wamp-server在本地服務器上運行。 我嘗試過Opera和Firefox瀏覽器

 $(document).ready(function() { // On submit $('#form_register').submit(function(e) { console.log('Form submitted!'); // Prevent normal submittion e.preventDefault(); // Validate if ($(this).parsley().isValid()) { // gather data var data = $('#form_register').serialize(); // send data to server $.post('http://127.0.0.1/part/register/ajax_register', data, function(data, textStatus, xhr) { // If success if (data.code == 0) { // Show success emssage modal_message('ثبت نام با موفقیت انجام شد', 'success', function(event) { // Redirect to login page window.location = "http://127.0.0.1/part//login"; }); } else { // Show error message modal_message(data.message, 'danger'); } }, "json"); } else { console.log('Not validated'); } }); }); 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container my-5"> <div class="row"> <div class="col-md-8 offset-md-2"> <div class="card border-primary shadow"> <div class="card-header bg-primary text-white"> فرم ثبت نام </div> <div class="card-body"> <form id="form_register" method="post" data-parsley-validate=""> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <label for="username">نام کاربری :</label> <input type="text" name="username" id="username" class="form-control" autocomplete="username" required data-parsley-required-message="نام کاربری را وارد کنید"> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label for="company">شرکت :</label> <select name="company_id" id="company" class="form-control"> <option value="1">پارت پلاستیک</option> <option value="2">قطعات محور</option> </select> </div> </div> </div> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <label for="password">کلمه عبور :</label> <input type="password" name="password" id="password" class="form-control" autocomplete="new-password" required pattern="(?=^.{8,}$)((?=.*\\d)|(?=.*\\W+))(?![.\\n])(?=.*[AZ])(?=.*[az]).*$" data-parsley-required-message="کلمه عبور را وارد کنید" data-parsley-pattern-message="کلمه عبور باید حداقل ۸ حرف و شامل حروف بزرگ، کوچک و یک رقم یا کاراکتر خاص باشد."> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label for="repassword">تکرار کلمه عبور :</label> <input type="password" name="repassword" id="repassword" class="form-control" autocomplete="new-password" data-parsley-equalto="#password" data-parsley-equalto-message="هر دو کلمه عبور باید یکسان باشند"> </div> </div> </div> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <label for="first_name">نام :</label> <input type="text" name="first_name" id="first_name" class="form-control" autocomplete="name"> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label for="last_name">نام خانوادگی :</label> <input type="text" name="last_name" id="last_name" class="form-control" autocomplete="family-name"> </div> </div> </div> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <label for="mobile_number">تلفن همراه :</label> <input type="text" name="mobile_number" id="mobile_number" class="form-control" autocomplete="mobile" pattern="^09\\d{9}$" data-parsley-pattern-message="شماره تلفن همراه اشتباه است"> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label for="phone_number">تلفن ثابت :</label> <input type="text" name="phone_number" id="phone_number" class="form-control" autocomplete="tel" pattern="^\\d{8,12}$" data-parsley-pattern-message="شماره تلفن اشتباه است"> </div> </div> </div> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <label for="address">آدرس پستی :</label> <input type="text" name="address" id="address" class="form-control" autocomplete="street-address"> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label for="date_birth">تاریخ تولد :</label> <input type="text" name="date_birth" id="date_birth" class="form-control" autocomplete="bday" placeholder="0000-00-00" pattern="^\\d{4}-\\d{1,2}-\\d{1,2}$" data-parsley-pattern-message="فرمت تاریخ تولد اشتباه است" value="1985/01/01"> </div> </div> </div> <div class="form-group"> <input type="submit" value="ثبت نام" class="btn btn-primary btn-submit"> </div> </form> </div> </div> </div> </div> </div> 

Answer 1

延遲是因為您已將表單提交代碼放置在$（document）.ready（function（）{}）內

因此，一旦顯示完整的dom，便會執行表單提交代碼。

如果您不想等到DOM加載。 然后將表單提交代碼放在document.ready函數之外。

Answer 2

$(document).ready(....)表示在加載所有DOM元素后運行其中的所有功能。 只需在您需要的范圍之外使用即可。 而且，如果您還有更多要傳遞的值，只需使用ajax，它也將克服此問題。

$.ajax({
    type : "GET",
    url : "http://127.0.0.1/part/register/ajax_register", 
    data : {'data':data },
    contentType: "application/json; charset=utf-8",
    cache : false,
    async:true, //asynchronous,No need to wait for the response
    success : function(data) {  
        //your statements
    },
    error : function(data) {
        //your statements
    }
})