Jak Mogę uzyskać dane formularza za pomocą JavaScript / jQuery?

Użycie $('form').serializeArray(), która zwraca tablicę :

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

Inną opcją jest $('form').serialize(), który zwraca string:

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

Spójrz na to demo jsfiddle

Na podstawie jQuery.serializeArray, zwraca pary klucz-wartość.

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

Zaktualizowana odpowiedź dla 2014: HTML5 FormData robi to

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

Możesz następnie opublikować formData dokładnie tak, jak jest-Zawiera ona wszystkie nazwy i wartości użyte w formularzu.

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

To jest nitpicky odpowiedź, ale pozwól mi wyjaśnić, dlaczego jest to lepsze rozwiązanie:

• Właściwie obsługujemy formularz, a nie przycisk. Niektórzy ludzie lubią wciskać enter na polach. Niektórzy ludzie używają alternatywnych urządzeń wejściowych, takich jak wprowadzanie mowy lub inne urządzenia ułatwiające dostęp. Obsłuż formularz Wyślij i poprawnie rozwiązać go dla wszystkich.

• Przekopujemy się do danych formularza, który został przesłany. Jeśli zmienisz swój selektor formularza później nie trzeba zmieniać selektorów dla wszystkich pól. Ponadto możesz mieć kilka formularzy o tych samych nazwach wejściowych. Nie ma potrzeby, aby disambiguate z nadmiernych ID i co nie, po prostu śledzić wejścia na podstawie formularza, który został przesłany. Pozwala to również na użycie pojedynczej obsługi zdarzeń dla wielu formularzy , Jeśli {[12] } jest to odpowiednie dla twojej sytuacji.

• Interfejs FormData jest dość nowy, ale jest dobrze obsługiwany przez przeglądarki. To jest świetny sposób na zbudowanie tego zbioru danych, aby uzyskać rzeczywiste wartości tego, co znajduje się w formularzu. Bez niego będziesz musiał przechodzić przez wszystkie elementy (takie jak z form.elements) i dowiedzieć się, co jest sprawdzane, co nie jest, jakie są wartości itp. Całkowicie możliwe, jeśli potrzebujesz obsługi starej przeglądarki, ale interfejs FormData jest prostszy.

• Używam tu ES6... w żaden sposób nie jest to wymóg, więc zmień go z powrotem na Kompatybilny z ES5, jeśli potrzebujesz wsparcia dla starej przeglądarki.

Użyj .serializeArray (), aby uzyskać dane w formacie tablicy, a następnie przekonwertować je na obiekt:

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

Oto naprawdę prosty i krótki soluton, który nawet nie wymaga Jquery.

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;

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

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

Poza tym, możesz spojrzeć na serialize();

Używam tego:

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

Formularz HTML

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

Pobierz Dane

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

Oto działająca implementacja JavaScript, która poprawnie obsługuje pola wyboru, przyciski opcji i suwaki(prawdopodobnie również inne typy wejść, ale tylko te testowałem).

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

Przykład roboczy:

    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>

Edit:

Jeśli szukasz bardziej kompletnej implementacji, zajrzyj do tej części projektu, dla którego to zrobiłem. W końcu zaktualizuję to pytanie o kompletne rozwiązanie, które wymyśliłem, ale może to komuś pomoże.

Jeśli używasz jQuery, oto mała funkcja, która zrobi to, czego szukasz.

Najpierw dodaj ID do formularza (chyba że jest to jedyny formularz na stronie, wtedy możesz użyć 'formularza' jako zapytania dom)

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

Wyjście wyglądałoby następująco:

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

Możesz również użyć obiektów FormData ; obiekt FormData pozwala na kompilację zestawu par klucz/wartość do wysłania za pomocą XMLHttpRequest. Jego głównym przeznaczeniem jest wysyłanie danych formularza, ale może być używany niezależnie od formularzy w celu przesyłania danych z kluczem.

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

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

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

Spowoduje dołączenie wszystkich pól formularza do obiektu JavaScript "res":

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

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

Możesz użyć tej funkcji Dla mieć obiekt lub JSON z formularza.

Do użycia:

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

Nie wszyscy jesteście w pełni poprawni. Nie możesz napisać:

formObj[input.name] = input.value;

Ponieważ w ten sposób jeśli masz listę multiselect - jej wartości zostaną nadpisane ostatnią, ponieważ jest ona przekazywana jako: "param1" : "value1", "param1" : "value2".

Więc poprawne podejście to:

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

Napisałem bibliotekę, aby rozwiązać ten problem: JSONForms . Przyjmuje formę, przechodzi przez każde wejście i buduje obiekt JSON, który można łatwo odczytać.

Powiedz, że masz następującą postać:

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

Przekazanie formularza do metody kodowania JSONForms zwróci następujący obiekt:

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

Oto demo z Twoim formularzem.

Napisałem funkcję, która zajmuje się wieloma checkboxami i wieloma selekcjami. W takich przypadkach zwraca tablicę.

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

Wyświetlanie pól elementu wejściowego formularza i pliku wejściowego, aby przesłać formularz bez odświeżania strony i pobrać wszystkie wartości z dołączonym plikiem tutaj jest

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

Naprawi problem:Couldn ' t work with multiselects.

Ta metoda powinna to zrobić. Serializuje dane formularza, a następnie konwertuje je na obiekt. Zajmuje się również grupami pól wyboru.

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

Oto Ładna waniliowa funkcja JS, którą napisałem, aby wyodrębnić dane formularza jako obiekt. Posiada również opcje do wstawiania dodatków do obiektu oraz do czyszczenia pól wejściowych formularza.

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

Oto przykład jego użycia z żądaniem post:

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

<form id="my-form">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name">
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" name="user_mail">
    </div>
    <div>
        <label for="msg">Message:</label>
        <textarea id="msg" name="user_message"></textarea>
    </div>
    <div>
        <label for="gender">Gender:</label>
        <select name="gender" id="gender">
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select>
    </div>
    <div>
        <label for="terms">Accept terms:</label>
        <input type="checkbox" id="terms" name="terms">
    </div>
    <div class="button">
        <button type="submit">Send your message</button>
    </div>
</form>

<script>
    document.getElementById('my-form')
            .addEventListener('submit', e => {
              e.preventDefault()
              let fields = e.target.querySelectorAll('input,textarea,select')
              let cbs = e.target.querySelectorAll('input[type=checkbox]')
              let values = {}
              fields.forEach(e => {
                values[e.name] = e.value
              })
              cbs.forEach(e => {
                values[e.name] = e.checked
              })
              console.log(values)
        })
</script>