JavaScript / jQuery ile form verilerini nasıl alabilirim?

Bir formun verilerini yalnızca klasik HTML biçiminde gönderilecekmiş gibi almanın basit, tek satırlık bir yolu var mı?

Örneğ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>

Çıktı:

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

Böyle bir şey çok basittir, çünkü textareas, seçimler, radyo düğmeleri ve onay kutularını (doğru bir şekilde) içermez:

$("#form input").each(function () {
    data[theFieldName] = theFieldValue;
});

$('form').serialize() //this produces: "foo=1&bar=xxx&this=hi"

gösteri

Dizi$('form').serializeArray() döndüren Use :

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

$('form').serialize()Bir dize döndüren diğer seçenek :

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

Bu jsfiddle demosuna bir göz atın

2014 için güncellenmiş cevap: HTML5 FormData bunu yapıyor

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

Daha sonra formData'yı olduğu gibi gönderebilirsiniz - formda kullanılan tüm adları ve değerleri içerir.

Esas alındığında jQuery.serializeArray, anahtar / değer çiftlerini döndürür.

var data = $('#form').serializeArray().reduce(function(obj, item) {
    obj[item.name] = item.value;
    return obj;
}, {});

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
});

Bu nitrik bir cevap, ama bunun neden daha iyi bir çözüm olduğunu açıklayayım:

• Bir düğmeye basmak yerine form gönderme işlemini doğru şekilde yapıyoruz. Bazı insanlar giriş alanlarını zorlamayı sever. Bazı kişiler konuşma girişi veya diğer erişilebilirlik cihazları gibi alternatif giriş cihazları kullanır. Formu gönderin ve herkes için doğru şekilde çözersiniz.

• Gönderilen gerçek form için form verilerini inceliyoruz. Form seçicinizi daha sonra değiştirirseniz, tüm alanlar için seçicileri değiştirmeniz gerekmez. Ayrıca, aynı giriş adlarına sahip birkaç formunuz olabilir. Aşırı kimlikleri belirlemeye gerek yok ve ne değilse, sadece gönderilen forma göre girdileri takip edin. Bu aynı zamanda birden fazla form için tek olay işleyicisi kullanmanızı sağlar eğer o durumunuza uygun olduğunu.

• FormData arabirimi oldukça yenidir, ancak tarayıcılar tarafından iyi desteklenir. Formdaki verilerin gerçek değerlerini elde etmek için bu veri toplamayı oluşturmanın harika bir yoludur. Onsuz, tüm öğeler arasında döngü yapmak zorunda kalacaksınız (gibi form.elements) ve neyin kontrol edildiğini, neyin olmadığını, değerlerin ne olduğunu vb. Anlamanız gerekir. Eski tarayıcı desteğine ihtiyacınız varsa, ancak FormData arayüz daha basittir.

• Burada ES6 kullanıyorum ... hiçbir şekilde bir gereklilik değil, bu yüzden eski tarayıcı desteğine ihtiyacınız varsa ES5 uyumlu olacak şekilde değiştirin.

Verileri dizi biçiminde almak için .serializeArray () kullanın ve daha sonra bir nesneye dönüştürün:

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

Jquery gerektirmeyen gerçekten basit ve kısa bir çözüm.

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;

2019 ve bunu yapmanın daha iyi bir yolu var:

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

veya bunun yerine düz bir Nesne istiyorsanız

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

bunun aynı adı taşıyan çoklu seçim ve çoğaltma onay kutularından aldığınız gibi yinelenen anahtarlarla çalışmadığını unutmayın.

$('#myform').serialize();

Bunu kullanıyorum:

jQuery Eklentisi

(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 Formu

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

Verileri Alın

var myData = $("#myForm").getFormData();

$("#form input, #form select, #form textarea").each(function() {
 data[theFieldName] = theFieldValue;
});

bunun dışında serialize () ;

İşte onay kutularını, radyo düğmelerini ve kaydırıcıları (muhtemelen diğer giriş türleri de doğru şekilde işleyen sadece çalışan bir JavaScript uygulamasıdır, ancak bunları sadece test ettim).

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;
}

Çalışma örneği:

    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>

Düzenle:

Daha eksiksiz bir uygulama arıyorsanız , bunun için yaptığım projenin bu bölümüne bir göz atın . Bu soruyu sonunda bulduğum tam çözümle güncelleyeceğim, ancak belki bu birisi için yararlı olacaktır.

JQuery kullanıyorsanız, aradığınızı yapacak küçük bir işlev.

İlk olarak, formunuza bir kimlik ekleyin (sayfadaki tek form değilse, dom sorgusu olarak sadece 'form' kullanabilirsiniz)

<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>

Çıktı şöyle görünecektir:

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

FormData Nesneleri'ni de kullanabilirsiniz ; FormData nesnesi, XMLHttpRequest kullanarak göndermek için bir dizi anahtar / değer çifti derlemenizi sağlar. Öncelikle form verilerinin gönderilmesinde kullanılmak üzere tasarlanmıştır, ancak anahtarlı verileri iletmek için formlardan bağımsız olarak kullanılabilir.

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

Bu, tüm form alanlarını "res" JavaScript nesnesine ekler:

var res = {};
$("#form input, #form select, #form textarea").each(function(i, obj) {
    res[obj.name] = $(obj).val();
})

Ayrıca gerekli nesneyi geri vermek için cevabı dahil ettim.

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

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

return model;
}

Neuront'un yanıtına dayanarak, form verilerini anahtar / değer çiftlerinde alan basit bir JQuery yöntemi oluşturdum, ancak çoklu seçimler ve name = 'example []' ile dizi girişleri için çalışıyor.

Bu şekilde kullanılır:

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

Aşağıda tanımının ve nasıl çalıştığının bir örneğini bulabilirsiniz.

// 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>

var formData = new FormData($('#form-id'));
params   = $('#form-id').serializeArray();

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

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;
}

formdan bir nesne veya JSON almak için bu işlevi kullanabilirsiniz .

kullanmak için:

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;
        }

Bu sorunu çözmek için bir kütüphane yazdım: JSONForms . Bir form alır, her girdiden geçer ve kolayca okuyabileceğiniz bir JSON nesnesi oluşturur.

Aşağıdaki forma sahip olduğunuzu varsayalım:

<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>

Formu JSONForms'un kodlama yöntemine iletmek size aşağıdaki nesneyi döndürür:

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

İşte formunuzla birlikte demo .

$( "form" ).bind( "submit", function(e) {
    e.preventDefault();
    
    console.log(  $(this).serializeObject() );    

    //console.log(  $(this).serialize() );
    //console.log(  $(this).serializeArray() );

});


$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();

    $.each( a, function() {
        if ( o[this.name] !== undefined) 
        {
            if ( ! o[this.name].push ) 
            {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        }
        else 
        {
            o[this.name] = this.value || '';
        }
    });

    return o;
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<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>
    </select>

    <input type="submit" value="Submit" />

</form>

Codepen

ObjectSerileştirilmiş bir dizenin aksine (tarafından döndürülen $(form).serialize()ve hafif bir iyileştirme gibi $(form).serializeArray()) tercih edenleriniz için aşağıdaki kodu kullanmaktan çekinmeyin:

var Form = {
    _form: null,
    _validate: function(){
        if(!this._form || this._form.tagName.toLowerCase() !== "form") return false;
        if(!this._form.elements.length) return false;
    }, _loopFields: function(callback){
        var elements = this._form.elements;
        for(var i = 0; i < elements.length; i++){
            var element = form.elements[i];
            if(name !== ""){
                callback(this._valueOfField(element));
            }
        }
    }, _valueOfField: function(element){
        var type = element.type;
        var name = element.name.trim();
        var nodeName = element.nodeName.toLowerCase();
        switch(nodeName){
            case "input":
                if(type === "radio" || type === "checkbox"){
                    if(element.checked){
                        return element.value;
                    }
                }
                return element.value;
                break;
            case "select":
                if(type === "select-multiple"){
                    for(var i = 0; i < element.options.length; i++){
                        if(options[i].selected){
                            return element.value;
                        }
                    }
                }
                return element.value;
                break;
            case "button":
                switch(type){
                    case "reset": 
                    case "submit": 
                    case "button":
                        return element.value;
                        break;
                }
                break;
        } 
    }, serialize: function(form){
        var data = {};
        this._form = form;

        if(this._validate()){
            this._loopFields(function(value){
                if(value !== null) data[name] = value;
            });
        }
        return data;
    }
};

Çalıştırmak için, sadece kullanın Form.serialize(form)ve işlev buna Objectbenzer bir geri dönecektir :

<!-- { username: "username", password: "password" } !-->
<input type="text" value="username">
<input type="password" value="password">

Bonus olarak, sadece bir serileştirme işlevi için jQuery paketinin tamamını yüklemeniz gerekmez .

Birden fazla onay kutusunu ve çoklu seçimleri halleden bir işlev yazdım. Bu durumlarda bir dizi döndürür.

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;
    }, {});
}

form yenileme öğesi alanlarını ve giriş dosyasını sayfa yenilemeden formunuzu göndermek ve dosyada bulunan tüm değerleri almak için buraya ekleyin

<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 !');

                }

     });

}))

$(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;
}, {});

Bu sorunu düzeltir: çoklu seçimlerle çalışamadı.

Hepiniz tam olarak doğru değilsiniz. Yazamazsın:

formObj[input.name] = input.value;

Çünkü çoklu seçim listeniz varsa - "param1": "value1", "param1": "value2" olarak iletildiği için değerlerinin sonuncusu ile üzerine yazılacaktır.

Yani, doğru yaklaşım:

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);
}

Bu yöntem bunu yapmalı. Form verilerini serileştirir ve sonra bunları bir nesneye dönüştürür. Ayrıca onay kutusu gruplarıyla ilgilenir.

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;
}

İşte bir nesne olarak form verilerini ayıklamak için yazdım güzel bir vanilya JS işlevi. Ayrıca, nesneye eklemeler ekleme ve form giriş alanlarını temizleme seçenekleri de vardır.

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)
}

Aşağıda, bir gönderi isteği ile kullanımının bir örneği verilmiştir:

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))
}