Formulário Manual



O exemplo abaixo requer conhecimento em HTML, JavaScript e Parâmetros.

Construa um formulário manual com a tarefa Conteúdo que insere dados em tabelas e executa processos.

Aba - HTML

<!-- css ====> https://purecss.io/ -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.5/pure-min.css">

<form id="meuFormulario" class="pure-form pure-form-stacked">
<fieldset>
<legend>Meu formulário</legend>
<label>Nome</label>
<input type="text" id="meu_nome" name="meu_nome" />
<label>Email</label>
<input type="text" id="meu_email" name="meu_email" />
<label >Estado</label>
<select id="meu_estado" name="meu_estado">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>

<label class="pure-checkbox">
<input type="checkbox" id="meu_aceite" name="meu_aceite" /> Aceito</label>

</fieldset>
<button type="submit" class="pure-button pure-button-primary">Submeter</button>
</form>


Aba - Java

// obrigatório: espera html carregar, para depois fazer referencia JS com html
document.addEventListener('DOMContentLoaded', function() {

const meuFormulario = document.getElementById("meuFormulario");

const meu_nome = document.getElementById("meu_nome");
const meu_email = document.getElementById("meu_email");
const meu_estado = document.getElementById("meu_estado");
const meu_aceite = document.getElementById("meu_aceite");

// Fica escutando o botão SUBMIT - ENVIAR
meuFormulario.addEventListener("submit", function(evt) {
evt.preventDefault(); // evita que o formulário redireciona da página
enviarDados(); // envia os dados
});

// enviará para o gaio os valores dos parâmetros
function enviarDados() {

// preparar tipo de EXECUÇÃO de PROCESSO
// dispatchEvent é a PONTE desse código com o GAIO

// 1. Preparar
const rodarProcesso = {
formFlowId: 658, // numero do processo
formType: 'loadFlow', // carrega processo em background,
formReload: true, // recarrega a página atual
}

// 2. Definir parâmetros
// 2.1 Um por linha
rodarProcesso.params = [
{ paramName: 'meu_nome', paramValue: meu_nome.value || 'Nome Padrão' },
{ paramName: 'meu_email', paramValue: meu_email.value || 'email@padrao.io' },
{ paramName: 'meu_estado', paramValue: meu_estado.value || 'MG' },
{ paramName: 'meu_aceite', paramValue: meu_aceite.checked ? 'Aceito' : 'Desisto' },
];

console.log(rodarProcesso);
dispatchEvent(rodarProcesso);

}

}, false);
Este artigo foi útil?
Cancelar
Obrigado!