输入表格的数据未保存

Question

I am trying to write a script that can generate insurance quotes for multiple postal codes from this site . So far I've managed to enter data into the dialog. Manually entering consists of: clicking the postal code field, a dialog opens, enter postal code and click "continue".

My script looks like this, so far:

document.querySelector('.btn.btn-default.postal-code').click();
window.setTimeout(function() {
  document.getElementById("PostalCode").value = "K0A1B0";
}, 2000);
window.setTimeout(function() {
  document.querySelector('.btn.btn-orange.validate-postal-code').click();
}, 2000);

If I execute the first two lines, the dialog opens and the postal code gets entered correctly.

If I execute all of it, the postal code doesn't seem to change, but the dialog closes. However, the value is not saved in the field on the main page. What am I doing wrong?

I've done some searching around and tried submitting the form before closing, but don't really know what I need to do here. Neither of these worked:

document.forms[0].submit();
document.getElementById("PostalCode").submit();

Answer 1

When you use setTimeout , it schedules the execution at the time you specify and then continues executing the next line. In your case, the code in the two setTimeout lines will be executed almost at the same time after 2 seconds. You can use 4 second for the second one:

document.querySelector('.btn.btn-default.postal-code').click();
window.setTimeout(function() {
    document.getElementById("PostalCode").value = "K0A1B0";
}, 2000);
window.setTimeout(function(){
     document.querySelector('.btn.btn-orange.validate-postal-code').click();
}, 4000);

Alternatively, you can call the second one inside the first one, in which case the first one will be executed after 2 seconds and will schedule the second one to be executed after 2 more seconds:

document.querySelector('.btn.btn-default.postal-code').click();
window.setTimeout(function() {
    document.getElementById("PostalCode").value = "K0A1B0";
    window.setTimeout(function() {
        document.querySelector('.btn.btn-orange.validate-postal-code').click();
    }, 2000);
}, 2000);

EDIT The value is validated and copied to the main page when the keyboard events are triggered. You can simulate that in JavaScript, but it is easier to do it in jQuery since the website uses it. Add trigger("change") after you change the value and you will see the postal code validated and copied to the box on the main page:

document.querySelector('.btn.btn-default.postal-code').click();
window.setTimeout(function() {
  $("#PostalCode").val("K1A1B0").trigger("change");
}, 2000);
window.setTimeout(function() {
  document.querySelector('.btn.btn-orange.validate-postal-code').click();
}, 4000);

Note: if you use an invalid postal code in the code above, the value will change and get copied, but you will see the validation message and the popup will stay open. If you want to manually validate the postal code, call the ValidatePostalCode() function. It returns true or false , and based on that you can decide what to do next.

Answer 2

MAYBE...

This may be occurring cause you're setting the value,

window.setTimeout(function(){document.getElementById("PostalCode").value = "K0A1B0";}, 2000);

and also submitting it at the same instant... and that's the problem.

window.setTimeout(function(){document.querySelector('.btn.btn-orange.validate-postal-code').click();}, 2000);

Try this out...

var execute = function () {
  'use-strict';
   document.querySelector('.btn.btn-default.postal-code').click();
   window.setTimeout(function(){document.getElementById("PostalCode").value = "K0A1B0";}, 2000);
   window.setTimeout(function(){document.querySelector('.btn.btn-orange.validate-postal-code').click();}, 3000);
}();