want to execute change event inside the for loop

Question

I am trying to select the zip code which is in input tag and once it is selected the onchange event in the span should be executed.I am using tampermonkey and trying to call onchange event from there. it executes fine when there is one zip code selected at a time. However, selecting multiple zip code is not working. it selects all zip code but when onchange event calls, it deselect all zip code.

<table>
  <tr>
    <td>
      <span id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl02_lblDistribRegionName"><span class="indentation"></span> 76511Z </span>
    </td>
    <td>
      <div class="right">
        <span id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl02_lblEstimatedCirculationFormatted" class="dimmedItem">13</span>
      </div>
    </td>
    <td>
      <input name="ctl00$body$AdInsRegionsLightCtrl$gvListRegions$ctl02$tbQuantityOrdered" type="text" value="0" size="6" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$body$AdInsRegionsLightCtrl$gvListRegions$ctl02$tbQuantityOrdered\&#39;,\&#39;\&#39;)&#39;, 0)"
        onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl02_tbQuantityOrdered" disabled="disabled" class="aspNetDisabled read-only right" class="right" />
      <!- comment to prevent PlaceHolder eating whitespaces -->
      <span class="mandatory" title="Mandatory field">*</span> <span data-val-controltovalidate="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl02_tbQuantityOrdered" data-val-errormessage="Fill-in ordered quantity" data-val-display="Dynamic" data-val-validationGroup="AdInsertRegionsNumber"
        id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl02_reqQuantityOrdered" class="validation-error" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="display:none;">Fill-in ordered quantity</span>
      <span data-val-controltovalidate="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl02_tbQuantityOrdered" data-val-errormessage="Fill-in number in valid format." data-val-display="Dynamic" data-val-validationGroup="AdInsertRegionsNumber" id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl02_cvQuantityOrderedInt"
        class="validation-error" data-val="true" data-val-type="Integer" data-val-evaluationfunction="CompareValidatorEvaluateIsValid" data-val-operator="DataTypeCheck" style="display:none;">Fill-in number in valid format.</span>
      <span data-val-controltovalidate="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl02_tbQuantityOrdered" data-val-errormessage="Fill-in whole number greater or equal to 0." data-val-display="Dynamic" data-val-validationGroup="AdInsertRegionsNumber" id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl02_cvQuantityOrderedZero"
        class="validation-error" data-val="true" data-val-type="Integer" data-val-evaluationfunction="CompareValidatorEvaluateIsValid" data-val-valuetocompare="0" data-val-operator="GreaterThanEqual" style="display:none;">Fill-in whole number greater or equal to 0.</span>
      <span data-val-controltovalidate="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl02_tbQuantityOrdered" data-val-errormessage="Quantity cannot exceed circulation" data-val-display="Dynamic" data-val-validationGroup="AdInsertRegionsNumber" id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl02_cvQuanityOrderedLessThanCirculation"
        class="validation-error" data-val="true" data-val-type="Integer" data-val-evaluationfunction="CompareValidatorEvaluateIsValid" data-val-valuetocompare="13" data-val-operator="LessThanEqual" style="display:none;">Quantity cannot exceed circulation</span>
    </td>
    <td><span class="checkbox" onchange="document.getElementById(&#39;ctl00_body_AdInsRegionsLightCtrl_hfDummy&#39;).value=&#39;7140532;1;&#39;+document.getElementById(&#39;ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl02_cbDeliveryTypeQuantity1&#39;).checked; __doPostBack(&#39;ctl00$body$AdInsRegionsLightCtrl$lbtnDummy&#39;,&#39;&#39;)"><input id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl02_cbDeliveryTypeQuantity1" type="checkbox" name="ctl00$body$AdInsRegionsLightCtrl$gvListRegions$ctl02$cbDeliveryTypeQuantity1" /><label for="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl02_cbDeliveryTypeQuantity1">0</label></span>
      <span
        id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl02_lblDeliveryTypeQuantity1" title="13"> (13)</span>
    </td>
    <td><span class="aspNetDisabled checkbox" onchange="document.getElementById(&#39;ctl00_body_AdInsRegionsLightCtrl_hfDummy&#39;).value=&#39;7140532;2;&#39;+document.getElementById(&#39;ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl02_cbDeliveryTypeQuantity2&#39;).checked; __doPostBack(&#39;ctl00$body$AdInsRegionsLightCtrl$lbtnDummy&#39;,&#39;&#39;)"><input id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl02_cbDeliveryTypeQuantity2" type="checkbox" name="ctl00$body$AdInsRegionsLightCtrl$gvListRegions$ctl02$cbDeliveryTypeQuantity2" disabled="disabled" /><label for="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl02_cbDeliveryTypeQuantity2">0</label></span>
      <span
        id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl02_lblDeliveryTypeQuantity2" title="0"> (0)</span>
    </td>
    <td>
      <input name="ctl00$body$AdInsRegionsLightCtrl$gvListRegions$ctl02$tbRunOutOfSequence" type="text" maxlength="1" size="2" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$body$AdInsRegionsLightCtrl$gvListRegions$ctl02$tbRunOutOfSequence\&#39;,\&#39;\&#39;)&#39;, 0)"
        onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl02_tbRunOutOfSequence" />
      <span data-val-controltovalidate="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl02_tbRunOutOfSequence" data-val-errormessage="Only number 1-9 is allowed or empty field." data-val-display="Dynamic" data-val-validationGroup="AdInsertRegionsNumber" id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl02_regRunOutOfSequence"
        class="validation-error" data-val="true" data-val-evaluationfunction="RegularExpressionValidatorEvaluateIsValid" data-val-validationexpression="[1-9]" style="display:none;">Only number 1-9 is allowed or empty field.</span>
    </td>
    <td>
      <div style="text-align: center;">
        <a id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl02_lbtnEdit" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$body$AdInsRegionsLightCtrl$gvListRegions$ctl02$lbtnEdit&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))">Edit</a>
      </div>
    </td>
    <td>
      <div style="text-align: center;">
        <input id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl02_cbSelect" type="checkbox" name="ctl00$body$AdInsRegionsLightCtrl$gvListRegions$ctl02$cbSelect" />
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <span id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl03_lblDistribRegionName"><span class="indentation">..</span> 76511 </span>
    </td>
    <td>
      <div class="right">
        <span id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl03_lblEstimatedCirculationFormatted">13</span>
      </div>
    </td>
    <td>
      <input name="ctl00$body$AdInsRegionsLightCtrl$gvListRegions$ctl03$tbQuantityOrdered" type="text" value="0" size="6" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$body$AdInsRegionsLightCtrl$gvListRegions$ctl03$tbQuantityOrdered\&#39;,\&#39;\&#39;)&#39;, 0)"
        onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl03_tbQuantityOrdered" disabled="disabled" class="aspNetDisabled read-only right" class="right" />
      <!- comment to prevent PlaceHolder eating whitespaces -->
    </td>
    <td><span class="aspNetDisabled checkbox" onchange="document.getElementById(&#39;ctl00_body_AdInsRegionsLightCtrl_hfDummy&#39;).value=&#39;7140533;1;&#39;+document.getElementById(&#39;ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl03_cbDeliveryTypeQuantity1&#39;).checked; __doPostBack(&#39;ctl00$body$AdInsRegionsLightCtrl$lbtnDummy&#39;,&#39;&#39;)"><input id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl03_cbDeliveryTypeQuantity1" type="checkbox" name="ctl00$body$AdInsRegionsLightCtrl$gvListRegions$ctl03$cbDeliveryTypeQuantity1" disabled="disabled" /><label for="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl03_cbDeliveryTypeQuantity1">0</label></span>
      <span
        id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl03_lblDeliveryTypeQuantity1" title="13" class="aspNetDisabled"> (13)</span>
    </td>
    <td><span class="aspNetDisabled checkbox" onchange="document.getElementById(&#39;ctl00_body_AdInsRegionsLightCtrl_hfDummy&#39;).value=&#39;7140533;2;&#39;+document.getElementById(&#39;ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl03_cbDeliveryTypeQuantity2&#39;).checked; __doPostBack(&#39;ctl00$body$AdInsRegionsLightCtrl$lbtnDummy&#39;,&#39;&#39;)"><input id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl03_cbDeliveryTypeQuantity2" type="checkbox" name="ctl00$body$AdInsRegionsLightCtrl$gvListRegions$ctl03$cbDeliveryTypeQuantity2" disabled="disabled" /><label for="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl03_cbDeliveryTypeQuantity2">0</label></span>
      <span
        id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl03_lblDeliveryTypeQuantity2" title="0" class="aspNetDisabled"> (0)</span>
    </td>
    <td>
      <input name="ctl00$body$AdInsRegionsLightCtrl$gvListRegions$ctl03$tbRunOutOfSequence" type="text" maxlength="1" size="2" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$body$AdInsRegionsLightCtrl$gvListRegions$ctl03$tbRunOutOfSequence\&#39;,\&#39;\&#39;)&#39;, 0)"
        onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl03_tbRunOutOfSequence" />
      <span data-val-controltovalidate="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl03_tbRunOutOfSequence" data-val-errormessage="Only number 1-9 is allowed or empty field." data-val-display="Dynamic" data-val-validationGroup="AdInsertRegionsNumber" id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl03_regRunOutOfSequence"
        class="validation-error" data-val="true" data-val-evaluationfunction="RegularExpressionValidatorEvaluateIsValid" data-val-validationexpression="[1-9]" style="display:none;">Only number 1-9 is allowed or empty field.</span>
    </td>
    <td>
      <div style="text-align: center;">
        <a id="ctl00_body_AdInsRegionsLightCtrl_gvListRegions_ctl03_lbtnEdit" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$body$AdInsRegionsLightCtrl$gvListRegions$ctl03$lbtnEdit&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))">Edit</a>
      </div>
    </td>
    <td>
      <div style="text-align: center;">

      </div>
    </td>
  </tr>
</table>

Javascript Code:

var url = location.protocol + '//' + location.host + 'Booking/AdInsert.aspx?OrderItemID=' + orderitemid + '&OrderID=' + orderid;
for (i = 0; i <= getzip.length - 1; i++) {

  $('span:contains(' + getzip[i] + ')').parent().parent().find('td:nth-child(4) > Span > input').not('[disabled="disabled"]').attr('checked', true);
  $('span:contains(' + getzip[i] + ')').parent().parent().find('td:nth-child(4) > Span > input').not('[disabled="disabled"]').parent().trigger('change');
  check_http_request(url);
}

function check_http_request(url)
{
  var xmlHttp = new XMLHttpRequest(url);
  console.log(url)
  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      callback(xmlHttp.responseText);
    }
    xmlHttp.open("POST", url, true); // true for asynchronous
    xmlHttp.send(null);
  }
}

PSA: In 2022 [template strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) exist. — tadman, Dec 19 '22 at 14:21
⟼Remember, it's always important, *especially* when learning and asking questions on Stack Overflow, to keep your code as organized as possible. [Consistent indentation](https://en.wikipedia.org/wiki/Indentation_style) helps communicate structure and, importantly, intent, which helps us navigate quickly to the root of the problem without spending a lot of time trying to decode what's going on. — tadman, Dec 19 '22 at 14:21
Your title makes no sense. There is no such thing as an “onchange event”. There is a [`change` event](//developer.mozilla.org/en/docs/Web/API/HTMLElement/change_event). An [`Event`](//developer.mozilla.org/en/docs/Web/API/Event) cannot be “executed”. An event _handler_ can be executed. But event handlers for the `change` event are executed in response to a user-initiated action. User-initiated actions don’t happen in a `for` loop. — Sebastian Simon, Dec 19 '22 at 14:25
Inline event handler attributes like `onchange` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. Declare your variables; your code would fail in strict mode. — Sebastian Simon, Dec 19 '22 at 14:25
Instead of concatenating query parameters manually, please use the [`URL` API](//developer.mozilla.org/en/docs/Web/API/URL) and its `searchParams` property, which [_correctly encodes_ parameters](/q/486896/4642212): `const url = new URL("Booking/AdInsert.aspx", location); url.searchParams.set("OrderItemID", orderitemid); url.searchParams.set("OrderID", orderid);` — Sebastian Simon, Dec 19 '22 at 14:28
I can't even see the HTML because of the gargantuan element props--it's important to make the posted code complete enough to understand the problem, but clear enough it's legible. Some of your inline event handler declarations are suspicious. — Dave Newton, Dec 19 '22 at 15:36
@sebastian-simon, thanks for your feedback, I don't have privilege to change the html code. the only thing i can change is javascript code. as you said, we cannot execute "change" event through "for" loop. However, for a single zip code the code is executing fine but not for multiple zip codes. I am attaching gif here: https://giphy.com/gifs/7POMxW4EtKNevWJSOt — sameer, Dec 19 '22 at 15:48
A simplified version of the HTML you've posted would certainly help. — double-beep, Dec 23 '22 at 10:15

want to execute change event inside the for loop

0 Answers0