Ir para conteúdo
luiz monteiro

Submeter formulario ao clicar em um button fora do form

Recommended Posts

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á!
 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por GOD
      Quero pegar o dado:
      CHEGADA e SAÍDA do form 1 e colocar para ser exibido no campo;
      DATAS DA ESTADIA no form 2.
      e
      ADULTO E CRIANÇA também do form 1 para o form 2
      Como faço isso sem utilizar banco de dado. Se possível somente com html, css. E se não for possível pode entrar o Javascript ou como possível for. 
       
      Desde já agradeço. 
       
       
      Form 1
       
       
      <!DOCTYPE html> <html> <head> <!---------------------------------- FORMULARIO 1 ------------------------------------------------> <form class="reserva-form" action="" method="post"> <fieldset class="fiesdeset"> <div class="reserva-form-chegada"> <label class="reserva-form-chegada-label">Chegada ↴</label> <br /> <input type="date" /> </div> <div class="reserva-form-saida"> <label class="reserva-form-saida-label">Saida ↴</label> <br /> <input type="date" /> </div> <div class="reserva-form-adulto"> <label class="inicio" style="margin: 0">Adultos</label> <select name="ad" id="adultos"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio" style="margin: 0">Crianças</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="reserva-form-pesquisar"> <button type="submit" class="botao-pesquisar type=" submit" id="bt-pesquisa" data-enabled="enabled"> Pesquisar </button> </div> <div class="reserva-form-check-in"> <a href="form-cadastro.html" class="botao-checkin" target="_blank">Pré-checkin</a> </div> </fieldset> </form> </body> </html>  
       
      Form 2
       
       
      <!DOCTYPE html> <html> <head> <!------------------------------ FORMULARIO 2 ---------------------------------------------------> <form class="reserva-form" action="" method="post"> <fieldset class="fiesdeset"> <div class="reserva-form-estadia"> <label class="reserva-form-estadia-label">DATAS DA ESTADIA ↴</label> <br /> <input type="text" name="estadia" value="10/06/2022 - 10/07/2022" /> </div> <div class="reserva-form-quarto"> <label class="reserva-form-quarto-label">   QUARTOS E HÓSPEDES ↴</label> <br> <label class="inicio">  Nº de Quartos</label> <select name="ad" id="quarto"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="reserva-form-adulto"> <label class="inicio">Adultos</label> <select name="ad" id="adultos"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio" style="margin: 0">Crianças</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio">&nbsp Nº de Crianças 0 aos 12 Anos</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="reserva-form-pesquisar"> <button type="submit" class="botao-pesquisar type=" submit" id="bt-pesquisa" data-enabled="enabled"> Buscar </button> </div> </fieldset> </form> </body> </html>  
    • Por eduardodsilvaq
      Erro retornado no console do navegador: 400 bad request
      Rastreei o erro ate essa parte no arquivo admin-ajax.php mudando o valor de resposta de 0 para 1:
      if ( is_user_logged_in() ) { // If no action is registered, return a Bad Request response. if ( ! has_action( "wp_ajax_{$action}" ) ) { wp_die( '0', 400 ); } Tentei de tudo, mas infelizmente nao entendi oq realmente significa esse login e como ele funciona.
      Vi algumas pessoas tendo problema com o host, no meu caso estou usando hostinger. (Nao creio que isso e relevante mas ta ai.)
       
      Código utilizado:
       
      Javascript
      function formValidation() { event.preventDefault(); var name = document.forms["contactForm"]["name"].value; var email = document.forms["contactForm"]["email"].value; var subject = document.forms["contactForm"]["subject"].value; var message = document.forms["contactForm"]["message"].value; document.getElementById('status').innerHTML = ''; var errorMessage="<span class='error'>All fields are required.</span>"; var regEx = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; if (name.trim() == "" ||email.trim() == "" || subject.trim() == "" || message.trim() == "") { document.getElementById('status').innerHTML = errorMessage; return false; } if (!regEx.test(email)) { var errorMessage="<span class='error'>Invalid email.</span>"; document.getElementById('status').innerHTML = errorMessage; return false; } processContactSubmit(); return true; } function processContactSubmit() { var request = new XMLHttpRequest(); request.open("POST", "/wp-admin/admin-ajax.php?action=process_contact_form"); request.onreadystatechange = function() { if(this.readyState === 4 && this.status === 200) { document.getElementById("status").innerHTML = this.responseText; } }; var myForm = document.getElementById("contactForm"); var formData = new FormData(contactForm); request.send(formData); } functions.php
      add_action('wp_ajax_nopriv_process_contact_form', 'process_contact_form'); add_action('wp_ajax_process_contact_form', 'process_contact_form'); //Retirar essa parte para error no console, no contrario ira aparecer no navegador o numero 0. function process_contact_form() { $to = "Recipient Email Address"; $subject = $_POST["subject"]; $headers = "Testing"; $message = $_POST["message"]; $attachments = ""; $sent = wp_mail($to, $subject, $message, $headers, $attachments); if (! $sent) { echo "<span class='error'>Problem in sending mail.</span>"; } else { echo "<span class='success'>Hi, thank you for the message.</span>"; } wp_die(); } Html
      <form name="contactForm" id="contactForm" method="post" onsubmit="return formValidation()" action=""> <p class="comment-form-comment"><textarea id="message" name="message" required="" placeholder="" aria-required="true"></textarea></p> <p class="comment-form-author"><label for="author">Nome: </label> <input id="name" name="name" required="" size="30" type="text" value=" " /></p> <p class="comment-form-author about"><label for="author">Assunto: </label> <input id="subject" name="subject" required="" size="40" type="text" value=" " /></p> <p class="comment-form-email"><label for="email">Email: </label> <input id="email" name="email" required="" size="30" type="text" value="" /></p> <p class="form-submit"><input id="submit" class="submit" name="email_contato" type="submit" value="Enviar" /></p> </form>&nbsp; <h3><div id="status"></div></h3>  
    • Por unset
      Olá, estou com uma falha de lógica pegando aqui se alguém puder ajudar
       
      Eu tenho um formulário tranquilo, como abaixo
      <label for="cidades" class="form-label">Cidades</label> <select class="form-select mb-3" name="cidades[]" id="cidades" multiple="multiple"> <option value="1">Cidade 1</option> <option value="2">Cidade 2</option> <option value="3">Cidade 3</option> <option value="4">Cidade 4</option> <option value="5">Cidade 5</option> </select>  
      Blz eu recebe os dados do formulário ou seja os ids da cidade certinho em um array 
       
      array(3) { [0]=> string(1) "2" [1]=> string(2) "3" [1]=> string(1) "5" }
      <?php $dados = filter_input_array(INPUT_POST, FILTER_SANITIZE_STRIPPED); var_dump($dados); ?> Agora como inserir todos os ids no banco? utilizando um for? um while? algum exemplo?
       
      Pergunto pq ao tentar inserir no banco somente um registro é inserido e não todos do select
       
    • Por mateus.andriollo
      Qual seria a forma correta de projetar uma aplicação multi formulários. Estou fazendo ela em Jquery com Load() mas algumas ações não são executadas em script.
      Me pergunto seria o correto?
       
      Exemplo: pensando um cadastro de clientes/empresas
      - clientes.php (formulário de cadastro/edição/anexos)
      - empresas.php (formulários de cadastro de empresa/ funcionários/ setores)
      - relatorios.php (clientes e empresas)
       
      Cada página dessa eu chamo, ela vem sempre com o seu conteúdo...
      Pensei no seguinte, todos estea formulários carregados e eu apenas usar função Get() para preencher campos e gerar os relatórios.
       
      Fica a dúvida, pois hj essas páginas extras são HTML com form e ações PHP
       
       
       
       
       
    • Por rafaelti
      Pessoal, tudo bem?
       
      Estou desenvolvendo um pequeno serviço gratuito para integrar formulários HTML com o Microsoft Teams. Gostaria de saber se esta ferramenta é útil para vocês, e também se teriam alguma sugestão de melhoria?
      Pretendo adicionar outros serviços futuramente, como Slack e Facebook Messenger.
       
      Segue o link:
      https://dockform.net
       
      Att,
      Rafael
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.