Wyślij formularz za pomocą jQuery

Question

Chcę przesłać formularz za pomocą jQuery. Czy ktoś może podać kod, wersję demo lub przykładowy link?

Answer 1

Z instrukcji: jQuery Doc

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

Answer 2

Będziesz musiał użyć $("#formId").submit().

Generalnie wywołasz to z poziomu funkcji.

Na przykład:

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

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

można uzyskać więcej informacji na ten temat na Jquery website.

Answer 3

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

Zobacz events/submit.

Answer 4

Można również skorzystać z formularza plugin jquery do przedstawienia za pomocą ajax aswell:

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

Answer 5

To zależy od tego, czy złożenie formularza normalnie lub za pośrednictwem wywołania AJAX. Możesz znaleźć wiele informacji na jquery.com, w tym dokumentacji z przykładami. Aby przesłać formularz w normalny sposób, skorzystaj z metody submit() na tej stronie. W przypadku AJAX istnieje wiele różnych możliwości, chociaż prawdopodobnie warto zastosować metody ajax() lub post(). Zauważ, że post() jest po prostu wygodnym sposobem wywoływania metody ajax() z uproszczonym i ograniczonym interfejsem.

Najważniejszym zasobem, którego używam każdego dnia, jest zakładka: How jQuery Works. Zawiera samouczki dotyczące korzystania z jQuery, a nawigacja po lewej zapewnia dostęp do całej dokumentacji.

Przykłady:

normalnych

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

Uwaga że metody ajax() i post() powyżej, są równoważne. Istnieją dodatkowe parametry, które można dodać do wniosku ajax() do obsługi błędów, itp

Answer 6

w jQuery wolałbym następujące:

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

ale potem znowu, tak naprawdę nie trzeba wykonywać, że jQuery zadanie - wystarczy użyć regularnych javascript:

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

Answer 7

mam również stosowane następujące złożyć formularz (bez faktycznego przekazania go) za pośrednictwem Ajax:

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

Answer 8

Polecam ogólne rozwiązanie, więc nie trzeba dodawać kodu do każdego formularza. Użyj wtyczki jquery form (http://jquery.malsup.com/form/) i dodaj ten kod.

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

}); 

Answer 9

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

będzie zamieszczać dane formularza na podanej nazwy pliku poprzez AJAX.

Answer 10

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

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

      **OR** 

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

Answer 11

można zrobić to tak:

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

Answer 12

pamiętać, że w programie Internet Explorer są problemy z dynamicznie tworzonych form. Postać stworzona tak nie złoży w IE (9):

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

Aby dostać pracę w IE tworzyć element formularz i dołączyć go przed złożeniem tak:

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

Tworzenie formularza podobnego w przykładzie 1, a następnie dołączenie nie będzie działać - w IE9 zgłasza błąd JScript DOM Exception: HIERARCHY_REQUEST_ERR (3)

podpory Tommy w @https://stackoverflow.com/a/6694054/694325

Answer 13

to prześle formularz z preloader:

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

i'have jakiś podstęp, aby post formularz danych zreformowany metodą losową http://www.jackart4.com/article.html

Answer 14

IE trick dynamicznych formach:

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

Answer 15

Rozwiązania do tej pory wymagają znajomości identyfikatora formularza.

użyć tego kodu, aby wysłać formularz bez konieczności znać ID:

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

Na przykład, jeśli były chcąc obsłużyć zdarzenia kliknij na przycisku, można użyć

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

Answer 16

można go używać tak:

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

LUB

document.formName.submit(); 

Answer 17

gdy masz już postać, która powinna teraz pracować z jQuery - ajax/słupek teraz możesz:

• powiesić na przedstawienia - przypadku formularza
• zapobiec domyślną funkcjonalność przedstawić

• robić własne rzeczy

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

Należy pamiętać, że aby funkcja serialize() działała w powyższym przykładzie, wszystkie elementy formularza muszą mieć zdefiniowany atrybut name.

Przykład formularza:

<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 - dane są przesyłane przy użyciu POST w tej próbce, więc to oznacza, że ​​można uzyskać dostęp do swoich danych poprzez

$_POST['dataproperty1'] 

, gdzie dataproperty1 jest "nazwa zmiennej" w twoim jsonie.

tutaj próbka składnia jeśli używasz CodeIgniter:

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

Answer 18

Użyj go, aby przesłać formularz przy użyciu jQuery. Oto link 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> 

Answer 19

Należy pamiętać, że jeśli już zainstalowany dołączania detektor zdarzeń dla swojej postaci, wywołanie innner przedłożenia()

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

nie praca, ponieważ próbuje aby zainstalować nowy detektor zdarzeń dla zdarzenia przesyłania formularza (które nie powiedzie się). Więc trzeba acces Element HTML sam (unwrap z jQquery) i wywołać submit() na tym elemencie bezpośrednio:

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

Answer 20

Jeśli przycisk znajduje się pomiędzy znacznikami formie, wolę tę wersję:

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

Answer 21

Moje podejście nieco inny Zmień przycisk do przedstawienia przycisk, a następnie kliknij

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