submit a form with jQuery by clicking a button outside of the form

Asked

Viewed 7,377 times

3

I’d like to send a form without clicking the button submit, using the jQuery click event, I tried this way but I did not succeed:

$(document).ready(function() {
  $('.item').click(function() {
    var id = $(this).attr('rel');
    var form = $("#form_" + id);
    
    form.submit(function() {
      alert('pronto!');
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <form id='form_7' action="" method='POST'>
    <input type='text'>
  </form>
</div>

<button class='item' rel='7'>Botão</button>

Thank you in advance

jquery

3 answers

5


Two problems:

  • removes the # of the ID attribute in HTML. It should be only id="form_7" and not id='#form_7'
  • the Submit method does not accept arguments, it must be only form.submit();

jsFiddle: https://jsfiddle.net/1z2wc5j5/

  • Sergio, good afternoon to you. I would like to send the data using ajax, I can do this by clicking on Ubmit, like this: https://www.dropbox.com/s/gciuolhaxt60je3/js?dl=0 Now if I create an event as I informed I can’t do it

  • 1

    @Maybe because you don’t: https://jsfiddle.net/1z2wc5j5/1/ ?

  • His last suggestion worked, I only had to make an adaptation in my ajax file (which does not imply the success of his suggestion), which was where the error was. Thank you very much! D

  • 1

    @Talesbreno great! I’m glad I helped.

2

I created something more generic that works like the for of label

To use just create

  • button[type="submit"] or input[type="submit"] or .submit
  • Add an attribute for with the form id you want to send.

// Alerta para mostrar que o form foi enviado
$('body').on('submit', 'form', function(e){
  e.preventDefault();
  alert($(this).find('input[name="value"]').val());
});

// Evento de envio de form
// Funciona com 'button[type="submit"]', 'input[type="submit"]', '.submit'
$('body').on('click', 'button[type="submit"], input[type="submit"], .submit', function(){
  var id = this.getAttribute('for');
  var form = $('form[id="'+id+'"]');
  if(form.size()>0){
    form.submit();
  }
});
.submit{
  border: solid 1px #084884;
  border-radius:2px;
  cursor:pointer;
  padding:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form id="teste1">
  <input name="value" type="text" value="1"/>
</form>

<form id="teste2">
  <input name="value" type="text" value="2"/>
</form>

<form id="teste3">
  <input name="value" type="text" value="3"/>
</form>

<ul>
   <li><input type="submit" for="teste1" value="Enviar Form 1"/></li>
  <li><input type="submit" for="teste2" value="Enviar Form 2"/></li>
  <li><input type="submit" for="teste3" value="Enviar Form 3"/></li>
</ul>

<span class="submit" for="teste2">Enviar Form 2</span>

1

You can do this via Javascript...

First create a javascript function that will take your form by ID and submit. ex:

function submete() {
document.getElementById('IDDOSEUFORM').submit();
}

And after that, add an action at the click of your button, the onclick function calling the javascript method. ex:

<button class='item' rel='7' onclick="submete();">Botão</button>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.