JQuery [kapalı] kullanarak bir form gönderin

JQuery kullanarak bir form göndermek istiyorum. Birisi kodu, bir demosu veya örnek bir bağlantı sağlayabilir mi?

Formu normal olarak mı yoksa AJAX çağrısı yoluyla mı gönderiyorsunuz bağlıdır. Örneklerle belgeler de dahil olmak üzere jquery.com'da birçok bilgi bulabilirsiniz . Bir formu normal olarak göndermek submit()için, o sitedeki yöntemi inceleyin. İçin AJAX muhtemelen ya kullanmak istediğiniz rağmen, birçok farklı olasılık vardır ajax()ya post()yöntemleri. post()Bu ajax()yöntemi basitleştirilmiş ve sınırlı bir arayüzle çağırmanın gerçekten kolay bir yolu olduğunu unutmayın .

Her gün kullandığım, yer imi koymanız gereken kritik bir kaynak jQuery Nasıl Çalışır . JQuery kullanımı hakkında öğreticiler vardır ve sol taraftaki gezinme tüm belgelere erişim sağlar.

Örnekler:

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

Not ajax()ve post()yöntemleri yukarıda eşdeğerdir. ajax()Hataları işleme vb. İsteklere ekleyebileceğiniz ek parametreler vardır .

Kullanmanız gerekecek $("#formId").submit().

Bunu genellikle bir fonksiyonun içinden çağırırsınız.

Örneğin:

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

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

Bununla ilgili daha fazla bilgiyi Jquery web sitesinde bulabilirsiniz .

varolan bir form varsa, şimdi jquery - ajax / post ile çalışması gerekir:

• formunuzun gönder - etkinliğine asın
• varsayılan gönderim işlevini engelle

• kendi eşyalarını yap

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

serialize()Yukarıdaki örnekte işlevin çalışması için tüm form öğelerinin nameözniteliklerinin tanımlanmış olması gerektiğini lütfen unutmayın .

Form örneği:

<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 - veriler bu örnekteki POST kullanılarak gönderilir, bu da verilerinize şu yolla erişebileceğiniz anlamına gelir

 $_POST['dataproperty1'] 

burada dataproperty1, json'unuzda bir "değişken adı" dır.

CodeIgniter kullanıyorsanız burada örnek sözdizimi:

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

JQuery'de aşağıdakileri tercih ederim:

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

Ama sonra tekrar, bu görevi gerçekleştirmek için gerçekten jQuery'ye ihtiyacınız yok - sadece normal JavaScript kullanın:

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

Kılavuzdan: jQuery Doc

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

Herhangi
biri kullanırsa bilgi

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

Böyle bir şey yapma

<button name = "submit">

Bana gönder () yönteminin bu şekilde çalışmadığını bulmak saatler sürdü.

Formunuzu jquery kullanarak göndermek için kullanın. İşte bağlantı 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>

önyükleyicili bir form gönderilir:

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

rastgele bir yöntemle yeniden biçimlendirilmiş bir form veri sonrası yapmak için bazı hile var http://www.jackart4.com/article.html

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

Olaylara bakın / gönderin .

Formunuz için zaten bir gönderme etkinliği dinleyicisi yüklediyseniz, gönderilecek çağrı ()

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

olmaz o etkinliğe (başarısız olan) teslim bu form için yeni bir olay dinleyicisi yüklemeye çalışır olarak çalışıyorum. Bu nedenle, HTML Öğesinin kendisine erişmeniz (jQquery'den paketini açmanız) ve bu öğede doğrudan send () öğesini çağırmanız gerekir:

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

Ayrıca ajax kullanarak göndermek için jquery form eklentisini kullanabilirsiniz:

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

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

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

            **OR**

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

Internet Explorer'da dinamik olarak oluşturulan formlarla ilgili sorunlar olduğunu unutmayın. IE'de böyle bir form oluşturulmayacaktır (9):

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

IE'de çalışmasını sağlamak için form öğesini oluşturun ve göndermeden önce ekleyin:

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

Örnek 1'deki gibi bir form oluşturmak ve daha sonra eklemek işe yaramaz - IE9'da bir JScript hatası atar DOM Exception: HIERARCHY_REQUEST_ERR (3)

Tommy W'den aksesuarlar @ https://stackoverflow.com/a/6694054/694325

Şimdiye kadarki çözümler formun kimliğini bilmenizi gerektirir.

Kimliği bilmeye gerek kalmadan formu göndermek için bu kodu kullanın:

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

Örneğin, bir düğme için tıklama etkinliğini işlemek istiyorsanız,

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

Düğme form etiketleri arasında yer alıyorsa, bu sürümü tercih ederim:

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

şöyle kullanabilirsiniz:

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

VEYA

document.formName.submit();

Dinamik formlar için IE hilesi:

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

Yaklaşımım biraz Farklı Düğmeyi gönder düğmesi olarak değiştirin ve ardından

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

Form verilerini AJAX aracılığıyla verilen dosya adınıza gönderir.

Her form için kod eklemek zorunda kalmamak için genel bir çözüm öneriyorum. Jquery form eklentisini (http://jquery.malsup.com/form/) kullanın ve bu kodu ekleyin.

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

});

şöyle yapabilirsin:

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

Ayrıca Ajax aracılığıyla bir form göndermek (aslında göndermeden) için kullandım:

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