如何在不提交的情况下获取所有表单的值

我的页面上有一个表单,并使用Javascript/JQuery动态地向表单添加控件.在某些时候,我需要将客户端表单中的所有值作为集合或查询字符串.我不想提交表单,因为我想将表单值以及我在客户端上的其他信息传递给后端WCF/Ajax服务方法.所以我试图找出如何捕获表单通常发送到服务器的同一类型集合中的所有值,如果表单实际提交的话.我怀疑有一种简单的方法可以捕获它,但我很难过.

在直接的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)列表,然后使用"&"作为分隔符将它们连接在一起.

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

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

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

或者使用直接jquery:

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

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

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

var formEl = document.forms.BookPackageForm;

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

var formData = new FormData(formEl);

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

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

谢谢克里斯.这就是我想要的.但是,请注意该方法是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 + "]");
});

您可以使用此简单循环来获取所有元素名称及其值.

var params = '';
for( var i=0; i

        
@SpoonMeiser @muerte否。这将获取每个元素的“ value”属性，而不管“ checked”属性的状态如何。您将获得每个复选框的checkboxname = valueattribute，以及每个无线电的radioname = valueattribute。如果将它们放入数组中，则后者甚至更糟，因为每个单选元素都会覆盖前一个元素，并且剩下array ['radioname'] = lastvalue属性。