How can I get form data with JavaScript/jQuery?

2019-01-01 02:39发布

站内文章 / JavaScript

25 0

查无此人

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Is there a simple, one-line way to get the data of a form as it would be if it was to be submitted in the classic HTML-only way?

For example, 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>

Out:

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

Something like this is too simple, since it does not (correctly) include textareas, selects, radio buttons and checkboxes:

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

回答1:

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

demo

回答2:

Use $(\'form\').serializeArray(), which returns an array:

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

Other option is $(\'form\').serialize(), which returns a string:

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

Take a look at this jsfiddle demo

回答3:

Based on jQuery.serializeArray, returns key-value pairs.

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

回答4:

Updated answer for 2014: HTML5 FormData does this

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

You can then post formData exactly as it is - it contains all names and values used in the form.

回答5:

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

This is a nitpicky answer, but let me explain why this is a better solution:

We\'re properly handling a form submit rather than a button press. Some people like to push enter on fields. Some people use alternative input devices such as speech input or other accessibility devices. Handle the form submit and you correctly solve it for everyone.
We\'re digging into the form data for the actual form that was submitted. If you change your form selector later, you don\'t have to change the selectors for all the fields. Furthermore, you might have several forms with the same input names. No need to disambiguate with excessive IDs and what not, just track the inputs based on the form that was submitted. This also enables you to use a single event handler for multiple forms if that is appropriate for your situation.
The FormData interface is fairly new, but is well supported by browsers. It\'s a great way to build that data collection to get the real values of what\'s in the form. Without it, you\'re going to have to loop through all the elements (such as with form.elements) and figure out what\'s checked, what isn\'t, what the values are, etc. Totally possible if you need old browser support, but the FormData interface is simpler.
I\'m using ES6 here... not a requirement by any means, so change it back to be ES5 compatible if you need old browser support.

回答6:

use .serializeArray() to get the data in array format and then convert it into an object:

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

回答7:

Here\'s a really simple and short soluton that even doesn\'t require 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;

回答8:

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

回答9:

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

other than that, you might want to look at serialize();

回答10:

I use this:

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 Form

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

Get the Data

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

回答11:

Here is a working JavaScript only implementation which correctly handles checkboxes, radio buttons, and sliders (probably other input types as well, but I\'ve only tested these).

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

Working example:

    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:

If you\'re looking for a more complete implementation, then take a look at this section of the project I made this for. I\'ll update this question eventually with the complete solution I came up with, but maybe this will be helpful to someone.

回答12:

If you are using jQuery, here is a little function that will do what you are looking for.

First, add an ID to your form (unless it is the only form on the page, then you can just use \'form\' as the dom query)

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

The output would look like:

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

回答13:

You can also use the FormData Objects; The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data.

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

回答14:

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

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

回答15:

This will append all form fields to the JavaScript object \"res\":

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

回答16:

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

回答17:

you can use this function for have an object or a JSON from form.

for use it:

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

回答18:

I wrote a library to solve this very problem: JSONForms. It takes a form, goes through each input and builds a JSON object you can easily read.

Say you have the following form:

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

Passing the form to JSONForms\' encode method returns you the following object:

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

Here\'s demo with your form.

回答19:

I have included the answer to also give back the object required.

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

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

return model;
}

回答20:

I wrote a function that takes care of multiple checkboxes and multiple selects. In those cases it returns an array.

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

回答21:

showing form input element fields and input file to submit your form without page refresh and grab all values with file include in it here it is

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

on Submit button page will send ajax request to your php file.

$(\'#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 !\');

                }

     });

}))

回答22:

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

It will fix issue:couldn\'t work with multiselects.

回答23:

You are all not fully correct. You cannot write:

formObj[input.name] = input.value;

Because this way if you have multiselect list - its values will be overwritten with the last one, since it\'s transmitted as: \"param1\" : \"value1\", \"param1\" : \"value2\".

So, correct approach is:

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

回答24:

This method should do it. It serializes the form data and then converts them to an object. Takes care of groups of checkboxes as well.

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

回答25:

Here is a nice vanilla JS function I wrote to extract form data as an object. It also has options for inserting additions into the object, and for clearing the form input fields.

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

Here is an example of its use with a post request:

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

标签： javascript jquery html-form