Kirim formulir menggunakan jQuery [ditutup]

Saya ingin mengirimkan formulir menggunakan jQuery. Dapatkah seseorang memberikan kode, demo, atau tautan contoh?

Itu tergantung pada apakah Anda mengirimkan formulir secara normal atau melalui panggilan AJAX. Anda dapat menemukan banyak informasi di jquery.com , termasuk dokumentasi dengan contoh-contoh. Untuk mengirimkan formulir secara normal, lihat submit()metode di situs itu. Untuk AJAX , ada banyak kemungkinan yang berbeda, meskipun Anda mungkin ingin menggunakan metode ajax()atau post(). Perhatikan bahwa post()ini hanyalah cara yang mudah untuk memanggil ajax()metode dengan antarmuka yang disederhanakan dan terbatas.

Sumber daya kritis, yang saya gunakan setiap hari, yang harus Anda tandai adalah Cara jQuery Bekerja . Ini memiliki tutorial tentang cara menggunakan jQuery dan navigasi sebelah kiri memberikan akses ke semua dokumentasi.

Contoh:

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

Perhatikan bahwa ajax()dan post()metode di atas setara. Ada parameter tambahan yang dapat Anda tambahkan ke ajax()permintaan untuk menangani kesalahan, dll.

Anda harus menggunakan $("#formId").submit().

Anda biasanya akan menyebutnya dari dalam suatu fungsi.

Sebagai contoh:

<input type='button' value='Submit form' onClick='submitDetailsForm()' />

<script language="javascript" type="text/javascript">
    function submitDetailsForm() {
       $("#formId").submit();
    }
</script>

Anda dapat memperoleh informasi lebih lanjut tentang ini di situs web Jquery .

ketika Anda memiliki formulir yang sudah ada, yang sekarang seharusnya bekerja dengan jquery - ajax / post sekarang Anda bisa:

• tunggu ajukan - acara formulir Anda
• Mencegah fungsionalitas default dari submit

• lakukan barangmu sendiri

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

Harap perhatikan bahwa agar serialize()fungsi berfungsi dalam contoh di atas, semua elemen formulir harus memiliki nameatributnya yang ditentukan.

Contoh formulir:

<form id="myform" method="post" action="http://example.com/do_recieve_request">

<input type="text" size="20" value="default value" name="my_input_field">
..
.
</form>

@ PTF - data dikirimkan menggunakan POST dalam sampel ini, jadi ini berarti Anda dapat mengakses data Anda melalui

 $_POST['dataproperty1'] 

, di mana dataproperty1 adalah "nama-variabel" di json Anda.

di sini contoh sintaksis jika Anda menggunakan CodeIgniter:

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

Di jQuery saya lebih suka yang berikut:

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

Tapi sekali lagi, Anda benar-benar tidak perlu jQuery untuk melakukan tugas itu - cukup gunakan JavaScript biasa:

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

Dari manual: jQuery Doc

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

Untuk informasi
jika ada yang menggunakan

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

Jangan seperti ini

<button name = "submit">

Butuh berjam-jam untuk menemukan saya yang mengirimkan () tidak akan berfungsi seperti ini.

Gunakan untuk mengirim formulir Anda menggunakan jquery. Ini tautannya http://api.jquery.com/submit/

<form id="form" method="post" action="#">
    <input type="text" id="input">
    <input type="button" id="button" value="Submit">
</form>

<script type="text/javascript">
$(document).ready(function () {
    $( "#button" ).click(function() {
        $( "#form" ).submit();
    });
});
</script>

ini akan mengirimkan formulir dengan preloader:

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

Saya punya beberapa trik untuk membuat posting data formulir direformasi dengan metode acak http://www.jackart4.com/article.html

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

Lihat acara / kirim .

Perhatikan bahwa jika Anda sudah menginstal pendengar acara ajukan untuk formulir Anda, panggilan innner untuk mengirimkan ()

jQuery('#<form-id>').submit( function(e){ 
    e.preventDefault();
    // maybe some validation in here
    if ( <form-is-valid> ) jQuery('#<form-id>').submit();
});

tidak akan berfungsi karena mencoba memasang pendengar acara baru untuk acara pengiriman formulir ini (yang gagal). Jadi, Anda harus mengakses Elemen HTML itu sendiri (membuka dari jQquery) dan memanggil kirim () pada elemen ini secara langsung:

    jQuery('#<form-id>').submit( function(e){ 
      e.preventDefault();
      // note the [0] array access:
      if ( <form-is-valid> ) jQuery('#<form-id>')[0].submit();
    });

Anda juga dapat menggunakan plugin formulir jquery untuk mengirim menggunakan ajax juga:

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

jQuery("a[id=atag]").click( function(){

    jQuery('#form-id').submit();      

            **OR**

    jQuery(this).parents("#form-id").submit();
});

Perhatikan bahwa di Internet Explorer ada masalah dengan formulir yang dibuat secara dinamis. Formulir yang dibuat seperti ini tidak akan dikirimkan dalam IE (9):

var form = $('<form method="post" action="/test/Delete/">' +
             '<input type="hidden" name="id" value="' + myid + '"></form>');
$(form).submit();

Untuk membuatnya berfungsi di IE buat elemen bentuk dan lampirkan sebelum mengirimkan seperti:

var form = document.createElement("form");
$(form).attr("action", "/test/Delete")
       .attr("method", "post");
$(form).html('<input type="hidden" name="id" value="' + myid + '" />');
document.body.appendChild(form);
$(form).submit();
document.body.removeChild(form);

Membuat formulir seperti pada contoh 1 dan kemudian melampirkannya tidak akan berhasil - di IE9 ia melempar kesalahan JScript DOM Exception: HIERARCHY_REQUEST_ERR (3)

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

Solusi sejauh ini mengharuskan Anda untuk mengetahui ID formulir.

Gunakan kode ini untuk mengirimkan formulir tanpa harus tahu ID:

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

Misalnya, jika Anda ingin menangani acara klik untuk tombol, Anda dapat menggunakannya

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

Jika tombol terletak di antara tag formulir, saya lebih suka versi ini:

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

Anda bisa menggunakannya seperti ini:

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

ATAU

document.formName.submit();

Trik IE untuk bentuk dinamis:

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

Pendekatan saya sedikit berbeda Ubah tombol menjadi tombol kirim dan kemudian klik

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

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

Ini akan memposting data formulir pada nama file yang Anda berikan melalui AJAX.

Saya merekomendasikan solusi umum sehingga Anda tidak perlu menambahkan kode untuk setiap formulir. Gunakan plugin formulir jquery (http://jquery.malsup.com/form/) dan tambahkan kode ini.

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

});

Anda bisa melakukannya seperti ini:

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

Saya juga menggunakan yang berikut ini untuk mengirimkan formulir (tanpa benar-benar mengirimkannya) melalui Ajax:

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