jQuery AJAX przesłać formularz

Mam formularz z nazwą orderproductFormi nieokreśloną liczbą danych wejściowych.

Chcę zrobić jakiś plik jQuery.get lub ajax lub cokolwiek podobnego, który wywołałby stronę przez Ajax i wysłałby wszystkie dane wejściowe formularza orderproductForm.

Myślę, że jednym ze sposobów byłoby zrobienie czegoś takiego

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

Jednak nie znam dokładnie wszystkich danych wejściowych formularza. Czy istnieje funkcja, funkcja lub coś, co po prostu wyśle ​​WSZYSTKIE dane wejściowe formularza?

Możesz użyć funkcji ajaxForm / ajaxSubmit z Ajax Form Plugin lub funkcji serializacji jQuery.

AjaxForm :

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

lub

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

ajaxForm wyśle ​​po naciśnięciu przycisku przesyłania. ajaxSubmit wysyła natychmiast.

Serializuj :

$.get('server.php?' + $('#theForm').serialize())

$.post('server.php', $('#theForm').serialize())

Dokumentacja serializacji AJAX jest tutaj .

To jest proste odniesienie:

// this is the id of the form
$("#idForm").submit(function(e) {

    e.preventDefault(); // avoid to execute the actual submit of the form.

    var form = $(this);
    var url = form.attr('action');

    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });


});

Mam nadzieję, że Ci to pomoże.

Inne podobne rozwiązanie wykorzystujące atrybuty zdefiniowane w elemencie formularza:

<form id="contactForm1" action="/your_url" method="post">
    <!-- Form input fields here (do not forget your name attributes). -->
</form>

<script type="text/javascript">
    var 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>

Jest kilka rzeczy, o których należy pamiętać.

1. Istnieje kilka sposobów przesłania formularza

• za pomocą przycisku wysyłania
• naciskając Enter
• przez wywołanie zdarzenia przesłania w JavaScript
• ewentualnie więcej w zależności od urządzenia lub przyszłego urządzenia.

Powinniśmy zatem powiązać zdarzenie przesłania formularza , a nie zdarzenie kliknięcia przycisku. Dzięki temu nasz kod będzie działał na wszystkich urządzeniach i technologiach pomocniczych teraz iw przyszłości.

2. Hijax

Użytkownik może nie mieć włączonej obsługi JavaScript. Hijax wzór jest dobry tutaj, gdzie delikatnie przejąć kontrolę nad formularza przy użyciu JavaScript, ale pozostawić submittable jeśli JavaScript nie powiedzie się.

Powinniśmy pobrać adres URL i metodę z formularza, więc jeśli zmieni się HTML, nie musimy aktualizować JavaScript.

3. Dyskretny JavaScript

Używanie event.preventDefault () zamiast zwracać false jest dobrą praktyką, ponieważ pozwala na bąbelkowanie zdarzenia. Pozwala to innym skryptom powiązać się ze zdarzeniem, na przykład skryptom analitycznym, które mogą monitorować interakcje użytkownika.

Prędkość

Idealnie powinniśmy użyć zewnętrznego skryptu, zamiast wstawiać skrypt bezpośrednio. Możemy połączyć się z tym linkiem w sekcji nagłówka strony, używając tagu skryptu, lub link do niego u dołu strony, aby przyspieszyć. Skrypt powinien po cichu poprawić wrażenia użytkownika, a nie przeszkadzać.

Kod

Zakładając, że zgadzasz się z powyższym i chcesz złapać zdarzenie przesyłania i obsłużyć je za pomocą AJAX (wzór hijax), możesz zrobić coś takiego:

$(function() {
  $('form.my_form').submit(function(event) {
    event.preventDefault(); // Prevent the form from submitting via the browser
    var 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...
    });
  });
});

Możesz ręcznie uruchomić wysyłanie formularza w dowolnym momencie za pomocą JavaScript, używając czegoś takiego:

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

Edytować:

Niedawno musiałem to zrobić i ostatecznie napisałem wtyczkę.

(function($) {
  $.fn.autosubmit = function() {
    this.submit(function(event) {
      event.preventDefault();
      var 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)

Dodaj atrybut data-autosubmit do tagu formularza, a następnie możesz to zrobić:

HTML

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

JS

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

Możesz także użyć FormData (ale niedostępne w IE):

var 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)} 
});

W ten sposób korzystasz z FormData .

Prosta wersja (nie wysyła zdjęć)

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

Skopiuj i wklej aukcjonowanie formularza lub wszystkich formularzy na stronie

Jest to zmodyfikowana wersja Alfrekjv za odpowiedź

• Będzie działać z jQuery> = 1.3.2
• Możesz uruchomić to zanim dokument będzie gotowy
• Możesz usunąć i ponownie dodać formularz, a on nadal będzie działał
• Będzie publikował w tej samej lokalizacji, co zwykły formularz, określony w atrybucie „akcji” formularza

JavaScript

jQuery(document).submit(function(e){
    var form = jQuery(e.target);
    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 toolbar console, firefox firebug or chrome inspector console)
            }
        });
    }
});

Chciałem zredagować odpowiedź Alfrekjva, ale za bardzo się od niej odstąpiłem, dlatego postanowiłem opublikować ją jako osobną odpowiedź.

Nie wysyła plików, nie obsługuje przycisków, na przykład kliknięcie przycisku (w tym przycisku przesłania) wysyła swoją wartość jako dane formularza, ale ponieważ jest to żądanie ajax, kliknięcie przycisku nie zostanie wysłane.

Aby obsługiwać przyciski, możesz uchwycić rzeczywiste kliknięcie przycisku zamiast przesyłania.

jQuery(document).click(function(e){
    var self = jQuery(e.target);
    if(self.is("#form-id input[type=submit], #form-id input[type=button], #form-id button")){
        e.preventDefault();
        var 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);
            }
        });
    }
});

Po stronie serwera można wykryć żądanie ajax z tym nagłówkiem, który ustawia jquery HTTP_X_REQUESTED_WITH dla php

PHP

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

Ten kod działa nawet przy wprowadzaniu plików

$(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)
        {


        }
    });        
});

Bardzo lubiłem tę odpowiedź za superluminary a zwłaszcza sposób owinął jest rozwiązanie w jQuery plugin. Dzięki superluminarium za bardzo przydatną odpowiedź. W moim przypadku chciałem jednak wtyczki, która pozwoliłaby mi zdefiniować moduły obsługi zdarzeń powodzenia i błędów za pomocą opcji po zainicjowaniu wtyczki.

Oto co wymyśliłem:

;(function(defaults, $, undefined) {
    var getSubmitHandler = function(onsubmit, success, error) {
        return function(event) {
            if (typeof onsubmit === 'function') {
                onsubmit.call(this, event);
            }
            var form = $(this);
            $.ajax({
                type: form.attr('method'),
                url: form.attr('action'),
                data: form.serialize()
            }).done(function() {
                if (typeof success === 'function') {
                    success.apply(this, arguments);
                }
            }).fail(function() {
                if (typeof error === 'function') {
                    error.apply(this, arguments);
                }
            });
            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);

Wtyczka ta pozwala mi bardzo łatwo „ajaxify” formularze html na stronie i dostarczać onSubmit , sukcesów i błędów obsługi zdarzeń dla wdrażania zwrotnych użytkownikowi statusu formie przedstawienia. Dzięki temu wtyczka mogła być używana w następujący sposób:

 $('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
      }
 });

Zwróć uwagę, że procedury obsługi zdarzeń powodzenia i błędu otrzymują te same argumenty, które otrzymasz od odpowiednich zdarzeń metody ajaxowej jQuery .

Mam dla siebie następujące rzeczy:

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

gdzie

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

            })
        event.preventDefault();
    });
}

Zakłada się, że post do „url” zwraca ajax w postaci {success: false, error:'my Error to display'}

Możesz to dowolnie zmieniać. Skorzystaj z tego fragmentu.

jQuery AJAX przesłać formularz , to nic innego jak przesłać formularz przy użyciu identyfikatora formularza po kliknięciu przycisku

Postępuj zgodnie z instrukcjami

Krok 1 - Tag formularza musi mieć pole identyfikatora

<form method="post" class="form-horizontal" action="test/user/add" id="submitForm">
.....
</form>

Przycisk, który chcesz kliknąć

<button>Save</button>

Krok 2 - przesłać zdarzenie w jQuery, co pomaga w przesłaniu formularza. w poniższym kodzie przygotowujemy żądanie JSON z nazwy elementu HTML .

$("#submitForm").submit(function(e) {
    e.preventDefault();
    var frm = $("#submitForm");
    var data = {};
    $.each(this, function(i, v){
        var input = $(v);
        data[input.attr("name")] = input.val();
        delete data["undefined"];
    });
    $.ajax({
        contentType:"application/json; charset=utf-8",
        type:frm.attr("method"),
        url:frm.attr("action"),
        dataType:'json',
        data:JSON.stringify(data),
        success:function(data) {
            alert(data.message);
        }
    });
});

w celu pokazu na żywo kliknij poniższy link

Jak przesłać formularz za pomocą jQuery AJAX?

rozważ użycie closest

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

Wiem, że jest to jQuerypowiązane pytanie, ale teraz dni z JS ES6 są znacznie łatwiejsze. Ponieważ nie ma czystej javascriptodpowiedzi, pomyślałem, że mogę dodać do tego proste, czyste javascriptrozwiązanie, które moim zdaniem jest znacznie czystsze, używając fetch()API. To nowoczesny sposób realizacji żądań sieciowych. W twoim przypadku, ponieważ masz już element formularza, możemy go po prostu użyć do zbudowania naszego żądania.

const form = document.forms["orderproductForm"];
const formInputs = form.getElementsByTagName("input"); 
let formData = new FormData(); 
for (let input of formInputs) {
    formData.append(input.name, input.value); 
}

fetch(form.action,
    {
        method: form.method,
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(error.message))
    .finally(() => console.log("Done"));

Aby uniknąć wysyłania wielu danych formdata:

Nie zapomnij cofnąć wiązania zdarzenia przesłania, zanim formularz zostanie przesłany ponownie, użytkownik może wywołać funkcję sumbit więcej niż jeden raz, być może coś zapomniał lub był to błąd sprawdzania poprawności.

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

Jeśli używasz formularza .serialize () - musisz nadać każdemu elementowi formularza taką nazwę:

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

I formularz jest serializowany w następujący sposób:

firstName=Chris&lastName=Halcrow ...

Możesz użyć tego w funkcji przesyłania, jak poniżej.

Formularz HTML

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

Funkcja jQuery:

<script>
    function formSubmit(){
        var name = document.getElementById("name").value;
        var message = document.getElementById("message").value;
        var 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>

Więcej informacji i przykładowa wizyta: http://www.spiderscode.com/simple-ajax-contact-form/

To nie jest odpowiedź na pytanie OP,
ale jeśli nie możesz użyć statycznej postaci DOM, możesz również spróbować w ten sposób.

var $form = $('<form/>').append(
    $('<input/>', {name: 'username'}).val('John Doe'),
    $('<input/>', {name: 'user_id'}).val('john.1234')
);

$.ajax({
    url: 'api/user/search',
    type: 'POST',
    contentType: 'application/x-www-form-urlencoded',
    data: $form.serialize(),
    success: function(data, textStatus, jqXHR) {
        console.info(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        var errorMessage = jqXHR.responseText;
        if (errorMessage.length > 0) {
            alert(errorMessage);
        }
    }
});

Próbować

fetch(form.action,{method:'post', body: new FormData(form)});

function send(e,form) {
  fetch(form.action,{method:'post', body: new FormData(form)});

  console.log('We submit form asynchronously (AJAX)');
  e.preventDefault();
}

<form method="POST" action="myapi/send" onsubmit="send(event,this)" name="orderproductForm">
    <input hidden name="csrfToken" value="$0meh@$h">
    <input name="email" value="[email protected]">
    <input name="phone" value="123-456-666">
    <input type="submit">    
</form>

Look on Chrome Console > Network after/before 'submit'

Tylko przyjazne przypomnienie, które datamoże być także przedmiotem:

$('form#foo').submit(function () {
    $.ajax({
        url: 'http://foo.bar/some-ajax-script',
        type: 'POST',
        dataType: 'json',
        data: {
            'foo': 'some-foo',
            'bar': 'some-bar'
        }
    }).always(function (data) {
        console.log(data);
    });

    return false;
});

JavaScript

(function ($) {
    var form= $('#add-form'),
      input = $('#exampleFormControlTextarea1');


   form.submit(function(event) {

       event.preventDefault(); 

       var req = $.ajax({
           url: form.attr('action'),
           type: 'POST',
           data: form.serialize()
       });
    req.done(function(data) {
       if (data === 'success') {
           var li = $('<li class="list-group-item">'+ input.val() +'</li>');
            li.hide()
                .appendTo('.list-group')
                .fadeIn();
            $('input[type="text"],textarea').val('');
        }
   });
});


}(jQuery));

HTML

    <ul class="list-group col-sm-6 float-left">
            <?php
            foreach ($data as $item) {
                echo '<li class="list-group-item">'.$item.'</li>';
            }
            ?>
        </ul>

        <form id="add-form" class="col-sm-6 float-right" action="_inc/add-new.php" method="post">
            <p class="form-group">
                <textarea class="form-control" name="message" id="exampleFormControlTextarea1" rows="3" placeholder="Is there something new?"></textarea>
            </p>
            <button type="submit" class="btn btn-danger">Add new item</button>
        </form>

Istnieje również zdarzenie Prześlij, które można wywołać w ten sposób $ („# form_id”). Submit (). Użyłbyś tej metody, jeśli formularz jest już dobrze reprezentowany w HTML. Właśnie przeczytałeś na stronie, wypełniłeś formularze odpowiednimi danymi, a następnie wywołałeś .submit (). Użyje metody i akcji zdefiniowanych w deklaracji formularza, więc nie musisz kopiować go do swojego javascript.

przykłady