Javascript 在缓慢的ajax jquery完成之前不提交表单

我在表单中使用的ajax jquery几乎需要4秒钟来完成并创建表单中所需的字段。因此，一些用户在创建这些字段之前提交表单。我希望在创建这些字段之前不要提交表单

这是我的密码

echo"<form action='http://teachers.teicm.gr/dvarsam/index.php/exelixi_aitisis/' method='post' onsubmit='return recaptcha();'>
    <label class='formLabel'>Όνομα*</label><br />
    <input name='FirstName' required='' type='text'/><br />
    ...
    ...
    echo"<select name='ThesisID' id='link_block'  onchange='showCourses(this.value)'>
        <option disabled='disabled' selected='selected' value=''></option>";
        while ($row = mysqli_fetch_array($result))
        {
            echo "<option value= {$row[Thesis_ID]}>{$row[Thesis_Title]}</option>";
        }
    echo"</select><br />";

    //displays the courses when thesis is selected
    echo"<p id='courses'></p> ";

    //placeholder which you’ll need to add to your form markup wherever you want the reCAPTCHA to appear
    echo"<div class='g-recaptcha' data-sitekey='6LcIzA4TAAAAABo7Ean4z9EbNJddkkh04x9v6pLs'></div>

    <input  type='submit' name='action' value='Αποστολή' />
</form>";

OnChange-javascript。它显示

//Browser Support Code
function showCourses(str){
    var ajaxRequest;  // The variable that makes Ajax possible!
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    }catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (e){
                // Something went wrong
                alert("Problem with your browser!");
                return false;
            }
        }
    }

   // Create a function that will receive data sent from the server
   // and will update div section in the same page.
   ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('courses'); // the div section where it should be displayed
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }

    // Now get the value from user and pass it to server script.
    var queryString = "?thesis_id=" + str ;
    ajaxRequest.open("GET", "http://teachers.teicm.gr/dvarsam/index.php/get_courses" + queryString, true);
    ajaxRequest.send(null); 
}

---

我认为我需要在onsubmit函数中添加一些东西，只有在ajax jquery完成时才会返回true。我的想法正确吗？有人能帮我吗？

首先，给你的提交按钮提供一个ID，并在默认情况下禁用它：

<input  type='submit' ID="SUBMITBUTTON" name='action' value='Αποστολή' disabled />

或

---

您可能应该从坚持使用一种表单开始：或者使用vanilla javascript或jQuery。使用这两者，尤其是jQuery，可以很容易地禁用submit按钮，并在延迟请求完成时启用它。这听起来是个不错的答案。只是一个愚蠢的问题。我应该把$（'SUBMITBUTTON'）.removeAttr（'disabled'）放在哪里；我试了两种方法，但都不管用。我在ajaxRequest.send（null）之后将代码放在脚本中；

<input  type='submit' ID="SUBMITBUTTON" name='action' value='Αποστολή' disabled />

$('#SUBMITBUTTON').removeAttr('disabled');

$('#SUBMITBUTTON').prop('disabled', false);