Senden Sie ein Formular mit jQuery [geschlossen]

Ich möchte ein Formular mit jQuery senden. Kann jemand den Code, eine Demo oder einen Beispiellink bereitstellen?

Dies hängt davon ab, ob Sie das Formular normal oder über einen AJAX-Anruf senden. Unter jquery.com finden Sie viele Informationen , einschließlich Dokumentation mit Beispielen. Wenn Sie ein Formular normal senden möchten, überprüfen Sie die submit()Methode an dieser Site. Für AJAX gibt es viele verschiedene Möglichkeiten, obwohl Sie wahrscheinlich entweder die ajax()oder post()Methoden verwenden möchten . Beachten Sie, dass dies post()nur eine bequeme Möglichkeit ist, die ajax()Methode mit einer vereinfachten und eingeschränkten Schnittstelle aufzurufen .

Eine wichtige Ressource, die ich jeden Tag benutze und die Sie als Lesezeichen speichern sollten, ist die Funktionsweise von jQuery . Es enthält Tutorials zur Verwendung von jQuery und die Navigation auf der linken Seite bietet 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()undpost() obigen Methoden äquivalent sind. Es gibt zusätzliche Parameter, die Sie der ajax()Anforderung hinzufügen können , um Fehler usw. zu behandeln.

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

Sie würden dies im Allgemeinen innerhalb einer Funktion aufrufen.

Zum Beispiel:

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

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

Weitere Informationen hierzu finden Sie auf der Jquery-Website .

Wenn Sie ein vorhandenes Formular haben, sollte dies jetzt mit jquery - ajax / post funktionieren. Jetzt können Sie:

• Hängen Sie sich an das Submit-Ereignis Ihres Formulars
• Verhindern Sie die Standardfunktionalität von Submit

• mach deine 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 serialize()alle Formularelemente ihre haben müssen, damit die Funktion im obigen Beispiel funktioniertname Attribut definiert sein .

Beispiel des Formulars:

<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 mithilfe von POST übermittelt. Dies bedeutet, dass Sie über auf Ihre Daten zugreifen können

 $_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'];

In jQuery würde ich Folgendes bevorzugen:

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

Andererseits benötigen Sie jQuery wirklich nicht, um diese Aufgabe auszuführen - verwenden Sie einfach reguläres JavaScript:

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

Aus dem Handbuch: jQuery Doc

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

Zur Information,
wenn jemand verwendet

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

Mach so etwas nicht

<button name = "submit">

Es hat viele Stunden gedauert, bis ich herausgefunden habe, dass submit () so nicht funktioniert.

Verwenden Sie es, um Ihr Formular mit jquery zu senden. Hier ist der 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>

Dadurch wird ein Formular mit Preloader gesendet:

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

Ich habe einen Trick, um einen Formulardatenbeitrag mit der Zufallsmethode http://www.jackart4.com/article.html zu reformieren

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

Siehe Ereignisse / Senden .

Beachten Sie, dass, wenn Sie bereits einen Listener für Übermittlungsereignisse für Ihr Formular installiert haben, der innner Aufruf von submit ()

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

funktioniert nicht , da versucht wird, einen neuen Ereignis-Listener für das Übermittlungsereignis dieses Formulars zu installieren (was fehlschlägt). Sie müssen also auf das HTML-Element selbst zugreifen (aus jQquery auspacken) und submit () für dieses Element direkt aufrufen:

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

Sie können auch das jquery form plugin verwenden, um es mit ajax einzureichen:

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

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

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

            **OR**

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

Beachten Sie, dass in Internet Explorer Probleme mit dynamisch erstellten Formularen auftreten. Ein so erstelltes Formular wird in IE (9) nicht gesendet:

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

Um es im IE zum Laufen zu bringen, erstellen Sie das Formularelement und hängen Sie es an, bevor Sie es wie folgt senden:

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

Das Erstellen des Formulars wie in Beispiel 1 und das anschließende Anhängen funktioniert nicht - in IE9 wird ein JScript-Fehler ausgegeben DOM Exception: HIERARCHY_REQUEST_ERR (3)

Requisiten an Tommy W @ https://stackoverflow.com/a/6694054/694325

Für die bisherigen Lösungen müssen Sie die ID des Formulars kennen.

Verwenden Sie diesen Code, um das Formular zu senden, ohne die ID kennen zu müssen:

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

Wenn Sie beispielsweise das Klickereignis für eine Schaltfläche behandeln möchten, können Sie es verwenden

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

Wenn sich die Schaltfläche zwischen den Formular-Tags befindet, bevorzuge ich diese Version:

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

Sie könnten es so verwenden:

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

ODER

document.formName.submit();

IE-Trick für dynamische Formulare:

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

Mein Ansatz etwas anders Ändern Sie die Schaltfläche in die Schaltfläche "Senden" und klicken Sie dann auf

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

Die Formulardaten werden über AJAX auf Ihrem angegebenen Dateinamen veröffentlicht.

Ich empfehle eine generische Lösung, damit Sie den Code nicht für jedes Formular hinzufügen müssen. Verwenden Sie das Plugin für das jquery-Formular (http://jquery.malsup.com/form/) und fügen Sie diesen Code hinzu.

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

});

Sie könnten es so machen:

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

Ich habe auch Folgendes verwendet, um ein Formular (ohne es tatsächlich einzureichen) über Ajax einzureichen:

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