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

Posted on

Question :

I would like to send a form without clicking the submit button, using the click event of jQuery, I tried that way but did not succeed:

$(document).ready(function() {
  $('.item').click(function() {
    var id = $(this).attr('rel');
    var form = $("#form_" + id);
    form.submit(function() {
<script src=""></script><div><formid='form_7'action="" method='POST'>
    <input type='text'>

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

Thank you in advance


Answer :

Two problems:

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

jsFiddle: link


I created something more generic that works like for of label

To use just create

  • button[type="submit"] or input[type="submit"] or .submit
  • Add a for attribute with the id of the form you want to send.
// Alerta para mostrar que o form foi enviado
$('body').on('submit', 'form', function(e){

// 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+'"]');
  border: solid 1px #084884;
<script src=""></script><formid="teste1">
  <input name="value" type="text" value="1"/>

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

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

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

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


You can do this via Javascript …

First create a javascript function that will get your form by ID and submit.

function submete() {

And after that, add an action on the click on your button, the onclick function calling the javascript method.

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


Leave a Reply

Your email address will not be published. Required fields are marked *