How do I break out of javascript loop based on response from AJAX call?

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

You mention it's been covered extensively here, have you seen [this question](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call)? Essentially your `ajaxCheck` function cannot return a value to be used within the loop in this way. You'll need to restructure somewhat. — James Thorpe, Jul 10 '15 at 15:04
you can't, unless you switch to using a synchronous call, or splitting your logic so the "got a response" logic is executed in the ajax call's success handler. — Marc B, Jul 10 '15 at 15:08
Thanks for the responses. I had not seen the article that @James Thorpe linked to. That looks to be a good way of handling what I want to accomplish. I will try that out. — ChrisC, Jul 10 '15 at 15:23

score 1 · Answer 1 · answered Jul 10 '15 at 15:18

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.

answered Jul 10 '15 at 15:18

Nelson Teixeira

6,297
5
36
73

1

This will only work if the requests are synchronous (which you really want to avoid anyway - they're being deprecated and may be removed at some point). With asynchronous requests, you'll find that the entire loop runs before the first ajax request has come back. – James Thorpe Jul 10 '15 at 15:28

How do I break out of javascript loop based on response from AJAX call?

1 Answers1