在慢速ajax jquery完成之前不提交表单

时间:2015-10-28 19:49:56

标签: javascript php jquery ajax forms

我在我的表单中使用的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>";

关于提交功能。它检查是否点击了“我不是机器人”的插座

function recaptcha () 
{
    if(grecaptcha.getResponse() == ""){
        alert('Παρακαλώ επιβεβαιώστε ότι δεν είστε ρομπότ κάνοντας κλικ στο κουτάκι.');
        return false;
    } 
    else 
    {
        return true;
    }   
}

OnChange javascript。它显示了&lt; p id ='courses'&gt;

//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); 
}

我认为我需要在提交函数中添加一些内容,只有在完成ajax jquery时才会返回true。我在想什么?有人可以帮我吗?

1 个答案:

答案 0 :(得分:0)

首先,为您的提交按钮提供一个ID并默认禁用它:

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

然后你可以在Ajax的On Success返回中执行类似的操作来启用提交按钮:

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

OR

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