如何获取将在不提交的情况下提交的所有表单值[重复]

Posted 2023-02-22

【中文标题】如何获取将在不提交的情况下提交的所有表单值[重复]

【英文标题】：How can I get all a form's values that would be submitted without submitting [duplicate]

【发布时间】：2010-10-09 22:49:09

【问题描述】：

我的页面上有一个表单，我正在使用 javascript/JQuery 向表单动态添加控件。在某些时候，我需要在客户端获取表单中的所有值作为集合或查询字符串。我不想提交表单，因为我想将表单值与客户端上的其他信息一起传递给后端 WCF/Ajax 服务方法。因此，我试图弄清楚如果实际提交了表单，如何捕获表单通常会发送到服务器的同一类型集合中的所有值。我怀疑有一种简单的方法可以捕捉到这一点，但我很难过。

【参考方案1】：

如果你的表单标签是这样的

<form action="" method="post" id="BookPackageForm">

然后使用表单对象获取表单元素。

var formEl = document.forms.BookPackageForm;

使用 FormData 对象从表单中获取数据。

var formData = new FormData(formEl);

通过表单数据对象获取字段的值。

var name = formData.get('name');

【讨论】：

请注意 formData.get() 没有完整的浏览器支持：caniuse.com/mdn-api_formdata_get

在撰写本文时，它已获得来自 https::caniuse.com/mdn-api_formdata_get 的 94.55% 的支持。所以我认为那很好。顺便问一下，谁还在为 Internet Explorer 开发？

【参考方案2】：

在直接的 Javascript 中，您可以执行类似于以下的操作：

var kvpairs = [];
var form = // get the form somehow
for ( var i = 0; i < form.elements.length; i++ ) 
   var e = form.elements[i];
   kvpairs.push(encodeURIComponent(e.name) + "=" + encodeURIComponent(e.value));

var queryString = kvpairs.join("&");

简而言之，这会创建一个键值对 (name=value) 列表，然后使用“&”作为分隔符将其连接在一起。

【讨论】：

@DamirOlejar 如果你在提交函数中，evt.target 应该可以工作

@DamirOlejar 如果你有<button onclick='save(this)'>，那么在你的function save(who) 中你可以有var form = who.form

警告：e.value 总是返回 on 复选框！解决方法：插入var value = e.getAttribute("type") == "checkbox" ? e.checked : e.value 并使用value 而不是e.value。

注意：“e.value 总是返回复选框！”不，它没有！只需在 html 中或通过 js 设置复选框的 value 属性即可。例如：

Accessing form controls

【参考方案3】：

jquery 表单插件提供了一种简单的方法来遍历表单元素并将它们放入查询字符串中。对于您需要对这些值执行的任何其他操作，它也可能很有用。

var queryString = $('#myFormId').formSerialize();

来自http://malsup.com/jquery/form

或者直接使用 jquery：

var queryString = $('#myFormId').serialize();

【讨论】：

这里的问题是，使用复选框时，数据根本不显示，我宁愿将其设置为false。

for textarea 没有得到正确的值

【参考方案4】：

谢谢克里斯。这就是我一直在寻找的。但是，请注意该方法是 serialize()。还有另一种方法 serializeArray() 看起来非常有用，我可以使用它。感谢您为我指明正确的方向。

var queryString = $('#frmAdvancedSearch').serialize();
alert(queryString);

var fieldValuePairs = $('#frmAdvancedSearch').serializeArray();
$.each(fieldValuePairs, function(index, fieldValuePair) 
    alert("Item " + index + " is [" + fieldValuePair.name + "," + fieldValuePair.value + "]");
);

【参考方案5】：

您可以使用这个简单的循环来获取所有元素名称及其值。

var params = '';
for( var i=0; i<document.FormName.elements.length; i++ )

   var fieldName = document.FormName.elements[i].name;
   var fieldValue = document.FormName.elements[i].value;

   // use the fields, put them in a array, etc.

   // or, add them to a key-value pair strings, 
   // as in regular POST

   params += fieldName + '=' + fieldValue + '&';


// send the 'params' variable to web service, GET request, ...

【讨论】：

这是否适用于复选框、单选按钮和多选？

AFAIK - 是的，因为复选框和单选按钮具有“名称”和“值”属性/属性。唯一我不确定的是 Listbox，因为它有一个带有 Option 元素的子集合。

第一行必须是 var params ='';避免在最终字符串中出现“未定义”

@SpoonMeiser @muerte No. 这会获取每个元素的 value 属性，而不管 checked 属性的状态如何。您将获得每个复选框的 checkboxname=valueattribute 和每个收音机的 radioname=valueattribute。如果将它们放入一个数组中，后者会更加糟糕，因为每个单选元素都会覆盖前一个元素，而您只剩下 array['radioname']=lastvalueattribute。

【参考方案6】：

对于那些不使用 jQuery 的人，下面是我的 vanilla JavaScript 函数，用于创建可以像任何普通对象一样访问的表单数据对象，这与 new FormData(form) 不同。

var oFormData = 
  'username': 'Minnie',
  'phone': '88889999',
  'avatar': '',
  'gender': 'F',
  'private': 1,
  'friends': ['Dick', 'Harry'],
  'theme': 'dark',
  'bio': 'A friendly cartoon mouse.'
;

function isObject(arg) 
  return Object.prototype.toString.call(arg)==='[object Object]';


function formDataToObject(elForm) 
  if (!elForm instanceof Element) return;
  var fields = elForm.querySelectorAll('input, select, textarea'),
    o = ;
  for (var i=0, imax=fields.length; i<imax; ++i) 
    var field = fields[i],
      sKey = field.name || field.id;
    if (field.type==='button' || field.type==='image' || field.type==='submit' || !sKey) continue;
    switch (field.type) 
      case 'checkbox':
        o[sKey] = +field.checked;
        break;
      case 'radio':
        if (o[sKey]===undefined) o[sKey] = '';
        if (field.checked) o[sKey] = field.value;
        break;
      case 'select-multiple':
        var a = [];
        for (var j=0, jmax=field.options.length; j<jmax; ++j) 
          if (field.options[j].selected) a.push(field.options[j].value);
        
        o[sKey] = a;
        break;
      default:
        o[sKey] = field.value;
    
  
  alert('Form data:\n\n' + JSON.stringify(o, null, 2));
  return o;


function populateForm(o) 
  if (!isObject(o)) return;
  for (var i in o) 
    var el = document.getElementById(i) || document.querySelector('[name=' + i + ']');
    if (el.type==='radio') el = document.querySelectorAll('[name=' + i + ']');
    switch (typeof o[i]) 
      case 'number':
        el.checked = o[i];
        break;
      case 'object':
        if (el.options && o[i] instanceof Array) 
          for (var j=0, jmax=el.options.length; j<jmax; ++j) 
            if (o[i].indexOf(el.options[j].value)>-1) el.options[j].selected = true;
          
        
        break;
      default:
        if (el instanceof NodeList) 
          for (var j=0, jmax=el.length; j<jmax; ++j) 
            if (el[j].value===o[i]) el[j].checked = true;
          
         else 
          el.value = o[i];
        
    
  

form 
  border: 1px solid #000;


tr 
  vertical-align: top;

<form id="profile" action="formdata.html" method="get">
  <table>
    <tr>
      <td><label for="username">Username:</label></td>
      <td><input type="text" id="username" name="username" value="Tom"></td>
    </tr>
    <tr>
      <td><label for="phone">Phone:</label></td>
      <td><input type="number" id="phone" name="phone" value="7672676"></td>
    </tr>
    <tr>
      <td><label for="avatar">Avatar:</label></td>
      <td><input type="file" id="avatar" name="avatar"></td>
    </tr>
    <tr>
      <td><label>Gender:</label></td>
      <td>
        <input type="radio" id="gender-m" name="gender" value="M"> <label for="gender-m">Male</label><br>
        <input type="radio" id="gender-f" name="gender" value="F"> <label for="gender-f">Female</label>
      </td>
    </tr>
    <tr>
      <td><label for="private">Private:</label></td>
      <td><input type="checkbox" id="private" name="private"></td>
    </tr>
    <tr>
      <td><label for="friends">Friends:</label></td>
      <td>
        <select id="friends" name="friends" size="2" multiple>
          <option>Dick</option>
          <option>Harry</option>
        </select>
      </td>
    </tr>
    <tr>
      <td><label for="theme">Theme:</label></td>
      <td>
        <select id="theme" name="theme">
          <option value="">-- Select --</option>
          <option value="dark">Dark</option>
          <option value="light">Light</option>
        </select>
      </td>
    </tr>
    <tr>
      <td><label for="bio">Bio:</label></td>
      <td><textarea id="bio" name="bio"></textarea></td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="submit" value="Submit">
        <button>Cancel</button>
      </td>
    </tr>
  </table>
</form>
<p>
  <button onclick="formDataToObject(document.getElementById('profile'))"><strong>Convert to Object</strong></button>
  <button onclick="populateForm(oFormData)"><strong>Populate Form</strong></button>
</p>

您也可以在这支笔中玩转它：http://codepen.io/thdoan/pen/EyawvR

更新：我还添加了一个函数来使用formDataToObject() 返回的对象填充表单。

【讨论】：

在所有这些答案中，这似乎对我来说是最好的。谢谢

【参考方案7】：

感谢您的想法。我创建了以下内容供我使用

可在http://mikaelz.host.sk/helpers/input_steal.html获取演示

function collectInputs() 
    var forms = parent.document.getElementsByTagName("form");
    for (var i = 0;i < forms.length;i++) 
        forms[i].addEventListener('submit', function() 
            var data = [],
                subforms = parent.document.getElementsByTagName("form");

            for (x = 0 ; x < subforms.length; x++) 
                var elements = subforms[x].elements;
                for (e = 0; e < elements.length; e++) 
                    if (elements[e].name.length) 
                        data.push(elements[e].name + "=" + elements[e].value);
                    
                
            
            console.log(data.join('&'));
            // attachForm(data.join('&));
        , false);
    

window.onload = collectInputs();

【讨论】：

感谢这对我有很大帮助并且效果很好！

【参考方案8】：

您可以使用 document.getElementById 获取表单并返回 elements[] 数组。

Here is an example.

您还可以使用 document.getElementById 函数并传入字段的 id 来获取表单的每个字段并获取其值。

【讨论】：

链接失效了...

【参考方案9】：

我认为以下代码将只处理表单中的 TextField：

var str = $('#formId').serialize();

要添加我们可以使用的其他类型的输入类型：

$("input[type='checkbox'], input[type='radio']").on( "click", functionToSerialize );
$("select").on( "change", functionToSerialize );

【参考方案10】：

根据您在表单上使用的输入类型，您应该能够使用标准 jQuery 表达式来获取它们。

例子：

// change forms[0] to the form you're trying to collect elements from...  or remove it, if you need all of them
var input_elements = $("input, textarea", document.forms[0]);

查看他们网站上的 jQuery 表达式文档了解更多信息：http://docs.jquery.com/Core/jQuery#expressioncontext