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? 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
– James Thorpe, Commented Jul 10, 2015 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
– Marc B, Commented Jul 10, 2015 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
– ChrisC, Commented Jul 10, 2015 at 15:23

Nelson Teixeira · Accepted Answer · 2015-07-10 15:18:35Z

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, 2015 at 15:18

Nelson Teixeira

6,6366 gold badges46 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Thorpe Over a year ago

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.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related