Я хочу перебрать элементы HTML-формы и сохранить значения полей <input> в объекте. Однако следующий код не работает:
function config() {
$("#frmMain").children().map(function() {
var child = $("this");
if (child.is(":checkbox"))
this[child.attr("name")] = child.attr("checked");
if (child.is(":radio, checked"))
this[child.attr("name")] = child.val();
if (child.is(":text"))
this[child.attr("name")] = child.val();
return null;
});
Не делает и следующее (вдохновленное ответом jobscry):
function config() {
$("#frmMain").children().each(function() {
var child = $("this");
alert(child.length);
if (child.is(":checkbox")) {
this[child.attr("name")] = child.attr("checked");
}
if (child.is(":radio, checked"))
this[child.attr("name")] = child.val();
if (child.is(":text"))
this[child.attr("name")] = child.val();
});
}
Предупреждение всегда показывает, что child.length == 0
. Выбор элементов вручную работает:
>>> $("#frmMain").children() Object length=42 >>> $("#frmMain").children().filter(":checkbox") Object length=3
Любые подсказки о том, как правильно выполнить цикл?
jQuery имеет отличную функцию для циклического перебора набора элементов: .каждый()
$('#formId').children().each(
function(){
//access to form element via $(this)
}
);
У меня не работает, см. Мою редакцию вопроса. Дальнейшие идеи?
Форма, скорее всего, будет иметь абзац или что-то подобное в качестве своего дочернего элемента. Вам нужно убедиться, что вы выбираете только элементы ввода.
«children ()» получает все дочерние элементы DOM в форме, а не элементы.
не думайте, что вам нужны цитаты по этому поводу:
var child = $("this");
пытаться:
var child = $(this);
В зависимости от того, для чего вам нужен каждый ребенок (если вы хотите опубликовать его где-нибудь через AJAX), вы можете просто сделать ...
$("#formID").serialize()
Он автоматически создает для вас строку со всеми значениями.
Что касается перебора объектов, вы также можете это сделать.
$.each($("input, select, textarea"), function(i,v) {
var theTag = v.tagName;
var theElement = $(v);
var theValue = theElement.val();
});
Раньше я использовал следующее:
var my_form = $('#form-id');
var data = {};
$('input:not([type=checkbox]), input[type=checkbox]:selected, select, textarea', my_form).each(
function() {
var name = $(this).attr('name');
var val = $(this).val();
if (!data.hasOwnProperty(name)) {
data[name] = new Array;
}
data[name].push(val);
}
);
Это просто записывается из памяти, поэтому может содержать ошибки, но при этом должен получиться объект с именем data
, содержащий значения для всех ваших входных данных.
Обратите внимание, что вы должны обрабатывать флажки особым образом, чтобы избежать получения значений неотмеченных флажков. Вероятно, то же самое и с радиовходами.
Также обратите внимание на использование массивов для хранения значений, так как для одного имени входа у вас могут быть значения из нескольких входов (в частности, флажки).
Вы проголосовали за это? $ (this) не поиск, вы обертываете существующий объект с помощью объекта jQuery. Было бы немного эффективнее сделать это только один раз, но разница будет незначительной.
Из многих предложений, которые я видел, это самый простой в реализации. Спасибо!
если вы хотите использовать каждую функцию, она должна выглядеть так:
$('#formId').children().each(
function(){
//access to form element via $(this)
}
);
Просто замените закрывающую фигурную скобку закрытой скобкой. Спасибо, что указали на это, Джобсскри, ты сэкономил мне время.
Почему вы разместили это как ответ, когда говорите, что просто отвечаете на jobscry
? Это тот же код, который он опубликовал. Вот для чего нужны комментарии.
для меня все это не сработало. Для меня сработало кое-что действительно простое:
$("#formID input[type=text]").each(function() {
alert($(this).val());
});
Это самый простой способ пройти через форму, имея доступ только к ее элементам. Внутри каждой функции вы можете проверить и построить все, что захотите. При создании объектов обратите внимание, что вы захотите объявить его вне каждой функции.
РЕДАКТИРОВАТЬ JSFIDDLE
Ниже будет работать
$('form[name=formName]').find('input, textarea, select').each(function() {
alert($(this).attr('name'));
});
$('#formId input, select, textarea')
вернет все элементы input
в форме вместе с каждое поле выбора и текстовое поле на странице.
На самом деле он так себя ведет ... Использование этого точного формата в JSFiddle фактически привело только к отображению только select и textarea. Добавление запятой перед словом «ввод» приводит к тому, что вы говорите.
Действительно? Причина jsfiddle.net/UDD7E/3 показывает именно то, о чем я говорил. Оба поля выбора и оба текстовых поля красные, хотя одно из них находится за пределами формы.
Интересно, у меня разные результаты. Может быть, это потому, что я запустил его по нажатию кнопки. Очень странный. Я бы бросил скрипку, но это уже не имеет значения.
Только что заметил правку. Новый код должен работать лучше, поскольку вы захватываете форму и запрашиваете ее (что ограничивает запрос так, как не делал другой код). Приведенный выше код все еще не работает, и вы, возможно, захотите от него избавиться, но, по крайней мере, у вас есть кое-что, что теперь работает. :)
Как он до сих пор сломан? Дж / нед
Он все еще не работает, потому что запятые разделяют селекторы. form[name=formname] input, select, textarea
означает «все input
в форме formname
, плюс все select
, плюс все textarea
». Вы могли бы сказать $('input, select, textarea', 'form[name=formname]')
и заставить его работать; Я забываю, позволяет ли jQuery это делать или заставляет использовать элемент или объект jQuery в качестве контекста.
О, вы все еще смотрите на верхние старые вещи ... Это правка внизу, которая работает и находится в JSFiddle
Да .. вот что я говорил. Нижняя часть работает. Приведенный выше код, вероятно, следует удалить, так как он неверен.
Ваш поток только что сэкономил мне 20 минут построчного ввода полей для нескольких форм -_- ;. +1.