Ein Formular mit jQuery abschicken

Question

Ich möchte ein Formular mit jQuery übermitteln. Kann jemand den Code, eine Demo oder ein Beispiel Link zur Verfügung stellen?

Answer 1

Es hängt davon ab, ob Sie das Formular normal oder über einen AJAX-Aufruf übermitteln. Viele Informationen finden Sie unter jquery.de , einschließlich einer Dokumentation mit Beispielen. Für die normale Übermittlung eines Formulars sehen Sie sich die submit() Methode an diesem Standort. Für AJAX gibt es viele verschiedene Möglichkeiten, obwohl Sie wahrscheinlich entweder die ajax() o post() Methoden. Beachten Sie, dass post() ist eigentlich nur eine bequeme Möglichkeit, die ajax() Methode mit einer vereinfachten und begrenzten Schnittstelle.

Eine wichtige Quelle, die ich täglich nutze und die Sie sich merken sollten, ist Wie jQuery funktioniert . Es gibt Tutorials zur Verwendung von jQuery und die linke Navigation ermöglicht den Zugriff auf die gesamte Dokumentation.

Beispiele:

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

Beachten Sie, dass die ajax() y post() Methoden sind gleichwertig. Es gibt zusätzliche Parameter, die Sie der Methode ajax() Anfrage zur Behandlung von Fehlern, usw.

Answer 2

Sie müssen Folgendes verwenden $("#formId").submit() .

In der Regel wird diese Funktion aus einer Funktion heraus aufgerufen.

Zum Beispiel:

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

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

Weitere Informationen hierzu erhalten Sie auf der Website Jquery-Website .

Answer 3

Wenn Sie ein bestehendes Formular haben, das jetzt mit jquery - ajax/post funktionieren sollte, könnten Sie es jetzt:

• Halten Sie sich an das Submit-Ereignis Ihres Formulars
• Verhinderung der Standardfunktionalität von submit

• machen Sie Ihre eigenen Sachen

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

Bitte beachten Sie, dass für die Nutzung der serialize() Funktion im obigen Beispiel funktionieren soll, müssen alle Formularelemente ihre name Attribut definiert.

Beispiel für ein Formular:

<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 - die Daten werden in diesem Beispiel per POST übermittelt, d. h. Sie können auf Ihre Daten über

 $_POST['dataproperty1'] 

, wobei dataproperty1 ein "Variablenname" in Ihrem json ist.

hier Beispielsyntax, wenn Sie CodeIgniter verwenden:

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

Answer 4

In jQuery würde ich das Folgende bevorzugen:

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

Aber andererseits braucht man jQuery nicht, um diese Aufgabe zu erfüllen - verwenden Sie einfach normales JavaScript:

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

Answer 5

Aus dem Handbuch: jQuery-Doku

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