Получить доступ к "почти соседнему" элементу через target
Есть форма с такой структурой полей
<dl> <dt><label for="phone">Phone</label><span class="add-link" style="margin-left:213px" onclick="addField()">add</span></dt> <dd><input type="text" id="phone" class="long-input" name="phone" /></dd> <dt><label for="email">Email</label><span class="add-link" style="margin-left:219px" onclick="addField()">add</span></dt> <dd><input type="text" id="email" class="long-input" name="email" /></dd> </dl> <span> здесь - это ссылка-кнопочка при нажатии на к-рую будет добавляться еще одно поле ниже, т.е. я хочу добавлять еще один <dd>. Опыт в js совсем небольшой, поэтому не уверен как лучше это сделать. Появилась идея заюзать target, передавая в параметре event. Но в функцию попадет указатель на span, т.е. нужно вернутся на уровень выше, в dt. От него перейти к следующему соседу (dd), но не просто к следующему, а к последнему (вперед лепить нельзя, т.к. первое поле может уже быть заполнено), и после него добавить еще один dd. Можно ли такое замутить, и если можно то как? (На чистом js). p.s. Если лень писать код, дайте хотя бы методы к-рые мне потребуются. Спасибо. |
Цитата:
[ oElement = ] object.parentNode revvo, я не совсем понял... Ты к одному ДТ хочешь приляпать несколько ДД? Они же вроде парой ходят как крабы... Даже теперешнее их использование у тебя странно. Ну не похоже оно на "термины" и их "определения". :) |
Вроде это же не запрещено (несколько <dd> определений к одному <dt> термину). А что не запрещено, то разрешено, тем более браузеры отображают без проблем :)
А почему я выбрал этот способ, они блочные элементы, а у меня в этой форме сложная верстка. С блочными удобно работать и обертки не нужны. За ответ спасибо, буду копать. А как прилепить в нужное место dd? Если его просто тупо добавить к dl списку, то он в самый конец по идее пойдет. Можно ли сделать insert в нужное место? P.S. Еще идея возникла передавать в функцию id <dd> элемента, но если динамически потом добавлять их, то он будет первым из них, а добавлять надо в конец... |
Написал я скрипт, в принципе делает что надо
function addField(event) { var x = event.target.parentNode; //var l = x.getElementByTagName('label'); //тут подвисает var y = x.nextSibling; while (y.nodeName == "DD" || y.nodeType == 3) y = y.nextSibling; var e = document.createElement('dd'); e.innerHTML = '<input type="text" class="long-input" name="js-field" title="generated" />'; y.parentNode.insertBefore(e, y); } Но, захотел я получить текст из label, а тут облом. Не могу понять, почему-то подвисает в закомментированном месте. |
Добавьте красное
Цитата:
|
Цитата:
Цитата:
Цитата:
Альтернативный вариант разметки. <div> <div> <p><label for="phone">Phone</label><span class="add-link" style="margin-left:213px" onclick="addField()">add</span></p> <div> <input type="text" id="phone" class="long-input" name="phone" /> </div> </div> <div> <p><label for="email">Email</label><span class="add-link" style="margin-left:219px" onclick="addField()">add</span></p> <div> <input type="text" id="email" class="long-input" name="email" /> </div> </div> </div> В моём варианте место добавления обозначено абсолютно четко. |
Вот так правильно будет:
Цитата:
|
Цитата:
Кстати придумал этот способ верстки форм не я, я это вычитал у кого-то. Там было нескольких способов, я немного подумал, и выбрал этот :) А вообще проблему решили блоки как таковые, а то у меня до этого разъезжалось всё, кто куда, в каждом браузере по своему. И еще где-то вчера читал (перед выбором этого способа, я все же немного погуглил), что даже в W3C приведен пример использования dl списка не совсем по назначению, т.е. даже они ничего плохого в этом не видят. В предложенном вами способе тоже вижу плюс, дополнительная обертка для пары лейбел-инпут, к-рая больше упорядочивает (недостаток у dl - это общий родитель у всех). Но переделывать я уже не буду :) |
Цитата:
Цитата:
Цитата:
Цитата:
|
Цитата:
|
Часовой пояс GMT +3, время: 06:51. |