Formulareingabefelder mit jQuery abrufen?

Ich habe ein Formular mit vielen Eingabefeldern.

Wenn ich das Sendeformular-Ereignis mit jQuery abfange, ist es möglich, alle Eingabefelder dieses Formulars in einem assoziativen Array zu erhalten?

$('#myForm').submit(function() {
    // get all the inputs into an array.
    var $inputs = $('#myForm :input');

    // not sure if you wanted this, but I thought I'd add it.
    // get an associative array of just the values.
    var values = {};
    $inputs.each(function() {
        values[this.name] = $(this).val();
    });

});

Dank des Tipps von Simon_Weaver gibt es hier eine andere Möglichkeit, dies zu tun, indem Sie verwenden serializeArray:

var values = {};
$.each($('#myForm').serializeArray(), function(i, field) {
    values[field.name] = field.value;
});

Beachten Sie, dass dieses Snippet fehlschlagen wird <select multiple> Elemente.

Es scheint, dass die neue HTML 5-Formulareingaben arbeite nicht mit serializeArray in jQuery-Version 1.3. Dies funktioniert in Version 1.4+

Zu spät zur Party bei dieser Frage, aber das ist noch einfacher:

$('#myForm').submit(function() {
    // Get all the forms elements and their values in one step
    var values = $(this).serialize();

});

Der jquery.form Plugin kann dabei helfen, wonach andere suchen, was zu dieser Frage führt. Ich bin mir nicht sicher, ob es direkt das tut, was Sie wollen oder nicht.

Es gibt auch die serializeArray Funktion.

Manchmal finde ich es sinnvoller, eine nach der anderen zu bekommen. Dafür gibt es das:

var input_name = "firstname";
var input = $("#form_id :input[name=""+input_name+""]"); 

Hier ist eine andere Lösung, auf diese Weise können Sie alle Daten über das Formular abrufen und in einem serverseitigen Aufruf oder so verwenden.

$('.form').on('submit', function( e )){ 
   var form = $( this ), // this will resolve to the form submitted
       action = form.attr( 'action' ),
         type = form.attr( 'method' ),
         data = {};

     // Make sure you use the 'name' field on the inputs you want to grab. 
   form.find( '[name]' ).each( function( i , v ){
      var input = $( this ), // resolves to current input element.
          name = input.attr( 'name' ),
          value = input.val();
      data[name] = value;
   });

  // Code which makes use of 'data'.

 e.preventDefault();
}

Sie können dies dann mit Ajax-Aufrufen verwenden:

function sendRequest(action, type, data) {
       $.ajax({
            url: action,
           type: type,
           data: data
       })
       .done(function( returnedHtml ) {
           $( "#responseDiv" ).append( returnedHtml );
       })
       .fail(function() {
           $( "#responseDiv" ).append( "This failed" );
       });
}

Hoffe, das ist für jeden von euch von Nutzen 🙂

$('#myForm').bind('submit', function () {
  var elements = this.elements;
});

Die Elementvariable enthält alle Eingaben, Auswahlen, Textbereiche und Feldsätze innerhalb des Formulars.

Dieses Stück Code wird funktionieren
Geben Sie anstelle des Namens die E-Mail-Adresse Ihres Formularfelds ein

$(document).ready(function(){
  $("#form_id").submit(function(event){
    event.preventDefault();
    var name = $("input[name="name"]",this).val();
    var email = $("input[name="email"]",this).val();
  });
});