JQuery in Chrome Console - Automate populating a text and clicking a button

Question

I go to a specific site to read articles. They have a textbox to enter a category and a submit button. The submission is happening via AJAX. I am trying to automate the populating of textbox and then the clicking of the button. I can do those individually fine, but when I hook it up inside a loop, only the last iteration takes in effect. Here is the code I tried entering on the chrome console:

var myArray1 = ['category1','category2'];
for (var i = 0; i < myArray1.length; i++) {
    $("#txt1").val(myArray1[i]);
    $("#btn1").click();
}

The population of the text box and the clicking of the button only happens at the last iteration.

Answer 1

Try this - you can change the wait for even a longer time by changing the 1000 to a bigger number.

var myArray1 = ['category1','category2'];
for (var i = 0; i < myArray1.length; i++) {
   setTimeout("addCategory('" + myArray1[i] + "')", 1 * 1000);
}

function addCategory(categoryName){
   $("#txt1").val(categoryName);
   $("#btn1").click();
}