jQuery AJAX-Formular senden

Ich habe ein Formular mit Namen orderproductFormund einer undefinierten Anzahl von Eingaben.

Ich möchte eine Art jQuery.get oder Ajax oder ähnliches machen, das eine Seite über Ajax aufruft und alle Eingaben des Formulars mitsendet orderproductForm.

Ich nehme an, ein Weg wäre, so etwas zu tun

jQuery.get("myurl",
          {action : document.orderproductForm.action.value,
           cartproductid : document.orderproductForm.cartproductid.value,
           productid : document.orderproductForm.productid.value,
           ...

Allerdings kenne ich nicht alle Formulareingaben genau. Gibt es eine Funktion, die nur ALLE Formulareingaben sendet?

Sie können die Funktionen ajaxForm / ajaxSubmit vom Ajax Form Plugin oder die Funktion jQuery serialize verwenden.

AjaxForm :

$("#theForm").ajaxForm({url: 'server.php', type: 'post'})

oder

$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})

ajaxForm wird gesendet, wenn die Senden-Taste gedrückt wird. ajaxSubmit sendet sofort.

Serialisieren :

$.get('server.php?' + $('#theForm').serialize())

$.post('server.php', $('#theForm').serialize())

Die Dokumentation zur AJAX-Serialisierung finden Sie hier .

Dies ist eine einfache Referenz:

// this is the id of the form
$("#idForm").submit(function(e) {

    e.preventDefault(); // avoid to execute the actual submit of the form.

    var form = $(this);
    var url = form.attr('action');

    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });


});

Ich hoffe es hilft dir.

Eine andere ähnliche Lösung unter Verwendung der im Formularelement definierten Attribute:

<form id="contactForm1" action="/your_url" method="post">
    <!-- Form input fields here (do not forget your name attributes). -->
</form>

<script type="text/javascript">
    var frm = $('#contactForm1');

    frm.submit(function (e) {

        e.preventDefault();

        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                console.log('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            },
        });
    });
</script>

Es gibt einige Dinge, die Sie beachten müssen.

1. Es gibt verschiedene Möglichkeiten, ein Formular einzureichen

• Verwenden Sie die Senden-Schaltfläche
• durch Drücken der Eingabetaste
• durch Auslösen eines Submit-Ereignisses in JavaScript
• möglicherweise mehr je nach Gerät oder zukünftigem Gerät.

Wir sollten uns daher an das Formularübermittlungsereignis binden , nicht an das Schaltflächenklickereignis. Dadurch wird sichergestellt, dass unser Code jetzt und in Zukunft auf allen Geräten und unterstützenden Technologien funktioniert.

2. Hijax

Der Benutzer hat möglicherweise kein JavaScript aktiviert. Hier ist ein Hijax- Muster gut, bei dem wir die Kontrolle über das Formular mithilfe von JavaScript übernehmen, es jedoch übermitteln können, wenn JavaScript fehlschlägt.

Wir sollten die URL und die Methode aus dem Formular ziehen. Wenn sich der HTML-Code ändert, müssen wir das JavaScript nicht aktualisieren.

3. Unauffälliges JavaScript

Die Verwendung von event.preventDefault () anstelle von false ist eine gute Vorgehensweise, da das Ereignis dadurch in die Luft sprudeln kann. Auf diese Weise können andere Skripts in das Ereignis eingebunden werden, z. B. Analyseskripts, die möglicherweise Benutzerinteraktionen überwachen.

Geschwindigkeit

Wir sollten idealerweise ein externes Skript verwenden, anstatt unser Skript inline einzufügen. Wir können im Kopfbereich der Seite mithilfe eines Skript-Tags darauf verlinken oder aus Gründen der Geschwindigkeit unten auf der Seite darauf verlinken. Das Skript sollte die Benutzererfahrung leise verbessern und nicht stören.

Code

Angenommen, Sie stimmen allen oben genannten Punkten zu und möchten das Submit-Ereignis abfangen und über AJAX (ein Hijax-Muster) verarbeiten. Dann könnten Sie Folgendes tun:

$(function() {
  $('form.my_form').submit(function(event) {
    event.preventDefault(); // Prevent the form from submitting via the browser
    var form = $(this);
    $.ajax({
      type: form.attr('method'),
      url: form.attr('action'),
      data: form.serialize()
    }).done(function(data) {
      // Optionally alert the user of success here...
    }).fail(function(data) {
      // Optionally alert the user of an error here...
    });
  });
});

Sie können eine Formularübermittlung jederzeit manuell über JavaScript auslösen, indem Sie Folgendes verwenden:

$(function() {
  $('form.my_form').trigger('submit');
});

Bearbeiten:

Ich musste dies kürzlich tun und schrieb schließlich ein Plugin.

(function($) {
  $.fn.autosubmit = function() {
    this.submit(function(event) {
      event.preventDefault();
      var form = $(this);
      $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize()
      }).done(function(data) {
        // Optionally alert the user of success here...
      }).fail(function(data) {
        // Optionally alert the user of an error here...
      });
    });
    return this;
  }
})(jQuery)

Fügen Sie Ihrem Formular-Tag ein Attribut für die automatische Übermittlung von Daten hinzu, und Sie können Folgendes tun:

HTML

<form action="/blah" method="post" data-autosubmit>
  <!-- Form goes here -->
</form>

JS

$(function() {
  $('form[data-autosubmit]').autosubmit();
});

Sie können auch FormData verwenden (im IE jedoch nicht verfügbar):

var formData = new FormData(document.getElementsByName('yourForm')[0]);// yourForm: form selector        
$.ajax({
    type: "POST",
    url: "yourURL",// where you wanna post
    data: formData,
    processData: false,
    contentType: false,
    error: function(jqXHR, textStatus, errorMessage) {
        console.log(errorMessage); // Optional
    },
    success: function(data) {console.log(data)} 
});

So verwenden Sie FormData .

Einfache Version (sendet keine Bilder)

<form action="/my/ajax/url" class="my-form">
...
</form>
<script>
    (function($){
        $("body").on("submit", ".my-form", function(e){
            e.preventDefault();
            var form = $(e.target);
            $.post( form.attr("action"), form.serialize(), function(res){
                console.log(res);
            });
        });
    )(jQuery);
</script>

Kopieren Sie die Ajaxifizierung eines Formulars oder aller Formulare auf einer Seite und fügen Sie sie ein

Es ist eine modifizierte Version von Alfrekjvs Antwort

• Es funktioniert mit jQuery> = 1.3.2
• Sie können dies ausführen, bevor das Dokument fertig ist
• Sie können das Formular entfernen und erneut hinzufügen, und es funktioniert weiterhin
• Es wird an derselben Stelle wie das normale Formular veröffentlicht, die im Attribut "Aktion" des Formulars angegeben ist

JavaScript

jQuery(document).submit(function(e){
    var form = jQuery(e.target);
    if(form.is("#form-id")){ // check if this is the form that you want (delete this check to apply this to all forms)
        e.preventDefault();
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: form.serialize(), // serializes the form's elements.
            success: function(data) {
                console.log(data); // show response from the php script. (use the developer toolbar console, firefox firebug or chrome inspector console)
            }
        });
    }
});

Ich wollte die Antwort von Alfrekjv bearbeiten, bin aber zu stark davon abgewichen und habe beschlossen, diese als separate Antwort zu veröffentlichen.

Sendet keine Dateien, unterstützt keine Schaltflächen. Wenn Sie beispielsweise auf eine Schaltfläche (einschließlich einer Senden-Schaltfläche) klicken, wird deren Wert als Formulardaten gesendet. Da es sich jedoch um eine Ajax-Anforderung handelt, wird der Schaltflächenklick nicht gesendet.

Um Schaltflächen zu unterstützen, können Sie den tatsächlichen Schaltflächenklick anstelle der Übermittlung erfassen.

jQuery(document).click(function(e){
    var self = jQuery(e.target);
    if(self.is("#form-id input[type=submit], #form-id input[type=button], #form-id button")){
        e.preventDefault();
        var form = self.closest('form'), formdata = form.serialize();
        //add the clicked button to the form data
        if(self.attr('name')){
            formdata += (formdata!=='')? '&':'';
            formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val());
        }
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: formdata, 
            success: function(data) {
                console.log(data);
            }
        });
    }
});

Auf der Serverseite können Sie eine Ajax-Anfrage mit diesem Header erkennen, den jquery HTTP_X_REQUESTED_WITH für PHP festlegt

PHP

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    //is ajax
}

Dieser Code funktioniert auch bei der Dateieingabe

$(document).on("submit", "form", function(event)
{
    event.preventDefault();        
    $.ajax({
        url: $(this).attr("action"),
        type: $(this).attr("method"),
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {

        },
        error: function (xhr, desc, err)
        {


        }
    });        
});

Ich mochte diese Antwort von superluminary sehr und besonders die Art und Weise, wie er sie verpackte, ist eine Lösung in einem jQuery- Plugin. Vielen Dank an superluminary für eine sehr nützliche Antwort. In meinem Fall wollte ich jedoch ein Plugin, mit dem ich die Erfolgs- und Fehlerereignishandler mithilfe von Optionen definieren kann, wenn das Plugin initialisiert wird.

Also hier ist, was ich mir ausgedacht habe:

;(function(defaults, $, undefined) {
    var getSubmitHandler = function(onsubmit, success, error) {
        return function(event) {
            if (typeof onsubmit === 'function') {
                onsubmit.call(this, event);
            }
            var form = $(this);
            $.ajax({
                type: form.attr('method'),
                url: form.attr('action'),
                data: form.serialize()
            }).done(function() {
                if (typeof success === 'function') {
                    success.apply(this, arguments);
                }
            }).fail(function() {
                if (typeof error === 'function') {
                    error.apply(this, arguments);
                }
            });
            event.preventDefault();
        };
    };
    $.fn.extend({
        // Usage:
        // jQuery(selector).ajaxForm({ 
        //                              onsubmit:function() {},
        //                              success:function() {}, 
        //                              error: function() {} 
        //                           });
        ajaxForm : function(options) {
            options = $.extend({}, defaults, options);
            return $(this).each(function() {
                $(this).submit(getSubmitHandler(options['onsubmit'], options['success'], options['error']));
            });
        }
    });
})({}, jQuery);

Mit diesem Plugin kann ich HTML-Formulare auf der Seite sehr einfach "ajaxifizieren" und Handler für Onsubmit- , Erfolgs- und Fehlerereignisse bereitstellen , um dem Benutzer Feedback zum Status des Formulars zu geben. Dadurch konnte das Plugin wie folgt verwendet werden:

 $('form').ajaxForm({
      onsubmit: function(event) {
          // User submitted the form
      },
      success: function(data, textStatus, jqXHR) {
          // The form was successfully submitted
      },
      error: function(jqXHR, textStatus, errorThrown) {
          // The submit action failed
      }
 });

Beachten Sie, dass die Ereignisbehandlungsroutinen für Erfolg und Fehler dieselben Argumente erhalten, die Sie von den entsprechenden Ereignissen der jQuery- Ajax- Methode erhalten würden.

Ich habe folgendes für mich:

formSubmit('#login-form', '/api/user/login', '/members/');

wo

function formSubmit(form, url, target) {
    $(form).submit(function(event) {
        $.post(url, $(form).serialize())
            .done(function(res) {
                if (res.success) {
                    window.location = target;
                }
                else {
                    alert(res.error);
                }
            })
            .fail(function(res) {
                alert("Server Error: " + res.status + " " + res.statusText);

            })
        event.preventDefault();
    });
}

Dies setzt voraus, dass der Beitrag zu 'url' einen Ajax in Form von zurückgibt {success: false, error:'my Error to display'}

Sie können dies nach Belieben variieren. Fühlen Sie sich frei, dieses Snippet zu verwenden.

jQuery AJAX-Formular senden ist nichts anderes als das Senden eines Formulars mit der Formular-ID, wenn Sie auf eine Schaltfläche klicken

Bitte folgen Sie den Schritten

Schritt 1 - Das Formular-Tag muss ein ID-Feld haben

<form method="post" class="form-horizontal" action="test/user/add" id="submitForm">
.....
</form>

Schaltfläche, auf die Sie klicken werden

<button>Save</button>

Schritt 2 - einreichen Ereignis in jQuery , die eine Form einreichen kann. in folgenden Code bereiten wir JSON - Anforderung von HTML - Elemente Namen .

$("#submitForm").submit(function(e) {
    e.preventDefault();
    var frm = $("#submitForm");
    var data = {};
    $.each(this, function(i, v){
        var input = $(v);
        data[input.attr("name")] = input.val();
        delete data["undefined"];
    });
    $.ajax({
        contentType:"application/json; charset=utf-8",
        type:frm.attr("method"),
        url:frm.attr("action"),
        dataType:'json',
        data:JSON.stringify(data),
        success:function(data) {
            alert(data.message);
        }
    });
});

Für eine Live-Demo klicken Sie auf den folgenden Link

Wie sende ich ein Formular mit jQuery AJAX?

erwägen, zu verwenden closest

$('table+table form').closest('tr').filter(':not(:last-child)').submit(function (ev, frm) {
        frm = $(ev.target).closest('form');
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert(data);
            }
        })
        ev.preventDefault();
    });

Ich weiß, dass dies eine jQueryverwandte Frage ist, aber heutzutage sind die Dinge mit JS ES6 viel einfacher. Da es keine reine javascriptAntwort gibt, dachte ich, ich könnte eine einfache reine javascriptLösung hinzufügen , die meiner Meinung nach viel sauberer ist, indem ich die fetch()API verwende. Dies ist eine moderne Methode zur Implementierung von Netzwerkanforderungen. In Ihrem Fall können wir, da Sie bereits ein Formularelement haben, es einfach verwenden, um unsere Anfrage zu erstellen.

const form = document.forms["orderproductForm"];
const formInputs = form.getElementsByTagName("input"); 
let formData = new FormData(); 
for (let input of formInputs) {
    formData.append(input.name, input.value); 
}

fetch(form.action,
    {
        method: form.method,
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(error.message))
    .finally(() => console.log("Done"));

So vermeiden Sie das Senden mehrerer Formulardaten:

Vergessen Sie nicht, das Submit-Ereignis aufzuheben, bevor das Formular erneut gesendet wird. Der Benutzer kann die Sumbit-Funktion mehrmals aufrufen, hat möglicherweise etwas vergessen oder war ein Validierungsfehler.

 $("#idForm").unbind().submit( function(e) {
  ....

Wenn Sie das Formular .serialize () verwenden, müssen Sie jedem Formularelement einen Namen wie diesen geben:

<input id="firstName" name="firstName" ...

Und das Formular wird folgendermaßen serialisiert:

firstName=Chris&lastName=Halcrow ...

Sie können diese Funktion zum Senden wie unten verwenden.

HTML-Formular

<form class="form" action="" method="post">
    <input type="text" name="name" id="name" >
    <textarea name="text" id="message" placeholder="Write something to us"> </textarea>
    <input type="button" onclick="return formSubmit();" value="Send">
</form>

jQuery-Funktion:

<script>
    function formSubmit(){
        var name = document.getElementById("name").value;
        var message = document.getElementById("message").value;
        var dataString = 'name='+ name + '&message=' + message;
        jQuery.ajax({
            url: "submit.php",
            data: dataString,
            type: "POST",
            success: function(data){
                $("#myForm").html(data);
            },
            error: function (){}
        });
    return true;
    }
</script>

Weitere Details und Beispiele finden Sie unter: http://www.spiderscode.com/simple-ajax-contact-form/

Dies ist nicht die Antwort auf die Frage von OP.
Wenn Sie jedoch kein statisches Formular-DOM verwenden können, können Sie dies auch versuchen.

var $form = $('<form/>').append(
    $('<input/>', {name: 'username'}).val('John Doe'),
    $('<input/>', {name: 'user_id'}).val('john.1234')
);

$.ajax({
    url: 'api/user/search',
    type: 'POST',
    contentType: 'application/x-www-form-urlencoded',
    data: $form.serialize(),
    success: function(data, textStatus, jqXHR) {
        console.info(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        var errorMessage = jqXHR.responseText;
        if (errorMessage.length > 0) {
            alert(errorMessage);
        }
    }
});

Versuchen

fetch(form.action,{method:'post', body: new FormData(form)});

function send(e,form) {
  fetch(form.action,{method:'post', body: new FormData(form)});

  console.log('We submit form asynchronously (AJAX)');
  e.preventDefault();
}

<form method="POST" action="myapi/send" onsubmit="send(event,this)" name="orderproductForm">
    <input hidden name="csrfToken" value="$0meh@$h">
    <input name="email" value="[email protected]">
    <input name="phone" value="123-456-666">
    <input type="submit">    
</form>

Look on Chrome Console > Network after/before 'submit'

Nur eine freundliche Erinnerung, datadie auch ein Objekt sein kann:

$('form#foo').submit(function () {
    $.ajax({
        url: 'http://foo.bar/some-ajax-script',
        type: 'POST',
        dataType: 'json',
        data: {
            'foo': 'some-foo',
            'bar': 'some-bar'
        }
    }).always(function (data) {
        console.log(data);
    });

    return false;
});

JavaScript

(function ($) {
    var form= $('#add-form'),
      input = $('#exampleFormControlTextarea1');


   form.submit(function(event) {

       event.preventDefault(); 

       var req = $.ajax({
           url: form.attr('action'),
           type: 'POST',
           data: form.serialize()
       });
    req.done(function(data) {
       if (data === 'success') {
           var li = $('<li class="list-group-item">'+ input.val() +'</li>');
            li.hide()
                .appendTo('.list-group')
                .fadeIn();
            $('input[type="text"],textarea').val('');
        }
   });
});


}(jQuery));

HTML

    <ul class="list-group col-sm-6 float-left">
            <?php
            foreach ($data as $item) {
                echo '<li class="list-group-item">'.$item.'</li>';
            }
            ?>
        </ul>

        <form id="add-form" class="col-sm-6 float-right" action="_inc/add-new.php" method="post">
            <p class="form-group">
                <textarea class="form-control" name="message" id="exampleFormControlTextarea1" rows="3" placeholder="Is there something new?"></textarea>
            </p>
            <button type="submit" class="btn btn-danger">Add new item</button>
        </form>

Es gibt auch das Submit-Ereignis, das wie folgt ausgelöst werden kann: $ ("# form_id"). Submit (). Sie würden diese Methode verwenden, wenn das Formular bereits in HTML gut dargestellt ist. Sie haben gerade die Seite gelesen, die Formulareingaben mit Material gefüllt und dann .submit () aufgerufen. Es wird die in der Deklaration des Formulars definierte Methode und Aktion verwenden, sodass Sie sie nicht in Ihr Javascript kopieren müssen.

Beispiele