Publicado em 23 de nov.

Submeter formulario ao clicar em um button fora do form

Bom dia!

A questão é a seguinte, tenho o seguinte form

	<form onsubmit="return false;" action="./busca.php" method="post" name="buscar" id="buscar">

	 

	           <input type="text" name="texto">

	 

	          <button>Executa</button>

	 

	</form>

	 

	Que está funcionando perfeitamente com a seguinte estrutura do script abaixo

	 

	  var form = document.getElementById('buscar');

	 

	  form.addEventListener('submit', function(e)

	  {

	      e.preventDefault();

	 });

	 

	 

	O que preciso, é saber como submeter esse mesmo formulário ao clicar em button fora do form sem modificar esse script?

	 

	<button id="fora_do_form">Submeter o form</button>

	 

	 

	Agradeço desde já!

Discussão (6)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Omar~· 23 de nov.

Basta apenas que o botão externo execute uma função que manda o formulário submeter.

function exemplo() {
 document.getElementById('buscar').submit();
}

	Além do mais caso queira adicionar tag <button> sem que esse submeta o formulário você tem que dizer qual o tipo de ação que esse botão realizará, por padrão qualquer navegador já interpreta essa tag como submit quando dentro de um formulário, então basta apenas mudar assim você não precisa de uma função controlando isso

	**<button type="button">Executa</button>** <- Não executa o formulário.

Frank K Hosaka· 23 de nov.

Eu excluiria o código JavaScript e faria assim:

<form onsubmit="return false" action="./busca.php" method=post name=buscar id=frmbuscar>
<input name="texto">
<button>Esse botão não funciona</button>
</form>

<button onclick=frmbuscar.submit()>Esse botão funciona</button>

tetsuo· 23 de nov.

Basta usar o atributo form no button, veja:
https://www.w3schools.com/tags/att_button_form.asp

Frank K Hosaka· 23 de nov.

3 minutos atrás, tetsuo disse:

Basta usar o atributo form no button, veja:
https://www.w3schools.com/tags/att_button_form.asp

O exemplo da w3schools só tem um botão fora do <form>. Eu entendi que o desenvolvedor quer impressionar o cliente com um botão que não funciona e outro que funciona. Mas a sua intervenção foi válida, eu não sabia que o elemento button tinha atributos para controlar o formulário, eu gastei o meu JavaScript embutido de bobeira.

Omar~· 24 de nov.

Mas vale ressaltar o uso do javascript para criar uma integração com usuário.

Assim pode-se controlar o que o usuário pode fazer antes de enviar dados para o servidor, poupa tempo dele e do servidor também.... "se for o caso"

var formulario = document.getElementById('buscar'),
 texto = '';

function exemplo() {
 texto = formulario.elements[0].value.trim();

 if (!texto) {
 // nada digitado no primeiro campo do formulário
 } else if (texto.length < 3) {
 // o primeiro campo do formulário DEVE possuir pelo menos 3 caracteres
 } else if (texto.length > 10) {
 // o primeiro campo do formulário NÃO DEVE mais de 10 caracteres
 } else if (!texto.match(/^([a-zA-Z À-ú]+)$/i)) {
 // o primeiro campo do formulário só pode ser usado letras
 } else {
 formulario.submit(); // pode validar
 }
}

	Lógico que tudo apresentado pelo script acima pode ser manipulado pelos atributos do input. Mas a questão é criar um personalização, seja lá qual for.

luiz monteiro· 27 de nov.

Boa tarde.

	Tanto com javascript "formulario.submit()... e tanto com "<button type="submit" form="form1" value="Submit">Submit</button>", deu certo.

	Mas optei pelo javascript por insegurança com incompatibilidades de navegadores caso poderia acontecer. Eu testei em diferentes dispositivos mas prevaleceu a insegurança.

	Estarei em um novo projeto amanhã, e vou implementar o esse button. Não conhecia e nem imaginava isso.

	Resolvido meu problema.

	Obrigado pela ajuda de todos.