jQuery AJAX mengirimkan formulir

Saya memiliki formulir dengan nama orderproductFormdan jumlah input yang tidak ditentukan.

Saya ingin melakukan semacam jQuery.get atau ajax atau sesuatu seperti itu yang akan memanggil halaman melalui Ajax, dan mengirimkan semua input formulir orderproductForm.

Saya kira satu cara adalah melakukan sesuatu seperti

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

Namun saya tidak tahu persis semua form input. Apakah ada fitur, fungsi atau sesuatu yang hanya akan mengirim SEMUA input formulir?

Anda dapat menggunakan fungsi ajaxForm / ajaxSubmit dari Ajax Form Plugin atau fungsi serialisasi jQuery.

AjaxForm :

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

atau

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

ajaxForm akan mengirim ketika tombol kirim ditekan. ajaxSubmit mengirim segera.

Serialize :

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

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

Dokumentasi serialisasi AJAX ada di sini .

Ini adalah referensi sederhana:

// 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.
           }
         });


});

Saya harap ini membantu Anda.

Solusi serupa lainnya menggunakan atribut yang didefinisikan pada elemen bentuk:

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

Ada beberapa hal yang perlu Anda ingat.

1. Ada beberapa cara untuk mengirimkan formulir

• menggunakan tombol kirim
• dengan menekan enter
• dengan memicu acara kirim dalam JavaScript
• mungkin lebih tergantung pada perangkat atau perangkat masa depan.

Karena itu kita harus mengikat acara ajukan formulir , bukan acara klik tombol. Ini akan memastikan kode kami berfungsi pada semua perangkat dan teknologi bantu sekarang dan di masa depan.

2. Hijax

Pengguna mungkin tidak mengaktifkan JavaScript. Sebuah Hijax pola baik di sini, di mana kita lembut mengambil kendali dari bentuk menggunakan JavaScript, tapi biarkan submittable jika JavaScript gagal.

Kita harus menarik URL dan metode dari formulir, jadi jika HTML berubah, kita tidak perlu memperbarui JavaScript.

3. JavaScript yang tidak mengganggu

Menggunakan event.preventDefault () alih-alih mengembalikan false adalah praktik yang baik karena memungkinkan acara untuk muncul. Ini memungkinkan skrip lain mengikat ke dalam acara tersebut, misalnya skrip analitik yang mungkin memantau interaksi pengguna.

Kecepatan

Kita sebaiknya menggunakan skrip eksternal, daripada memasukkan skrip inline kami. Kami dapat menautkan ini di bagian kepala halaman menggunakan tag skrip, atau menautkannya di bagian bawah halaman untuk kecepatan. Script harus secara diam-diam meningkatkan pengalaman pengguna, tidak menghalangi.

Kode

Dengan asumsi Anda setuju dengan semua hal di atas, dan Anda ingin menangkap acara pengiriman, dan menanganinya melalui AJAX (pola hijax), Anda dapat melakukan sesuatu seperti ini:

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

Anda dapat secara manual memicu pengiriman formulir kapan pun Anda suka melalui JavaScript menggunakan sesuatu seperti:

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

Edit:

Baru-baru ini saya harus melakukan ini dan akhirnya menulis sebuah plugin.

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

Tambahkan atribut data-autosubmit ke tag formulir Anda dan kemudian Anda bisa melakukan ini:

HTML

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

JS

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

Anda juga dapat menggunakan FormData (Tapi tidak tersedia di 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)} 
});

Ini adalah bagaimana Anda menggunakan FormData .

Versi sederhana (tidak mengirim gambar)

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

Salin dan tempel ajaxifikasi formulir atau semua formulir pada halaman

Ini adalah versi modifikasi dari jawaban Alfrekjv

• Ini akan bekerja dengan jQuery> = 1.3.2
• Anda dapat menjalankan ini sebelum dokumen siap
• Anda dapat menghapus dan menambahkan kembali formulir dan itu masih akan berfungsi
• Ini akan memposting ke lokasi yang sama dengan bentuk normal, yang ditentukan dalam atribut "aksi" formulir

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

Saya ingin mengedit jawaban Alfrekjv tetapi terlalu menyimpang darinya sehingga memutuskan untuk memposting ini sebagai jawaban yang terpisah.

Tidak mengirim file, tidak mendukung tombol, misalnya mengklik tombol (termasuk tombol kirim) mengirimkan nilainya sebagai data formulir, tetapi karena ini adalah permintaan ajax klik tombol tidak akan dikirim.

Untuk mendukung tombol, Anda dapat menangkap klik tombol yang sebenarnya daripada mengirimkan.

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

Di sisi server Anda dapat mendeteksi permintaan ajax dengan header ini yang ditetapkan jquery HTTP_X_REQUESTED_WITH untuk php

PHP

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

Kode ini berfungsi bahkan dengan input file

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


        }
    });        
});

Saya sangat menyukai jawaban ini oleh superluminary dan terutama cara dia membungkus adalah solusi dalam plugin jQuery . Jadi terima kasih kepada superluminary untuk jawaban yang sangat berguna. Dalam kasus saya, saya ingin plugin yang memungkinkan saya untuk menentukan keberhasilan dan kesalahan event handler melalui opsi ketika plugin diinisialisasi.

Jadi inilah yang saya pikirkan:

;(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);

Plugin ini memungkinkan saya untuk dengan mudah "ajaxify" formulir html pada halaman dan memberikan onsubmit , penangan event sukses dan kesalahan untuk menerapkan umpan balik kepada pengguna dari status mengirimkan formulir. Ini memungkinkan plugin untuk digunakan sebagai berikut:

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

Perhatikan bahwa penangan event sukses dan kesalahan menerima argumen yang sama yang akan Anda terima dari peristiwa yang sesuai dari metode ajax jQuery .

Saya mendapatkan yang berikut untuk saya:

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

dimana

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

Ini mengasumsikan posting ke 'url' mengembalikan ajax dalam bentuk {success: false, error:'my Error to display'}

Anda dapat memvariasikan ini sesuai keinginan Anda. Jangan ragu untuk menggunakan cuplikan itu.

jQuery AJAX mengirimkan formulir , tidak lain adalah mengirimkan formulir menggunakan ID formulir ketika Anda mengklik tombol

Ikuti langkah-langkahnya

Langkah 1 - Tag formulir harus memiliki bidang ID

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

Tombol yang akan Anda klik

<button>Save</button>

Langkah 2 - ajukan acara ada di jQuery yang membantu mengirimkan formulir. dalam kode di bawah ini kami sedang mempersiapkan permintaan JSON dari nama elemen 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);
        }
    });
});

untuk demo langsung klik tautan di bawah ini

Bagaimana cara mengirimkan Formulir menggunakan jQuery AJAX?

pertimbangkan untuk menggunakan 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();
    });

Saya tahu ini adalah jQuerypertanyaan terkait, tetapi sekarang dengan JS ES6 hal-hal jauh lebih mudah. Karena tidak ada javascriptjawaban murni , saya pikir saya bisa menambahkan javascriptsolusi murni sederhana untuk ini, yang menurut saya jauh lebih bersih, dengan menggunakan fetch()API. Ini cara modern untuk mengimplementasikan permintaan jaringan. Dalam kasus Anda, karena Anda sudah memiliki elemen formulir, kami cukup menggunakannya untuk membangun permintaan kami.

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"));

Untuk menghindari beberapa formdata mengirim:

Jangan lupa batalkan ajukan acara, sebelum formulir dikirimkan lagi, Pengguna dapat memanggil fungsi sumbit lebih dari satu kali, mungkin ia lupa sesuatu, atau kesalahan validasi.

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

Jika Anda menggunakan form .serialize () - Anda perlu memberi setiap elemen form nama seperti ini:

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

Dan formulir akan serial seperti ini:

firstName=Chris&lastName=Halcrow ...

Anda dapat menggunakan ini pada fungsi kirim seperti di bawah ini.

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

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

Untuk detail lebih lanjut dan contoh Kunjungi: http://www.spiderscode.com/simple-ajax-contact-form/

Ini bukan jawaban untuk pertanyaan OP,
tetapi jika Anda tidak dapat menggunakan DOM bentuk statis, Anda juga dapat mencoba seperti ini.

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

Mencoba

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'

Hanya pengingat ramah yang databisa menjadi objek juga:

$('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>

Ada juga acara kirim, yang dapat dipicu seperti $ ini ("# form_id") .mohon (). Anda akan menggunakan metode ini jika form sudah terwakili dengan baik dalam HTML. Anda baru saja membaca di halaman, mengisi input formulir dengan hal-hal, lalu panggil .submit (). Ini akan menggunakan metode dan tindakan yang didefinisikan dalam deklarasi formulir, jadi Anda tidak perlu menyalinnya ke javascript Anda.

contoh