Auto insert string text

Question

I have several words and I would like them to be inserted in sequence with an interval of 5 minutes in a form. I’ve done a lot of research, but so far nothing. I hope someone will help me create this automatic javascript. The code cannot be changed:

<form id="procurar-form" method="get" action="Site">
  <input type="text" class="procurar-field" placeholder="Vamos Procurar?" name="q" value="verde"> 
  <button class="procurar-btn" id="button_procurar">Procurar</button>
</form>

Answer 1

First, the objects that will be responsible for manipulating the DOM and the word list:

const form = document.getElementById("procurar-form");
const input = form.getElementsByTagName("input")[0];
const button = document.getElementById("button_procurar");

const palavras = ["Papel", "Vidro", "Lata", "Terra", "etc"];

Second, we need to write a function that generates a random value, update the word within the field and execute the click of the button (the latter was prompted in the comments). To do so, we do:

function novaPalavra() {
  // Gera um valor aleatório de 0 ao comprimento da lista de palavras:
  const index = Math.floor(Math.random() * palavras.length);

  // Atualiza o valor do campo para a palavra sorteada:
  input.value = palavras[index];

  // Executa o clique do botão:
  button.click();
}

This function does what you want, but you have also been asked to run this code every 5 minutes. To do this, we can use the function setInterval, which takes the name of a function and the range it will be executed in milliseconds. For a 5 minute break, we need an interval of 5*60*1000 milliseconds. So:

setInterval(novaPalavra, 5*60*1000);

This way, every 5 minutes the word in the field will be changed to another one randomly and a click on the button will be executed.

See working:

const form = document.getElementById("procurar-form");
const input = form.getElementsByTagName("input")[0];
const button = document.getElementById("button_procurar");

const palavras = ["Papel", "Vidro", "Lata", "Terra", "etc"];

function novaPalavra() {
  const index = Math.floor(Math.random() * palavras.length);
  input.value = palavras[index];
  button.click();
}

setInterval(novaPalavra, 1000);

<form id="procurar-form" method="get" action="Site">
  <input type="text" class="procurar-field" placeholder="Vamos Procurar?" name="q" value="verde"> 
  <button class="procurar-btn" id="button_procurar">Procurar</button>
</form>

Since the click of the button will submit the form, updating the page - or redirecting the user - makes no sense to have a code that runs every 5 minutes, because always in its first execution the same will stop due to the submission of the form. The reply was given in this way by the insistence of the author on the comments.

Answer 2

You can try like this:

var input = document.getElementById("procurar-field");

var palavras = ["Lata", "Vidro", "Papel", "Terra"];

function inserePalavras(index) {
   if (index < palavras.length) {
    input.value = palavras[index];
    
    var botao = document.getElementById("button_procurar");
    botao.click();
    
    setTimeout(function() { inserePalavras(index+1); }, 1000); // Para 5 minutos basta mudar o 1000 para 300000
   }
}

setTimeout(function() { inserePalavras(0); }, 1000); // Para 5 minutos basta mudar o 1000 para 300000

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="procurar-form"  method="get" action="javascript:void(0)">
  <input type="text" class="procurar-field" id="procurar-field" placeholder="Vamos Procurar?" name="q" value="verde"> 
  <button class="procurar-btn" id="button_procurar">Procurar</button>
</form>

After all words are inserted the code for the execution of the setTimeout not to remain an infinite loop.

As soon as you change the word on input and executed a click automático on the Find button

Note: I changed the action="Site" from the form to action="javascript:void(0)" not to recharge and can show here on stackoverflow when to use and only return the action action="Site"