如何根据AJAX调用的响应突破javascript循环？

Question

My topic has been covered extensively here. I have searched alot and tried alot of code but have not found anything that helps me solve my specific situation. So I would like to pose this question to the community.

I am building a page with 12 form fields where I loop through the fields and make an AJAX call to test the value against a database. My issue is that I need to stop my loop and get user input based on a particular response from my AJAX call. So far I have been unable to stop my loop until it reaches the end.

Here is my form:

<form name="claimForm">
<table>
<tr>
<td> <input type="text" id="icdcode1"></td>
<td> <input type="text" id="icdcode2"></td>
<td> <input type="text" id="icdcode3"></td>
<td> <input type="text" id="icdcode4"></td>

</tr>

<tr>
<td> <input type="text" id="icdcode5"></td>
<td> <input type="text" id="icdcode6"></td>
<td> <input type="text" id="icdcode7"></td>
<td> <input type="text" id="icdcode8"></td>

</tr>

<tr>
<td><input type="text" id="icdcode9"> </td>
<td> <input type="text" id="icdcode10"></td>
<td> <input type="text" id="icdcode11"></td>
<td> <input type="text" id="icdcode12"></td>

</tr>

<tr> <td colspan="4"> <input type="button" value="Check IDC Code" onClick="javascript:claimValidate();"></td></tr>
</table>


</form>

<div id="pageresponse"></span>

Here is my claimValidate function:

function claimValidate() {

var isFound = false; 
for (i = 1; i <= 12; i++) {

    var icdcode = 'icdcode'+i;

    if (!isFound) {
        if(document.getElementById(icdcode)) {
            var retrieved = document.getElementById(icdcode).value;

                if (retrieved != "") {

                       if (ajaxCheck(retrieved)) {

                        }


                } // end if retrieved

        } // end if document.getElementbyId
    } // end if !isFound    



} // end claimValidate

And here is my ajaxCheck function

function ajaxCheck(icdcode) {

var xmlhttp = new XMLHttpRequest();    

 xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4) {
            //alert(isFound)
            resp = xmlhttp.responseText;

            if (resp == icdcode) {
                return true;
            } else if (resp == "Search Failed") {
                alert("You must enter a valid issue code.")
                return false;
            }  // end if resp

        if ((resp !== "Search Failed") && (resp.length > 0)) { 
                document.getElementById("pageresponse").innerHTML = resp;
                return false;
            }

        } // end readystate

    } // end onreadystatechange

                xmlhttp.open("GET", "validate_idc_code.asp?q=" + icdcode, true);
                xmlhttp.send();

} // end ajaxCheck

My intent is to break out of the loop and stop if it gets to the final if statement in ajaxCheck but it is not and I'm not sure why. I showed my code to a co-worker and he seemed to think that ajaxCheck would not actually return anything because it was being called in a separate function. He suggested passing all my form fields as an array to the ASP page I have doing the database check, but I'm not sure that is the best solution.

I would be grateful for any guidance the experts out there could provide for me.

Thank you!

-- Chris

Answer 1

Well you can do it by using a global var indicating that you want your loop to continue or stop. then in claimValidate you would put something like

if (!loopActive) return;

But this is a bad practice. The best is restructuring like @MarcB and @JamesThorpe had adviced.

I only answered with this ideia, because I understand that in order to learn anything you have to progress initially in not the best way and then progressively understand why that is not the best practice.