Envie um formulário usando jQuery

Eu quero enviar um formulário usando jQuery. Alguém pode fornecer o código, uma demonstração ou um link de exemplo?

Depende se você está enviando o formulário normalmente ou por meio de uma chamada AJAX. Você pode encontrar muitas informações em jquery.com , incluindo documentação com exemplos. Para enviar um formulário normalmente, verifique o método submit() para esse site. Para AJAX , existem muitas possibilidades diferentes, embora você provavelmente queira usar os methods ajax() ou post() . Note que post() é realmente apenas uma maneira conveniente de chamar o método ajax() com uma interface simplificada e limitada.

Um recurso crítico, que eu uso todos os dias, que você deve marcar é como o jQuery funciona . Tem tutoriais sobre o uso do jQuery e a navegação do lado esquerdo dá access a toda a documentação.

Exemplos:

Normal

 $('form#myForm').submit(); 

AJAX

 $('input#submitButton').click( function() { $.post( 'some-url', $('form#myForm').serialize(), function(data) { ... do something with response from server }, 'json' // I expect a JSON response ); }); $('input#submitButton').click( function() { $.ajax({ url: 'some-url', type: 'post', dataType: 'json', data: $('form#myForm').serialize(), success: function(data) { ... do something with the data... } }); }); 

Observe que os methods ajax() e post() acima são equivalentes. Existem parâmetros adicionais que você pode adicionar à solicitação ajax() para tratar erros, etc.

Você terá que usar $("#formId").submit() .

Você geralmente chamaria isso de dentro de uma function.

Por exemplo:

   

Você pode obter mais informações sobre isso no site do Jquery .

No jQuery eu preferiria o seguinte:

 $("#form-id").submit() 

Mas, novamente, você realmente não precisa do jQuery para executar essa tarefa – apenas use o JavaScript comum:

 document.getElementById("form-id").submit() 

quando você tem um formulário existente, que agora deve funcionar com jquery – ajax / post agora você pode:

  • pendurar no evento de envio do seu formulário
  • impedir a funcionalidade padrão de envio
  • faça o seu próprio material

     $(function() { //hang on event of form with id=myform $("#myform").submit(function(e) { //prevent Default functionality e.preventDefault(); //get the action-url of the form var actionurl = e.currentTarget.action; //do your own request an handle the results $.ajax({ url: actionurl, type: 'post', dataType: 'application/json', data: $("#myform").serialize(), success: function(data) { ... do something with the data... } }); }); }); 

Observe que, para que a function serialize() funcione no exemplo acima, todos os elementos de formulário precisam ter seu atributo de name definido.

Exemplo do formulário:

 
.. .

@PtF – os dados são submetidos usando o POST neste exemplo, então isso significa que você pode acessar seus dados via

  $_POST['dataproperty1'] 

, onde dataproperty1 é um “nome da variável” no seu json.

aqui syntax exemplo se você usar o CodeIgniter:

  $pdata = $this->input->post(); $prop1 = $pdata['prop1']; $prop1 = $pdata['prop2']; 

Do manual: jQuery Doc

 $("form:first").submit(); 

isso enviará um formulário com o preloader:

 var a=$('#yourform').serialize(); $.ajax({ type:'post', url:'receiver url', data:a, beforeSend:function(){ launchpreloader(); }, complete:function(){ stopPreloader(); }, success:function(result){ alert(result); } }); 

Eu tenho algum truque para fazer um formulário de dados post reformado com método random http://www.jackart4.com/article.html

Observe que, se você já instalou um listener de evento de envio para o seu formulário, a chamada inner para submit ()

 jQuery('#
').submit( function(e){ e.preventDefault(); // maybe some validation in here if (
) jQuery('#
').submit(); });

não funcionará quando tentar instalar um novo ouvinte de events para o evento de envio deste formulário (que falha). Então você tem que acessar o próprio Elemento HTML (desembrulhar do jQquery) e chamar submit () neste elemento diretamente:

  jQuery('#
').submit( function(e){ e.preventDefault(); // note the [0] array access: if (
) jQuery('#
')[0].submit(); });
 $("form:first").submit(); 

Veja events / enviar .

Use-o para enviar seu formulário usando jquery. Aqui está o link http://api.jquery.com/submit/

 

Você também pode usar o plugin de formulário jquery para enviar usando ajax também:

http://malsup.com/jquery/form/

 jQuery("a[id=atag]").click( function(){ jQuery('#form-id').submit(); **OR** jQuery(this).parents("#form-id").submit(); }); 

Observe que no Internet Explorer há problemas com formulários criados dinamicamente. Um formulário criado como este não será enviado no IE (9):

 var form = $('
' + '
'); $(form).submit();

Para fazê-lo funcionar no IE, crie o elemento form e anexe-o antes de enviar da seguinte forma:

 var form = document.createElement("form"); $(form).attr("action", "/test/Delete") .attr("method", "post"); $(form).html(''); document.body.appendChild(form); $(form).submit(); document.body.removeChild(form); 

Criar o formulário como no exemplo 1 e depois anexá-lo não funcionará – no IE9 ele lança um erro JScript DOM Exception: HIERARCHY_REQUEST_ERR (3)

Props para Tommy W @ https://stackoverflow.com/a/6694054/694325

As soluções até agora exigem que você saiba o ID do formulário.

Use este código para enviar o formulário sem precisar saber o ID:

 function handleForm(field) { $(field).closest("form").submit(); } 

Por exemplo, se você estivesse querendo manipular o evento click de um botão, você poderia usar

 $("#buttonID").click(function() { handleForm(this); }); 

Se o botão estiver localizado entre as tags de formulário, prefiro esta versão:

 $('.my-button').click(function (event) { var $target = $( event.target ); $target.closest("form").submit(); }); 

você poderia usá-lo assim:

  $('#formId').submit(); 

OU

 document.formName.submit(); 

Truque do IE para formulários dynamics:

 $('#someform').find('input,select,textarea').serialize(); 

para informação
se alguém usar

 $('#formId').submit(); 

não use nenhum

  

Demorou muitas horas para me encontrar que enviar () não vai funcionar assim.

 function form_submit(form_id,filename){ $.post(filename,$("#"+form_id).serialize(), function(data){ alert(data); }); } 

Ele irá postar os dados do formulário em seu nome de arquivo através do AJAX.

Minha abordagem um pouco diferente Alterar o botão no botão enviar e, em seguida, clique em

 $("#submit").click(function(event) { $(this).attr('type','submit'); $(this).click(); }); 

Eu recomendo uma solução genérica para que você não precise adicionar o código para todos os formulários. Use o plugin do formulário jquery (http://jquery.malsup.com/form/) e adicione este código.

 $(function(){ $('form.ajax_submit').submit(function() { $(this).ajaxSubmit(); //validation and other stuff return false; }); }); 

você poderia fazer assim:

 $('#myform').bind('submit', function(){ ... }); 

Eu também usei o seguinte para enviar um formulário (sem realmente enviá-lo) via Ajax:

  jQuery.get("process_form.php"+$("#form_id").serialize(), {}, function() { alert("Okay!"); });