it-swarm.com.de

Wie kann ich mit JavaScript / jQuery Formulardaten abrufen?

Gibt es eine einfache, einzeilige Möglichkeit, die Daten eines Formulars so abzurufen, als ob sie nur im klassischen HTML-Format übermittelt würden?

Zum Beispiel in:

<form>
 <input type="radio" name="foo" value="1" checked="checked" />
 <input type="radio" name="foo" value="0" />
 <input name="bar" value="xxx" />
 <select name="this">
  <option value="hi" selected="selected">Hi</option>
  <option value="ho">Ho</option>
</form>

Aus:

{
 "foo": "1",
 "bar": "xxx",
 "this": "hi"
}

So etwas ist zu einfach, da es keine (richtigen) Textbereiche, Auswahlfelder, Optionsfelder und Kontrollkästchen enthält:

$("#form input").each(function() {
 data[theFieldName] = theFieldValue;
});
353
$('form').serialize() //this produces: "foo=1&bar=xxx&this=hi"

Demo

390
chelmertz

Verwenden Sie $('form').serializeArray() , das ein Array zurückgibt:

[
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]

Eine andere Option ist $('form').serialize() , die eine Zeichenfolge zurückgibt :

"foo=1&bar=xxx&this=hi"

Schauen Sie sich diese jsfiddle-Demo an

468
Paul

Aktualisierte Antwort für 2014: HTML5 FormData erledigt dies

var formData = new FormData(document.querySelector('form'))

Sie können dann formData genau so posten, wie es ist - es enthält alle Namen und Werte, die im Formular verwendet werden.

167
mikemaccana

Gibt basierend auf jQuery.serializeArray Schlüssel-Wert-Paare zurück.

_var data = $('#form').serializeArray().reduce(function(obj, item) {
    obj[item.name] = item.value;
    return obj;
}, {});
_
155
neuront
document.querySelector('form').addEventListener('submit', (e) => {
  const formData = new FormData(e.target);
  // Now you can use formData.get('foo'), for example.
  // Don't forget e.preventDefault() if you want to stop normal form .submission
});

Dies ist eine pingelige Antwort, aber lassen Sie mich erklären, warum dies eine bessere Lösung ist:

  • Wir behandeln das Senden eines Formulars ordnungsgemäß und nicht das Drücken einer Taste. Einige Leute mögen es, auf Felder zu drücken. Einige Leute verwenden alternative Eingabegeräte wie Spracheingabe oder andere Eingabegeräte. Bearbeiten Sie das Formular, und lösen Sie es korrekt für alle.

  • Wir durchsuchen die Formulardaten für das tatsächlich übermittelte Formular. Wenn Sie Ihre Formularauswahl später ändern, müssen Sie die Auswahl nicht für alle Felder ändern. Darüber hinaus können mehrere Formulare mit denselben Eingabenamen vorhanden sein. Keine Notwendigkeit, mit übermäßigen IDs zu disambiguieren und was nicht, verfolgen Sie einfach die Eingaben auf der Grundlage des Formulars, das gesendet wurde. Auf diese Weise können Sie auch einen einzelnen Ereignishandler für mehrere Formulare verwenden if das entspricht Ihrer Situation.

  • Die FormData-Oberfläche ist ziemlich neu, wird aber von Browsern gut unterstützt. Es ist eine großartige Möglichkeit, diese Datensammlung aufzubauen, um die wahren Werte dessen zu ermitteln, was in der Form enthalten ist. Ohne müssen Sie alle Elemente durchlaufen (z. B. mit form.elements) und herausfinden, was überprüft wurde, was nicht, was die Werte sind usw. Möglich, wenn Sie einen alten Browser benötigen Unterstützung, aber die FormData-Schnittstelle ist einfacher.

  • Ich verwende hier ES6 ... in keiner Weise erforderlich. Ändern Sie es daher in ES5-kompatibel, wenn Sie Unterstützung für alte Browser benötigen.

60
Brad

verwenden Sie .serializeArray (), um die Daten im Array-Format abzurufen und anschließend in ein Objekt zu konvertieren:

function getFormObj(formId) {
    var formObj = {};
    var inputs = $('#'+formId).serializeArray();
    $.each(inputs, function (i, input) {
        formObj[input.name] = input.value;
    });
    return formObj;
}
25
Nils

Hier ist eine wirklich einfache und kurze Lösung, die nicht einmal Jquery erfordert.

var formElements=document.getElementById("myForm").elements;    
var postData={};
for (var i=0; i<formElements.length; i++)
    if (formElements[i].type!="submit")//we dont want to include the submit-buttom
        postData[formElements[i].name]=formElements[i].value;
24
Clox
$('#myform').serialize();
15
Andy Baird

Ich benutze das:

jQuery Plugin

(function($){
  $.fn.getFormData = function(){
    var data = {};
    var dataArray = $(this).serializeArray();
    for(var i=0;i<dataArray.length;i++){
      data[dataArray[i].name] = dataArray[i].value;
    }
    return data;
  }
})(jQuery);

HTML-Formular

<form id='myform'>
  <input name='myVar1' />
  <input name='myVar2' />
</form>

Holen Sie sich die Daten

var myData = $("#myForm").getFormData();
13
Dustin Poissant
$("#form input, #form select, #form textarea").each(function() {
 data[theFieldName] = theFieldValue;
});

ansonsten möchten Sie vielleicht serialize () ;

12
pixeline

Hier ist eine funktionierende JavaScript-Implementierung, die nur Kontrollkästchen, Optionsfelder und Schieberegler korrekt verarbeitet (wahrscheinlich auch andere Eingabetypen, aber ich habe diese nur getestet).

function setOrPush(target, val) {
    var result = val;
    if (target) {
        result = [target];
        result.Push(val);
    }
    return result;
}

function getFormResults(formElement) {
    var formElements = formElement.elements;
    var formParams = {};
    var i = 0;
    var elem = null;
    for (i = 0; i < formElements.length; i += 1) {
        elem = formElements[i];
        switch (elem.type) {
            case 'submit':
                break;
            case 'radio':
                if (elem.checked) {
                    formParams[elem.name] = elem.value;
                }
                break;
            case 'checkbox':
                if (elem.checked) {
                    formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
                }
                break;
            default:
                formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
        }
    }
    return formParams;
}

Arbeitsbeispiel:

    function setOrPush(target, val) {
      var result = val;
      if (target) {
        result = [target];
        result.Push(val);
      }
      return result;
    }

    function getFormResults(formElement) {
      var formElements = formElement.elements;
      var formParams = {};
      var i = 0;
      var elem = null;
      for (i = 0; i < formElements.length; i += 1) {
        elem = formElements[i];
        switch (elem.type) {
          case 'submit':
            break;
          case 'radio':
            if (elem.checked) {
              formParams[elem.name] = elem.value;
            }
            break;
          case 'checkbox':
            if (elem.checked) {
              formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
            }
            break;
          default:
            formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
        }
      }
      return formParams;
    }

    //
    // Boilerplate for running the snippet/form
    //

    function ok() {
      var params = getFormResults(document.getElementById('main_form'));
      document.getElementById('results_wrapper').innerHTML = JSON.stringify(params, null, ' ');
    }

    (function() {
      var main_form = document.getElementById('main_form');
      main_form.addEventListener('submit', function(event) {
        event.preventDefault();
        ok();
      }, false);
    })();
<form id="main_form">
  <div id="questions_wrapper">
    <p>what is a?</p>
    <div>
      <input type="radio" required="" name="q_0" value="a" id="a_0">
      <label for="a_0">a</label>
      <input type="radio" required="" name="q_0" value="b" id="a_1">
      <label for="a_1">b</label>
      <input type="radio" required="" name="q_0" value="c" id="a_2">
      <label for="a_2">c</label>
      <input type="radio" required="" name="q_0" value="d" id="a_3">
      <label for="a_3">d</label>
    </div>
    <div class="question range">
      <label for="a_13">A?</label>
      <input type="range" required="" name="q_3" id="a_13" min="0" max="10" step="1" list="q_3_dl">
      <datalist id="q_3_dl">
        <option value="0"></option>
        <option value="1"></option>
        <option value="2"></option>
        <option value="3"></option>
        <option value="4"></option>
        <option value="5"></option>
        <option value="6"></option>
        <option value="7"></option>
        <option value="8"></option>
        <option value="9"></option>
        <option value="10"></option>
      </datalist>
    </div>
    <p>A and/or B?</p>
    <div>
      <input type="checkbox" name="q_4" value="A" id="a_14">
      <label for="a_14">A</label>
      <input type="checkbox" name="q_4" value="B" id="a_15">
      <label for="a_15">B</label>
    </div>
  </div>
  <button id="btn" type="submit">OK</button>
</form>
<div id="results_wrapper"></div>

bearbeiten:

Wenn Sie nach einer vollständigeren Implementierung suchen, schauen Sie sich diesen Abschnitt des Projekts, für das ich das gemacht habe an. Ich werde diese Frage irgendwann mit der vollständigen Lösung aktualisieren, die ich mir ausgedacht habe, aber vielleicht ist dies für jemanden hilfreich.

11
Kyle Falconer

Wenn Sie jQuery verwenden, finden Sie hier eine kleine Funktion, die genau das tut, wonach Sie suchen.

Fügen Sie zunächst eine ID zu Ihrem Formular hinzu (es sei denn, es ist das einzige Formular auf der Seite, dann können Sie einfach "Formular" als Dom-Abfrage verwenden).

<form id="some-form">
 <input type="radio" name="foo" value="1" checked="checked" />
 <input type="radio" name="foo" value="0" />
 <input name="bar" value="xxx" />
 <select name="this">
  <option value="hi" selected="selected">Hi</option>
  <option value="ho">Ho</option>
</form>

<script>
//read in a form's data and convert it to a key:value object
function getFormData(dom_query){
    var out = {};
    var s_data = $(dom_query).serializeArray();
    //transform into simple data/value object
    for(var i = 0; i<s_data.length; i++){
        var record = s_data[i];
        out[record.name] = record.value;
    }
    return out;
}

console.log(getFormData('#some-form'));
</script>

Die Ausgabe würde folgendermaßen aussehen:

{
 "foo": "1",
 "bar": "xxx",
 "this": "hi"
}
9
RobKohr

Es ist 2019 und es gibt einen besseren Weg, dies zu tun:

const form = document.querySelector('form');
const data = new URLSearchParams(new FormData(form).entries());

oder wenn Sie stattdessen ein einfaches Objekt möchten

const form = document.querySelector('form');
const data = Object.fromEntries(new FormData(form).entries());

beachten Sie jedoch, dass dies nicht mit doppelten Schlüsseln funktioniert, wie Sie sie von Mehrfachauswahl- und doppelten Kontrollkästchen mit demselben Namen erhalten.

7
fringd

Sie können auch die Objekte FormData verwenden. Mit dem FormData-Objekt können Sie eine Reihe von Schlüssel/Wert-Paaren kompilieren, die mit XMLHttpRequest gesendet werden sollen. Es ist in erster Linie zum Senden von Formulardaten vorgesehen, kann jedoch unabhängig von Formularen zum Übertragen von Schlüsseldaten verwendet werden.

        var formElement = document.getElementById("myform_id");
        var formData = new FormData(formElement);
        console.log(formData);
6
numediaweb

Ich habe die Antwort beigefügt, um auch das gewünschte Objekt zurückzugeben.

function getFormData(form) {
var rawJson = form.serializeArray();
var model = {};

$.map(rawJson, function (n, i) {
    model[n['name']] = n['value'];
});

return model;
}
5
Tom McDonough

Dadurch werden alle Formularfelder an das JavaScript-Objekt "res" angehängt:

var res = {};
$("#form input, #form select, #form textarea").each(function(i, obj) {
    res[obj.name] = $(obj).val();
})
5
gamliela
var formData = new FormData($('#form-id'));
params   = $('#form-id').serializeArray();

$.each(params, function(i, val) {
    formData.append(val.name, val.value);
});
5
George John

sie können diese Funktion verwenden, um ein Objekt oder eine JSON aus dem Formular zu haben.

zur Verwendung:

var object = formService.getObjectFormFields("#idform");
 function  getObjectFormFields(formSelector)
        {
            /// <summary>Função que retorna objeto com base nas propriedades name dos elementos do formulário.</summary>
            /// <param name="formSelector" type="String">Seletor do formulário</param>

            var form = $(formSelector);

            var result = {};
            var arrayAuxiliar = [];
            form.find(":input:text").each(function (index, element)
            {
                var name = $(element).attr('name');

                var value = $(element).val();
                result[name] = value;
            });

            form.find(":input[type=hidden]").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = value;
            });


            form.find(":input:checked").each(function (index, element)
            {
                var name;
                var value;
                if ($(this).attr("type") == "radio")
                {
                    name = $(element).attr('name');
                    value = $(element).val();
                    result[name] = value;
                }
                else if ($(this).attr("type") == "checkbox")
                {
                    name = $(element).attr('name');
                    value = $(element).val();
                    if (result[name])
                    {
                        if (Array.isArray(result[name]))
                        {
                            result[name].Push(value);
                        } else
                        {
                            var aux = result[name];
                            result[name] = [];
                            result[name].Push(aux);
                            result[name].Push(value);
                        }

                    } else
                    {
                        result[name] = [];
                        result[name].Push(value);
                    }
                }

            });

            form.find("select option:selected").each(function (index, element)
            {
                var name = $(element).parent().attr('name');
                var value = $(element).val();
                result[name] = value;

            });

            arrayAuxiliar = [];
            form.find("checkbox:checked").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = arrayAuxiliar.Push(value);
            });

            form.find("textarea").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = value;
            });

            return result;
        }
4
Marcos Costa

Basierend auf der Antwort von neuront habe ich eine einfache JQuery-Methode erstellt, die die Formulardaten in Schlüssel-Wert-Paaren abruft, aber für Mehrfachauswahl und für Array-Eingaben mit name = 'example []' funktioniert.

So wird es benutzt:

var form_data = $("#form").getFormObject();

Nachfolgend finden Sie ein Beispiel für die Definition und Funktionsweise.

// Function start
$.fn.getFormObject = function() {
    var object = $(this).serializeArray().reduce(function(obj, item) {
        var name = item.name.replace("[]", "");
        if ( typeof obj[name] !== "undefined" ) {
            if ( !Array.isArray(obj[name]) ) {
                obj[name] = [ obj[name], item.value ];
            } else {
               obj[name].Push(item.value);
            }
        } else {
            obj[name] = item.value;
        }
        return obj;
    }, {});
    return object;
}
// Function ends

// This is how it's used
$("#getObject").click( function() {
  var form_data = $("#form").getFormObject();
  console.log(form_data);
});
/* Only to make view better ;) */
#getObject {
  padding: 10px;
  cursor:pointer;
  background:#0098EE;
  color:white;
  display:inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form id="form">
  <input type="text" name="text" value="Hola amigo" /> 
  
  <input type="text" name="text_array[]" value="Array 1" /> 
  <input type="text" name="text_array[]" value="Array 2" /> 
  <input type="text" name="text_array[]" value="Array 3" /> 
  
  <select name="multiselect" multiple>
    <option name="option1" selected> option 1 </option>
    <option name="option2" selected> option 2 </option>
  </select>
  
  <input type="checkbox" name="checkbox" value="checkbox1" checked/>
  <input type="checkbox" name="checkbox" value="checkbox2" checked/>
  
  <input type="radio" name="radio" value="radio1" checked/>
  <input type="radio" name="radio" value="radio2"/>

</form>

<div id="getObject"> Get object (check the console!) </div>
4
manuman94
function getFormData($form){
    var unindexed_array = $form.serializeArray();
    var indexed_array = {};

    $.map(unindexed_array, function(n, i){
        if(indexed_array[n['name']] == undefined){
            indexed_array[n['name']] = [n['value']];
        }else{
            indexed_array[n['name']].Push(n['value']);
        }
    });

    return indexed_array;
}
4
郭润民

Ich habe eine Bibliothek geschrieben, um dieses Problem zu lösen: JSONForms . Es nimmt eine Form an, durchläuft jede Eingabe und erstellt ein JSON-Objekt, das Sie leicht lesen können.

Angenommen, Sie haben das folgende Formular:

<form enctype='application/json'>
  <input name='places[0][city]' value='New York City'>
  <input type='number' name='places[0][population]' value='8175133'>
  <input name='places[1][city]' value='Los Angeles'>
  <input type='number' name='places[1][population]' value='3792621'>
  <input name='places[2][city]' value='Chicago'>
  <input type='number' name='places[2][population]' value='2695598'>
</form>

Wenn Sie das Formular an die encode-Methode von JSONForms übergeben, erhalten Sie das folgende Objekt:

{
  "places": [
    {
      "city": "New York City",
      "population": 8175133
    },
    {
      "city": "Los Angeles",
      "population": 3792621
    },
    {
      "city": "Chicago",
      "population": 2695598
    }
  ]
}

Hier ist Demo mit Ihrem Formular.

3

zeigt Formulareingabeelementfelder und Eingabedateien an, um Ihr Formular ohne Seitenaktualisierung zu senden und alle Werte mit Dateieinschluss hier abzurufen

<form id="imageUploadForm"   action="" method="post" enctype="multipart/form-data">
<input type="text" class="form-control" id="fname" name='fname' placeholder="First Name" >
<input type="text" class="form-control" name='lname' id="lname" placeholder="Last Name">
<input type="number" name='phoneno'  class="form-control" id="phoneno" placeholder="Phone Number">
<textarea class="form-control" name='address' id="address" rows="5" cols="5" placeholder="Your Address"></textarea>
<input type="file" name="file" id="file" >
<input type="submit" id="sub" value="Registration">                                          
</form>
$('#imageUploadForm').on('submit',(function(e) 
{
     fname = $('#fname').val();
     lname =  $('#lname').val();
     address =  $('#address').val();
     phoneno =  $('#phoneno').val();
     file =  $('#file').val();
     e.preventDefault();
     var formData = new FormData(this);
     formData.append('file', $('#file')[0]);
     formData.append('fname',$('#fname').val());
     formData.append('lname',$('#lname').val());
     formData.append('phoneno',$('#phoneno').val());
     formData.append('address',$('#address').val());
     $.ajax({
                type:'POST',
                url: "test.php",
                //url: '<?php echo base_url().'edit_profile/edit_profile2';?>',

                data:formData,
                cache:false,
                contentType: false,
                processData: false,
                success:function(data)
                {
                     alert('Data with file are submitted !');

                }

     });

}))
1
Mohsin Shoukat
$(form).serializeArray().reduce(function (obj, item) {
      if (obj[item.name]) {
           if ($.isArray(obj[item.name])) {
               obj[item.name].Push(item.value);
           } else {
                var previousValue = obj[item.name];
                obj[item.name] = [previousValue, item.value];
           }
      } else {
           obj[item.name] = item.value;
      }

     return obj;
}, {});

Es wird das Problem beheben: konnte nicht mit Multiselects arbeiten.

1
ke ke

Ich habe eine Funktion geschrieben, die sich um mehrere Kontrollkästchen und Mehrfachauswahl kümmert. In diesen Fällen wird ein Array zurückgegeben.

function getFormData(formId) {
    return $('#' + formId).serializeArray().reduce(function (obj, item) {
        var name = item.name,
            value = item.value;

        if (obj.hasOwnProperty(name)) {
            if (typeof obj[name] == "string") {
                obj[name] = [obj[name]];
                obj[name].Push(value);
            } else {
                obj[name].Push(value);
            }
        } else {
            obj[name] = value;
        }
        return obj;
    }, {});
}
1
István

Sie sind alle nicht ganz richtig. Sie können nicht schreiben:

formObj[input.name] = input.value;

Wenn Sie eine Mehrfachauswahlliste haben, werden deren Werte mit denen der letzten Liste überschrieben, da sie wie folgt übertragen werden: "param1": "value1", "param1": "value2".

Richtiger Ansatz ist also:

if (formData[input.name] === undefined) {
    formData[input.name] = input.value;
}
else {
    var inputFieldArray = $.merge([], $.isArray(formData[input.name]) ? formData[input.name] : [formData[input.name]]);
    $.merge(inputFieldArray, [input.value]);
    formData[input.name] = $.merge([], inputFieldArray);
}
0
Alexander

Diese Methode sollte es tun. Es serialisiert die Formulardaten und konvertiert sie dann in ein Objekt. Kümmert sich auch um Gruppen von Checkboxen.

function getFormObj(formId) {
  var formParams = {};
  $('#' + formId)
    .serializeArray()
    .forEach(function(item) {
      if (formParams[item.name]) {
        formParams[item.name] = [formParams[item.name]];
        formParams[item.name].Push(item.value)
      } else {
        formParams[item.name] = item.value
      }
    });
  return formParams;
}
0
user1101791

Hier ist eine Nice Vanilla JS-Funktion, die ich geschrieben habe, um Formulardaten als Objekt zu extrahieren. Es gibt auch Optionen zum Einfügen von Ergänzungen in das Objekt und zum Löschen der Formulareingabefelder.

const extractFormData = ({ form, clear, add }) => {
  return [].slice.call(form.children).filter(node => node.nodeName === 'INPUT')
  .reduce((formData, input) => {
    const value = input.value
    if (clear) { input.value = '' }
    return {
      ...formData,
      [input.name]: value
    }
  }, add)
}

Hier ist ein Beispiel für die Verwendung mit einer Post-Anfrage:

submitGrudge(e) {
  e.preventDefault()

  const form = e.target
  const add = { id: Date.now(), forgiven: false }
  const grudge = extractFormData({ form, add, clear: true })

  // grudge = {
  //  "name": "Example name",
  //  "offense": "Example string",
  //  "date": "2017-02-16",
  //  "id": 1487877281983,
  //  "forgiven": false
  // }

  fetch('http://localhost:3001/api/grudge', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(grudge)
  })
    .then(response => response.json())
    .then(grudges => this.setState({ grudges }))
    .catch(err => console.log('error: ', err))
}
0
IanLancaster