Prześlij formularz za pomocą jQuery [zamknięte]

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

Zależy to od tego, czy przesyłasz formularz normalnie, czy poprzez połączenie AJAX. Na stronie jquery.com można znaleźć wiele informacji , w tym dokumentację z przykładami. Aby normalnie przesłać formularz, sprawdź submit()metodę na tej stronie. W przypadku AJAX istnieje wiele różnych możliwości, choć prawdopodobnie chcesz użyć metody ajax()lub post(). Zauważ, że post()to naprawdę wygodny sposób na wywołanie ajax()metody z uproszczonym i ograniczonym interfejsem.

Krytycznym zasobem, z którego korzystam na co dzień, że powinieneś zakładki jest jak działa jQuery . Zawiera tutoriale dotyczące korzystania z jQuery, a nawigacja po lewej stronie daje dostęp do całej dokumentacji.

Przykłady:

Normalna

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

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

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

Zwykle wywołujesz 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żesz uzyskać więcej informacji na ten temat na stronie internetowej Jquery .

kiedy masz już istniejący formularz, powinien on teraz działać z jquery - ajax / post teraz możesz:

• trzymaj się zgłoszenia - zdarzenie formularza
• uniemożliwić domyślną funkcjonalność przesyłania

• 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 serialize()funkcja działała w powyższym przykładzie, wszystkie elementy formularza muszą mieć namezdefiniowany atrybut.

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 oznacza to, że możesz uzyskać dostęp do swoich danych za pośrednictwem

 $_POST['dataproperty1'] 

, gdzie dataproperty1 to „nazwa zmiennej” w twoim telefonie.

tutaj przykładowa składnia, jeśli używasz CodeIgniter:

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

W jQuery wolałbym:

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

Ale z drugiej strony naprawdę nie potrzebujesz jQuery do wykonania tego zadania - po prostu użyj zwykłego JavaScript:

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

Z instrukcji: jQuery Doc

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

Aby uzyskać informacje,
jeśli ktoś korzysta

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

Nie rób czegoś takiego

<button name = "submit">

Minęło wiele godzin, aby znaleźć mnie, że subm () nie będzie tak działać.

Użyj go, aby przesłać formularz za pomocą 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>

to wyśle ​​formularz z preloaderem:

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

Mam sztuczkę, aby dane formularza zostały zreformowane metodą losową http://www.jackart4.com/article.html

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

Zobacz wydarzenia / prześlij .

Pamiętaj, że jeśli już zainstalowałeś detektor zdarzeń wysyłania dla swojego formularza, wewnętrzne wywołanie metody submission ()

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

nie będzie działać, ponieważ będzie próbował zainstalować nowy detektor zdarzeń dla zdarzenia przesyłania tego formularza (co się nie powiedzie). Musisz więc uzyskać dostęp do samego elementu HTML (rozpakuj z jQquery) i bezpośrednio wywołać metodę subm () na tym elemencie:

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

Możesz także użyć wtyczki formularza jquery do przesłania za pomocą ajax, jak również:

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

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

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

            **OR**

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

Zauważ, że w Internet Explorerze występują problemy z dynamicznie tworzonymi formularzami. Formularz utworzony w ten sposób nie będzie przesyłany w IE (9):

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

Aby działał w IE, utwórz element formularza i dołącz go przed przesłaniem:

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

Utworzenie formularza jak w przykładzie 1, a następnie dołączenie go nie zadziała - w IE9 zgłasza błąd JScript DOM Exception: HIERARCHY_REQUEST_ERR (3)

Rekwizyty dla Tommy W @ https://stackoverflow.com/a/6694054/694325

Dotychczasowe rozwiązania wymagają znajomości identyfikatora formularza.

Użyj tego kodu, aby przesłać formularz bez konieczności posiadania identyfikatora:

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

Na przykład, jeśli chcesz obsłużyć zdarzenie kliknięcia przycisku, możesz użyć

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

Jeśli przycisk znajduje się między znacznikami formularza, wolę tę wersję:

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

możesz użyć tego w następujący sposób:

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

LUB

document.formName.submit();

Sztuczka IE dla formularzy dynamicznych:

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

Moje podejście nieco inne Zmień przycisk w przycisk Prześlij, a następnie kliknij

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

Opublikuje dane formularza na podanej nazwie pliku przez AJAX.

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

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

});

możesz to zrobić w następujący sposób:

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

Użyłem również następujących elementów do przesłania formularza (bez faktycznego przesyłania go) za pośrednictwem Ajax:

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