У меня есть форма на моей странице, и я динамически добавляю элементы управления в форму с помощью Javascript/JQuery. В какой-то момент мне нужно получить все значения в форме на стороне клиента в виде коллекции или строки запроса. Я не хочу отправлять форму, потому что хочу передать значения формы вместе с другой информацией, которую я имею на клиенте, для внутреннего сервисного метода WCF/Ajax. Поэтому я пытаюсь понять, как захватить все значения в одном типе коллекции, которые форма обычно отправляет на сервер, если форма была фактически отправлена. Я подозреваю, что есть простой способ захватить это, но я в тупике.
Как я могу получить все значения форм, которые будут отправлены без отправки
Ответ 1
Плагин формы jquery предлагает простой способ перебора элементов формы и размещения их в строке запроса. Это также может быть полезно для всего, что вам нужно делать с этими значениями.
var queryString = $('#myFormId').formSerialize();
От http://malsup.com/jquery/form
Или используя прямой jquery:
var queryString = $('#myFormId').serialize();
Ответ 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("&");
Короче говоря, это создает список пар ключ-значение (имя = значение), который затем объединяется вместе с помощью "&" как разделитель.
Ответ 3
Спасибо Крису. Это то, что я искал. Однако обратите внимание, что метод 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 + "]");
});
Ответ 4
Если ваш тег формы похож на
<form action="" method="post" id="BookPackageForm">
Затем выберем элемент формы, используя объект forms.
var formEl = document.forms.BookPackageForm;
Получить данные из формы с помощью объектов FormData.
var formData = new FormData(formEl);
Получить значение полей с помощью объекта данных формы.
var name = formData.get('name');
Ответ 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, ...
Ответ 6
Спасибо за ваши идеи. Я создал следующее для моего использования
Демонстрация доступна на 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();
Ответ 7
Вы можете получить форму с помощью document.getElementById и вернуть массив elements [].
Вы также можете получить каждое поле формы и получить его значение с помощью функции document.getElementById и передать в поле идентификатор.
Ответ 8
В зависимости от типа типов ввода, которые вы используете в своей форме, вы должны уметь их захватить с помощью стандартных выражений 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
Ответ 9
Для тех, кто не использует jQuery, ниже приведена моя функция 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>
Ответ 10
Я думаю, что следующий код позаботится только о TextFields в форме:
var str = $('#formId').serialize();
Чтобы добавить другие типы ввода, мы можем использовать:
$("input[type='checkbox'], input[type='radio']").on( "click", functionToSerialize );
$("select").on( "change", functionToSerialize );