Formular-Eingabefelder mit jQuery? abrufen

Question

Ich habe ein Formular mit vielen Eingabefeldern.

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

Answer 1

Hier ist eine andere Lösung, auf diese Weise können Sie alle Daten über das Formular abrufen und sie in einem serverseitigen Aufruf oder etwas 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();
}

Diese können Sie 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" );
       });
}

Ich hoffe, dass dies für irgendjemanden von euch von Nutzen ist :)

Answer 2

http://api.jquery.com/serializearray/

$('#form').on('submit', function() {
    var data = $(this).serializeArray();
});

Dies kann auch ohne jQuery mit dem XMLHttpRequest Level 2 FormData Objekt gemacht werden

http://www.w3.org/TR/2010/WD-XMLHttpRequest2-20100907/#the-formdata-interface

var data = new FormData([form])

Answer 3

Assoziativ? Nicht ohne einige Arbeit, aber Sie können generische Selektoren verwenden:

var items = new Array();

$('#form_id:input').each(function (el) {
    items[el.name] = el;
});

Answer 4

Hatte ein ähnliches Problem mit einer kleinen Wendung und ich dachte, ich würde dies herauswerfen. Ich habe eine Callback-Funktion, die das Formular bekommt, so hatte ich ein Formular-Objekt bereits und konnte nicht einfach Varianten auf $('form:input') . Stattdessen habe ich mir etwas einfallen lassen:

    var dataValues = {};
    form.find('input').each(
        function(unusedIndex, child) {
            dataValues[child.name] = child.value;
        });

Seine ähnliche, aber nicht identische Situation, aber ich fand diesen Thread sehr nützlich und dachte, ich würde dies am Ende stecken und hoffen, dass jemand anderes fand es nützlich.

Answer 5

Dieser Code wird funktionieren anstelle von Name, E-Mail geben Sie den Namen Ihres Formularfeldes 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();
  });
});