Работа с раскрывающимся списком

[laimas]

и значения этой формы заказа могли вставляться, например, в поле textarea c атрибутом form="id"

Нет, не так. Атрибут полей form связывает их с формой по идентификатору формы, а не с textarea.

вне тегов form есть инпуты с атрибутом form и форма с id, но которая должна получать значения инпутов

Это как раз и обеспечивается этим тегом. Здесь два поля вне формы, но тегом form они связываются с ней. В форме есть только кнопка отправки, которая для примера имеет также имя и значение. Отправление формы собирает в массив все ее поля. Как видите в массиве будут три элемента.

<form id="as" onsubmit="alert(JSON.stringify([].map.call(this.elements, function(e) {
        return e.name + '=' + e.value 
}))); return false">
<button name="sender" value="1">GO</button>
</form>
<input form="as" name="n1" value="2" />
<input form="as" name="n2" value="3" />

[ФедорН]

Получается, пользователь не видит уже свой заказ, когда открывается форма заказа и атрибут form вставить данные (input values из div) в одно из полей формы возможности не дает.

Тогда, как понимаю, можно сделать функцию, где создать массив .map с данными из div_roword input
Преобразовать их в текст: return $(elem).text();
и вывести в поле teaxarea в форме заказа, присвоив ему id="orderItems":
$("#orderItems").text(arr);

[laimas]

Получается, пользователь не видит уже свой заказ

Почему не видит? То что он сам же набирает формой, это что тогда? Форма только регистрирует заказ на сервере, ну или заказчик получает почту с данными заказа (как это обычно и делается). Зачем teaxarea?

Вы либо огород городите, либо .... Я уже говорил, так как вы принимаете заказы от клиента, это мягко говоря действовать "через попу". Но если уж так поступать, то элементам полей калькулятора не нужны даже и имена, связывать их с какой-то формой вообще не нужно, так как отправлять их на сервер то зачем?

Ну появилась у вас форма, что там в нее ввели типа личных данных, и в ней же есть teaxarea, в которую по событию отправки формы, получая выбранные значение и расчеты из полей калькулятора, и помещайте их. Это и отправляйте на сервер, если вас это удовлетворяет.

[ФедорН]

"через попу".

Мягко говоря, да

Ну появилась у вас форма, что там в нее ввели типа личных данных, и в ней же есть teaxarea, в которую по событию отправки формы, получая выбранные значение и расчеты из полей калькулятора, и помещайте их. Это и отправляйте на сервер, если вас это удовлетворяет.

Вариант подходит, только можно данные в textarea вставлять не по события отправки, а по событию открытия формы (пользователь сразу видит).
Правильно ли я написал, что нужна функция?

[laimas]

можно данные в textarea вставлять не по события отправки

Можно, но это нужно либо в плагине делать, либо в событии вызывающем эту форму, проверять появилась ли она, и если да, заполняйте на здоровье.

[ФедорН]

laimas, добавил функцию в плагин, все работает, но немного не так.

$(function () {
	var orderInfo = '';
	$(".roword input, .roword select").each(function()
	{
		orderInfo += ' x '  + this.value;

	});
	$("#orderItems").html(orderInfo);
});

А именно, необходимо вывести ни value select, а наименование выбранной опции (в моем случае цвет). Не могу найти, как сделать. Попытки реализовать через что-то типа select.attr(), input.attr() успехом не увенчались - все перестает работать.

И еще одна проблема. Если пользователь заполняет одну строку калькулятора, то она вставляется с помощью вышеприведенной функции в поле textarea формы заказа, а если пользователь добавил несколько строк, то всегда добавляется минус одна, по какой-то причине удаляется последняя строка. При вызове попап-формы заказа прямо видно, как последняя срока исчезает. Не подскажите, где копать.

[laimas]

А именно, необходимо вывести ни value select, а наименование выбранной опции

Во-первых нужно проверять тогда, что это список, а не поле ввода, вы же коллекцию обоих наборов просматриваете.

if(this.tagName=='SELECT') $(this).text() это и будет текст выбранной опции. К тому же тогда нужны тексты и для других значений, а если так паковать в строку, то в textarea все будет в одну строку. Лучше

var orderInfo = []; и помещая в этот массив одну строку из калькулятора, в textarea записать массив как orderInfo.join('\n').

[ФедорН]

Во-первых нужно проверять тогда, что это список, а не поле ввода, вы же коллекцию обоих наборов просматриваете.

if(this.tagName=='SELECT') $(this).text() это и будет текст выбранной опции. К тому же тогда нужны тексты и для других значений, а если так паковать в строку, то в textarea все будет в одну строку. Лучше

var orderInfo = [];
и помещая в этот массив одну строку из калькулятора, в textarea записать массив как orderInfo.join('\n').

сам смысл понятен, с реализацией не все получается.

$(function () {
	var orderInfo = [];
	$(".roword select, .roword input").map(function()
	{
		if(this.tagName=='SELECT')
			orderInfo += $(this).find('option:selected').text();
		else
	 	orderInfo += ' | '  + this.value;

	});

	$("#orderItems").html(orderInfo);
});

пытался сделать по-разному, но это единственный рабочий вариант.
Вы сказали, что всю (одну) строку брать из калькулятора в массив, как понял, это:

$(".roword").map(function()

результат нулевой.

также у меня не работает orderInfo.join('\n')
как понимаю я, если записывать в textarea, то это должно быть:
$("#orderItems").html(orderInfo.join('\n'));

Возможно, не работает из-за некорректной реализации массива.

[laimas]

Возможно, не работает из-за некорректной реализации массива

Нет вообще никакой реализации, это самодеятельность. Нужно формировать строку из значений, а затем ее вставлять методом push() в массив. А чтобы проще было понимать, обходили бы не всю коллекцию элементов, а блоки формы содержащие элементы, получая уже в них коллекцию из четырех элементов, в которой они следуют по порядку под индексами от 0 до 3.

Вам действительно так все пофигу и что там придет от клиента не важно? Наверное же надо добавлять в вывод только тогда, когда пользователем что-то выбрано. Я показывал код, в котором расчет будет только тогда, когда выбрано все необходимое. А значит проверяя значение поля результата расчета, можно решать нужно ли добавлять. Следовательно проверив не пуст ли массив orderInfo, можно будет решать нужна ли отправка формы вообще, или же...? Бог с ним, пусть будет некая доля пофигизма, но не настолько же.

$(function () { ... это готовность DOM, если ваш код выполняется значит форма присутствует на странице, она просто не отображается. Поэтому это не добавление "кода в плагин" как вы писали. Переделать это нужно. Лучше так - в обработчике вызывающем эту форму и формировать информацию о заказе, и заблокировав отправку формы (если конечно пофигизм не 100%), снимая блокировку если orderInfo не пуст. Что там за кнопка вызывает форму я не в курсе, ищите, разбирайтесь, а помещение информацию в форму, это:

var orderInfo = $.map($('.roword'), function(e) {
    var o = $(e).find('select,input'); //получить все элементы
    if(o.eq(3).val()) return o.eq(0).children(':selected').text() + ' ' + o.eq(1).val() + 'x' + o.eq(2).val() + ' ' + o.eq(3).val() //если был выбор 
});

if(orderInfo.length) $('textarea').val(orderInfo.join('\n'))

[ФедорН]

laimas, благодарю, все работает. Почему удалялась последняя строка калькулятора, о чем упоминал ранее, тоже разобрался, исправил.

Насчет пофигизма... конечно же, мне не все равно, я обычно разбираюсь в вещах и делаю, как положено. Но случай с программированием - совсем другое - его нельзя освоить за день, неделю, месяц... Тут уже решает приоритет. Протестировать актуальность продукта важнее, чем сделать очень корректный сайт, потратив время, поняв, что он никому не нужен. Если есть посещаемость, то косяки можно отслеживать через вебвизор и допиливать что-то.

Над тем, что пользователь в калькулятор может ввести не все данные, мой код все равно сработает, я просто не задумался.

На данный момент я просто не способен отличить самодеятельность от реализации (по крайней мере, когда я пытаюсь что-то писать сам) в виду отсутствия теоретических и практических знаний. По запросу решения одной задачи находится много примеров в гугле, которые пишутся также людьми с разным уровнем знаний и опыта. И если некоторый код я еще хоть как-то начал разбирать и понимать, то насколько он профессионально написан, увы, нет.

Быть откровенным - изначально я пришел сюда, чтобы решить вышеописанные задачи и сильно не заморачиваться. Но вы так интересно все поясняете, что вчера взялся читать "Выразительный JavaScript". Есть желание разобраться, но нужно подкреплять теорию именно задачами реальными, которые нужны тебе. Лично понял для себя это так.
Мне, новичку, сложно провести корреляцию между задачей "Шахматная доска" и тем, где и в какой реальной ситуации это может пригодиться. На реальной же практике все яснее.
У меня и раньше были вялые попытки освоить язык, теперь я понял, как проще можно это делать.