it-swarm.com.de

Formulareingabefelder mit jQuery erhalten?

Ich habe ein Formular mit vielen Eingabefeldern.

Ist es möglich, alle Eingabefelder dieses Formulars in einem assoziativen Array abzurufen, wenn ich das Ereignis submit form mit jQuery abfange?

400
Vasil
$('#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 dem Tipp von Simon_Weaver können Sie dies auch auf folgende Weise tun: serializeArray :

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

Beachten Sie, dass dieses Snippet für <select multiple> -Elemente fehlschlägt.

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

501
nickf

Zu spät zur Party zu 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();

});
247
Lance Rushing

Das jquery.form Plugin kann dabei helfen, wonach andere suchen, um diese Frage zu beantworten. Ich bin mir nicht sicher, ob es direkt tut, was Sie wollen oder nicht.

Es gibt auch die Funktion serializeArray .

23
Simon_Weaver

Manchmal finde ich es sinnvoller, immer nur einen nach dem anderen zu haben. Dafür gibt es folgendes:

var input_name = "firstname";
var input = $("#form_id :input[name='"+input_name+"']"); 
15
Malachi
$('#myForm').bind('submit', function () {
  var elements = this.elements;
});

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

12
Quentin

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

$('.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, dass dies für jeden von euch von Nutzen ist :)

9
Elmo

Hatte ein ähnliches Problem mit einer leichten Wendung und ich dachte, ich würde das rausschmeißen. Ich habe eine Rückruffunktion, die das Formular abruft, also hatte ich bereits ein Formularobjekt und konnte keine einfachen Varianten von $('form:input') ausführen. Stattdessen habe ich mir ausgedacht:

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

Es ist eine ähnliche, aber nicht identische Situation, aber ich fand diesen Thread sehr nützlich und dachte, ich würde dies am Ende verstauen und hoffe, dass jemand anderes sie nützlich fand.

5
Chris

jQueries serializeArray enthält keine deaktivierten Felder. Wenn Sie diese also auch benötigen, versuchen Sie Folgendes:

var data = {};
$('form.my-form').find('input, textarea, select').each(function(i, field) {
    data[field.name] = field.value;
});
4
Sarah Vessels

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

var items = new Array();

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

Vergessen Sie nicht die Kontrollkästchen und Optionsfelder -

var inputs = $("#myForm :input");
var obj = $.map(inputs, function(n, i) {
  var o = {};
  if (n.type == "radio" || n.type == "checkbox")
    o[n.id] = $(n).attr("checked");
  else
    o[n.id] = $(n).val();
  return o;
});
return obj
3

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 erfolgen

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

var data = new FormData([form])
3
Chris Wheeler

Scheint seltsam, dass niemand eine präzise Lösung für das Abrufen von Listendaten vorgeschlagen hat. Kaum ein Formular wird ein eindimensionales Objekt sein.

Der Nachteil dieser Lösung ist natürlich, dass auf Ihre Singleton-Objekte am Index [0] zugegriffen werden muss. Aber IMO ist viel besser als die Verwendung einer Dutzend-Zeilen-Mapping-Lösung.

var formData = $('#formId').serializeArray().reduce(function (obj, item) {
    if (obj[item.name] == null) {
        obj[item.name] = [];
    } 
    obj[item.name].Push(item.value);
    return obj;
}, {});
2
Ryanman

Dieselbe Lösung wie durch nickf angegeben, jedoch unter Berücksichtigung von Array-Eingabenamen, z

<input type="text" name="array[]" />

values = {};
$("#something :input").each(function() {
  if (this.name.search(/\[\]/) > 0) //search for [] in name
  {
    if (typeof values[this.name] != "undefined") {
      values[this.name] = values[this.name].concat([$(this).val()])
    } else {
      values[this.name] = [$(this).val()];
    }
  } else {
    values[this.name] = $(this).val();
  }
});
2
Itako

Dieser Code funktioniert Anstelle des Namens geben Sie bitte 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();
  });
});
2
sparsh turkane

Ich hatte das gleiche Problem und habe es auf andere Weise gelöst.

var arr = new Array();
$(':input').each(function() {
 arr.Push($(this).val());
});
arr;

Es gibt den Wert aller Eingabefelder zurück. Sie können die Funktion $(':input') genauer einstellen.

2
suizo

Inspiriert von den Antworten von Lance Rushing und Simon_Weaver , ist dies meine Lieblingslösung.

$('#myForm').submit( function( event ) {
    var values = $(this).serializeArray();
    // In my case, I need to fetch these data before custom actions
    event.preventDefault();
});

Die Ausgabe ist eine Anordnung von Objekten, z.

[{name: "start-time", value: "11:01"}, {name: "end-time", value: "11:11"}]

Mit dem Code unten,

var inputs = {};
$.each(values, function(k, v){
    inputs[v.name]= v.value;
});

seine endgültige Ausgabe wäre

{"start-time":"11:01", "end-time":"11:01"}
1
T.Liu

Ich hoffe, das ist hilfreich und auch am einfachsten.

 $("#form").submit(function (e) { 
    e.preventDefault();
    input_values =  $(this).serializeArray();
  });
1
Dipen Parmar

Ich benutze diesen Code ohne jede Schleife:

$('.subscribe-form').submit(function(e){
    var arr=$(this).serializeArray();
    var values={};
    for(i in arr){values[arr[i]['name']]=arr[i]['value']}
    console.log(values);
    return false;
});
1
Roman Grinev

Wenn Sie mehrere Werte von Eingaben abrufen müssen und mit [] die Eingaben mit mehreren Werten definieren, können Sie Folgendes verwenden:

$('#contentform').find('input, textarea, select').each(function(x, field) {
    if (field.name) {
        if (field.name.indexOf('[]')>0) {
            if (!$.isArray(data[field.name])) {
               data[field.name]=new Array();
            }
            data[field.name].Push(field.value);
        } else {
            data[field.name]=field.value;
        }
    }                   
});
1

serialize () ist die beste Methode. @ Christopher Parker sagt, dass Nickfs Antwort mehr leistet, berücksichtigt jedoch nicht, dass das Formular möglicherweise Textbereiche und ausgewählte Menüs enthält. Es ist weitaus besser, serialize () zu verwenden und das dann nach Bedarf zu bearbeiten. Daten von serialize () können entweder in einem Ajax-Beitrag oder in get verwendet werden, sodass dort kein Problem auftritt.

0
Billy

Als ich einen Ajax-Aufruf mit allen Formularfeldern durchführen musste, hatte ich Probleme mit dem Selektor : input, der alle Kontrollkästchen zurückgab, unabhängig davon, ob sie aktiviert waren oder nicht. Ich habe einen neuen Selektor hinzugefügt, um nur die übermittelbaren Formularelemente zu erhalten:

$.extend($.expr[':'],{
    submitable: function(a){
        if($(a).is(':checkbox:not(:checked)'))
        {
            return false;
        }
        else if($(a).is(':input'))
        {
            return true;
        }
        else
        {
            return false;
        }
    }
});

verwendungszweck:

$('#form_id :submitable');

Ich habe es zwar noch nicht mit mehreren Auswahlfeldern getestet, aber es funktioniert, um alle Formularfelder so abzurufen, wie es ein Standard-Submit tun würde.

Ich habe dies beim Anpassen der Produktoptionen auf einer OpenCart-Site verwendet, um Kontrollkästchen und Textfelder sowie den Standardtyp für Auswahlfelder einzuschließen.

0
slarti42uk

Alle Antworten sind gut, aber gibt es ein Feld, das Sie in dieser Funktion gerne ignorieren? Geben Sie dem Feld einfach eine Eigenschaft, zum Beispiel ignore_this:

<input type="text" name="some_name" ignore_this>

Und in Ihrer Serialize-Funktion:

if(!$(name).prop('ignorar')){
   do_your_thing;
}

Auf diese Weise ignorieren Sie einige Felder.

0
Marcelo Rocha

Hoffe das hilft jemandem. :)

// This html:
// <form id="someCoolForm">
// <input type="text" class="form-control" name="username" value="...." />
// 
// <input type="text" class="form-control" name="profile.first_name" value="...." />
// <input type="text" class="form-control" name="profile.last_name" value="...." />
// 
// <input type="text" class="form-control" name="emails[]" value="..." />
// <input type="text" class="form-control" name="emails[]" value=".." />
// <input type="text" class="form-control" name="emails[]" value="." />
// </form>
// 
// With this js:
// 
// var form1 = parseForm($('#someCoolForm'));
// console.log(form1);
// 
// Will output something like:
// {
// username: "test2"
// emails:
//   0: "[email protected]"
//   1: "[email protected]"
// profile: Object
//   first_name: "..."
//   last_name: "..."
// }
// 
// So, function below:

var parseForm = function (form) {

    var formdata = form.serializeArray();

    var data = {};

    _.each(formdata, function (element) {

        var value = _.values(element);

        // Parsing field arrays.
        if (value[0].indexOf('[]') > 0) {
            var key = value[0].replace('[]', '');

            if (!data[key])
                data[key] = [];

            data[value[0].replace('[]', '')].Push(value[1]);
        } else

        // Parsing nested objects.
        if (value[0].indexOf('.') > 0) {

            var parent = value[0].substring(0, value[0].indexOf("."));
            var child = value[0].substring(value[0].lastIndexOf(".") + 1);

            if (!data[parent])
                data[parent] = {};

            data[parent][child] = value[1];
        } else {
            data[value[0]] = value[1];
        }
    });

    return data;
};
0
Julian