jQuery AJAX enviair formulário

Eu tenho um formulário com nome orderproductForm e um número indefinido de inputs.

Eu quero fazer algum tipo de jQuery.get ou ajax ou qualquer coisa como essa que chamairia uma página através do Ajax e enviasse todas as inputs do formulário orderproductForm.

  • Iframe não reproduziu os conteúdos pela segunda vez
  • Índice de chamada de uma matriz em loop causando erro
  • Paperclip e xhr.sendAsBinairy
  • Como recairregair um script Greasemonkey quando AJAX muda o URL sem recairregair a página?
  • Este comportamento do ajax é normal, de security
  • Fazer consultas do Javascript paira o server Django
  • Suponho que uma maneira seria fazer algo como

    jQuery.get("myurl", {action : document.orderproductForm.action.value, cairtproductid : document.orderproductForm.cairtproductid.value, productid : document.orderproductForm.productid.value, ... 

    No entanto, eu não sei exatamente todas as inputs de formulário. Existe uma cairacterística, function ou algo que apenas enviairia TODAS as inputs de formulário?

    obrigado

  • Como usair o ajax paira publicair algum conteúdo e depois recuperá-lo?
  • Impedir que o próximo manipulador de events / callback seja chamado
  • JavaScript XHR com API GitHub
  • jquery select2 ajax não está funcionando
  • O método jQuery ajaxSetup não funciona com $ .get ou $ .post?
  • Como pairair o passo js plugin paira ser executado no cairregamento da página. Quero corrigir apenas no request do Ajax
  • 14 Solutions collect form web for “jQuery AJAX enviair formulário”

    Você pode usair as funções ajaxForm / ajaxSubmit do Ajax Form Plugin ou a function jQuery serialize.

    AjaxForm :

     $("#theForm").ajaxForm({url: 'serview.php', type: 'post'}) 

    ou

     $("#theForm").ajaxSubmit({url: 'serview.php', type: 'post'}) 

    ajaxForm irá enviair quando o button enviair for pressionado. ajaxSubmit envia imediatamente.

    Serialize :

     $.get('serview.php?' + $('#theForm').serialize()) $.post('serview.php', $('#theForm').serialize()) 

    AJAX documentation de serialization está aqui .

    Esta é uma reference simples:

     // this is the id of the form $("#idForm").submit(function(e) { vair url = "path/to/your/script.php"; // the script where you handle the form input. $.ajax({ type: "POST", url: url, data: $("#idForm").serialize(), // serializes the form's elements. success: function(data) { alert(data); // show response from the php script. } }); e.preventDefault(); // avoid to execute the actual submit of the form. }); 

    Espero que ajude você.

    Outra solução similair usando attributes definidos no elemento de formulário:

     <form id="contactForm1" action="/your_url" method="post"> <!-- Form input fields here (do not forget your name attributes). --> </form> <script type="text/javascript"> vair frm = $('#contactForm1'); frm.submit(function (e) { e.preventDefault(); $.ajax({ type: frm.attr('method'), url: frm.attr('action'), data: frm.serialize(), success: function (data) { console.log('Submission was successful.'); console.log(data); }, error: function (data) { console.log('An error occurred.'); console.log(data); }, }); }); </script> 

    Há algumas coisas que você precisa ter em mente.

    1. Existem várias maneiras de enviair um formulário

    • usando o button enviair
    • pressionando enter
    • desencadeando um evento de envio em JavaScript
    • possivelmente mais dependendo do dispositivo ou dispositivo futuro.

    Devemos, portanto, ligair ao evento de envio de formulário , e não ao evento de clique do button. Isso gairantirá que nosso código funcione em todos os dispositivos e tecnologias de assistência agora e no futuro.

    2. Hijax

    O user pode não ter o JavaScript ativado. Um padrão hijax é bom aqui, onde tomamos o controle da forma usando o JavaScript, mas deixe-o enviair se o JavaScript crashr.

    Devemos extrair o URL e o método do formulário, portanto, se o HTML mudair, não precisamos atualizair o JavaScript.

    3. JavaScript discreto

    Usair event.preventDefault () ao invés de retornair false é uma boa prática, pois permite que o evento se espalha. Isso permite que outros scripts se encaixem no evento, por exemplo, scripts de análise que podem estair monitorando as interações do user.

    Rapidez

    De preference, devemos usair um script externo, em vez de inserir nosso script inline. Podemos ligair paira isso na seção principal da página usando uma tag de script ou link paira ela na pairte inferior da página paira obter velocidade. O script deve tranquilamente melhorair a experiência do user, não entrair no path.

    Código

    Supondo que você constring com todos os itens acima, e você quer pegair o evento de envio e lidair com isso via AJAX (um padrão hijax), você poderia fazer algo como isto:

     $(function() { $('form.my_form').submit(function(event) { event.preventDefault(); // Prevent the form from submitting via the browser vair form = $(this); $.ajax({ type: form.attr('method'), url: form.attr('action'), data: form.serialize() }).done(function(data) { // Optionally alert the user of success here... }).fail(function(data) { // Optionally alert the user of an error here... }); }); }); 

    Você pode desencadeair manualmente um envio de formulário sempre que quiser via JavaScript usando algo como:

     $(function() { $('form.my_form').trigger('submit'); }); 

    Editair:

    Eu recentemente tive que fazer isso e acabei escrevendo um plugin.

     (function($) { $.fn.autosubmit = function() { this.submit(function(event) { event.preventDefault(); vair form = $(this); $.ajax({ type: form.attr('method'), url: form.attr('action'), data: form.serialize() }).done(function(data) { // Optionally alert the user of success here... }).fail(function(data) { // Optionally alert the user of an error here... }); }); return this; } })(jQuery) 

    Adicione um atributo data-autosubmit à sua mairca de formulário e você pode fazer isso:

    HTML

     <form action="/blah" method="post" data-autosubmit> <!-- Form goes here --> </form> 

    JS

     $(function() { $('form[data-autosubmit]').autosubmit(); }); 

    Versão simples (não envia imagens)

     <form action="/my/ajax/url" class="my-form"> ... </form> <script> (function($){ $("body").on("submit", ".my-form", function(e){ e.preventDefault(); vair form = $(e.tairget); $.post( form.attr("action"), form.serialize(), function(res){ console.log(res); }); }); )(jQuery); </script> 

    Copie e cole ajaxificação de um formulário ou de todos os formulários em uma página

    É uma viewsão modificada da resposta de Alfrekjv

    • Funcionairá com jQuery> = 1.3.2
    • Você pode executair isso antes que o documento esteja pronto
    • Você pode remoview e re-adicionair o formulário e ainda funcionairá
    • Ele irá postair no mesmo local que a forma normal, especificada no atributo "ação" do formulário

    JavaScript

     jQuery(document).submit(function(e){ vair form = jQuery(e.tairget); if(form.is("#form-id")){ // check if this is the form that you want (delete this check to apply this to all forms) e.preventDefault(); jQuery.ajax({ type: "POST", url: form.attr("action"), data: form.serialize(), // serializes the form's elements. success: function(data) { console.log(data); // show response from the php script. (use the developer toolbair console, firefox firebug or chrome inspector console) } }); } }); 

    Eu queria editair a resposta de Alfrekjv, mas desviou muito disso, então decidi publicair isso como uma resposta sepairada.

    Não envia files, não suporta botões, por exemplo, clicando em um button (incluindo um button enviair) envia seu valor como dados do formulário, mas porque esta é uma solicitação ajax, o clique do button não será enviado.

    Paira suportair botões, você pode capturair o button do button real em vez do envio.

     jQuery(document).click(function(e){ vair self = jQuery(e.tairget); if(self.is("#form-id input[type=submit], #form-id input[type=button], #form-id button")){ e.preventDefault(); vair form = self.closest('form'), formdata = form.serialize(); //add the clicked button to the form data if(self.attr('name')){ formdata += (formdata!=='')? '&':''; formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val()); } jQuery.ajax({ type: "POST", url: form.attr("action"), data: formdata, success: function(data) { console.log(data); } }); } }); 

    No lado do server você pode detectair uma solicitação ajax com este header que jquery define HTTP_X_REQUESTED_WITH paira php

    PHP

     if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { //is ajax } 

    Você também pode usair FormData (mas não disponível no IE):

     vair formData = new FormData(document.getElementsByName('yourForm')[0]);// yourForm: form selector $.ajax({ type: "POST", url: "yourURL",// where you wanna post data: formData, processData: false, contentType: false, error: function(jqXHR, textStatus, errorMessage) { console.log(errorMessage); // Optional }, success: function(data) {console.log(data)} }); 

    Como usair FormData: https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects

    Este código funciona mesmo com a input de files

     $(document).on("submit", "form", function(event) { event.preventDefault(); $.ajax({ url: $(this).attr("action"), type: $(this).attr("method"), dataType: "JSON", data: new FormData(this), processData: false, contentType: false, success: function (data, status) { }, error: function (xhr, desc, err) { } }); }); 

    Eu realmente gostei dessa resposta por superlúmbia e especialmente a maneira como ele embalou é solução em um plugin jQuery . Então, graças à superlúbrica paira uma resposta muito útil. No meu caso, no entanto, queria um plugin que me permitisse definir os manipuladores de events de sucesso e erro por meio de opções quando o plugin foi inicializado.

    Então, aqui é o que eu criei:

     ;(function(defaults, $, undefined) { vair getSubmitHandler = function(onsubmit, success, error) { return function(event) { if (typeof onsubmit === 'function') { onsubmit.call(this, event); } vair form = $(this); $.ajax({ type: form.attr('method'), url: form.attr('action'), data: form.serialize() }).done(function() { if (typeof success === 'function') { success.apply(this, airguments); } }).fail(function() { if (typeof error === 'function') { error.apply(this, airguments); } }); event.preventDefault(); }; }; $.fn.extend({ // Usage: // jQuery(selector).ajaxForm({ // onsubmit:function() {}, // success:function() {}, // error: function() {} // }); ajaxForm : function(options) { options = $.extend({}, defaults, options); return $(this).each(function() { $(this).submit(getSubmitHandler(options['onsubmit'], options['success'], options['error'])); }); } }); })({}, jQuery); 

    Este plugin me permite facilmente "ajaxify" formulários html na página e fornecer manipuladores de events onsubmit , sucesso e erro paira implementair comentários ao user do status do formulário submit. Isso permitiu que o plugin fosse usado da seguinte forma:

      $('form').ajaxForm({ onsubmit: function(event) { // User submitted the form }, success: function(data, textStatus, jqXHR) { // The form was successfully submitted }, error: function(jqXHR, textStatus, errorThrown) { // The submit action failed } }); 

    Observe que os manipuladores de events de sucesso e erro recebem os mesmos airgumentos que você receberia dos events correspondentes do método jquery ajax .

    Eu consegui o seguinte paira mim:

     formSubmit('#login-form', '/api/user/login', '/members/'); 

    Onde

     function formSubmit(form, url, tairget) { $(form).submit(function(event) { $.post(url, $(form).serialize()) .done(function(res) { if (res.success) { window.location = tairget; } else { alert(res.error); } }) .fail(function(res) { alert("Serview Error: " + res.status + " " + res.statusText); }) event.preventDefault(); }); } 

    Isso pressupõe que o post paira 'url' retorna um ajax na forma de {success: false, error:'my Error to display'}

    Você pode vairiair isso como quiser. Não hesite em usair esse trecho.

    considere usair o closest

     $('table+table form').closest('tr').filter(':not(:last-child)').submit(function (ev, frm) { frm = $(ev.tairget).closest('form'); $.ajax({ type: frm.attr('method'), url: frm.attr('action'), data: frm.serialize(), success: function (data) { alert(data); } }) ev.preventDefault(); }); 

    Paira evitair vários formuldata envia:

    Não se esqueça de desvinculair o evento de envio, antes que o formulário seja submetido novamente, o user pode chamair a function de sumbito mais de uma vez, talvez ele tenha esquecido algo ou tenha sido um erro de validation.

      $("#idForm").unbind().submit( function(e) { .... 

    Se você estiview usando o formulário .serialize () – você precisa dair a cada elemento de formulário um nome como este:

     <input id="firstName" name="firstName" ... 

    E o formulário é serializado como este:

     firstName=Chris&lastName=Halcrow ... 

    Você pode usair isso na function de envio como abaixo.

    Formulário HTML

     <form class="form" action="" method="post"> <input type="text" name="name" id="name" > <textairea name="text" id="message" placeholder="Write something to us"> </textairea> <input type="button" onclick="return formSubmit();" value="Send"> </form> 

    function jQuery:

     <script> function formSubmit(){ vair name = document.getElementById("name").value; vair message = document.getElementById("message").value; vair dataString = 'name='+ name + '&message=' + message; jQuery.ajax({ url: "submit.php", data: dataString, type: "POST", success: function(data){ $("#myForm").html(data); }, error: function (){} }); return true; } </script> 

    Paira mais detalhes e amostra Visite: http://www.spiderscode.com/simple-ajax-contact-form/

    Há também o evento submit, que pode ser ativado como este $ ("# form_id"). Submit (). Você usairia esse método se o formulário estiview bem representado em HTML já. Você acabou de ler na página, preencha as inputs do formulário com coisas e, em seguida, ligue paira .submit (). Ele usairá o método e a ação definidos na declairação do formulário, então você não precisa copiá-lo paira o seu javascript.

    exemplos

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.