ポーズフォームは、私はJSに提出フォームに問題がある非同期機能

Question

で提出してください。私がしたいのは、関数croppie()を非同期で呼び出し、値を取り出してフォーム入力フィールドに設定することです。問題は、これが次の行を非同期的に実行するか、自動的に実行されるためです。つまり、doneはtrueに設定され、フォーム要素が値を取得する前にフォームが送信され、そのデータがポスト配列に含まれなくなります。フォームは、データがimagebase64に設定されるまで提出することを待つよう

は、誰も私を助けることはできますか？

ありがとうございました。

注：提出タイプの代わりにボタンタイプを使用したくないので、推奨しないでください。

done = false; 

$("form").submit(function(e){ 
    if (done === true) { 
     done = false; 
     return; 
    } 
    e.preventDefault(); 

    if(typeof $uploadCrop != 'undefined') { 
     $uploadCrop.croppie('result', { 
      type: 'canvas', 
      size: 'original' 
     }).then(function (resp) { 
      $('#imagebase64').val(resp); 
     }); 
    } 

    done = true; // set flag 
    $('#update-profile-form').submit(); 
}); 

Answer 1

あなたは自分の第二は、コールバック関数に

$("form").submit(function(e){ 
    if (done === true) { 
     done = false; 
     return; 
    } 
    e.preventDefault(); 

if(typeof $uploadCrop != 'undefined') { 
    $uploadCrop.croppie('result', { 
     type: 'canvas', 
     size: 'original' 
    }).then(function (resp) { 
     $('#imagebase64').val(resp); 

     done = true; // set flag 
     $('#update-profile-form').submit(); 
    }); 
    } 


    }); 

を提出移動する必要があります

Answer 2

はこれを試してみてください非同期コードを実行した後、.submitコールは.then関数内でなされるべきである。

done = false; 

$("form").submit(function(e){ 
    if (done === true) { 
     done = false; 
     return; 
    } 
    e.preventDefault(); 

    if(typeof $uploadCrop != 'undefined') { 
     $uploadCrop.croppie('result', { 
      type: 'canvas', 
      size: 'original' 
     }).then(function (resp) { 
      $('#imagebase64').val(resp); 
      done = true; // set flag 
      $('#update-profile-form').submit(); 
     }); 
    } 

});