Доступ к динамически созданным полям формы
 

Всем привет!
Начал изучать JavaScript, подскажите, как сделать.
Есть форма в которой поля добавляются динамически. Уникальным атрибутом этих полей является name. Он имеет вид - [Application][i][title], где i - число. Получается своеобразный массив. К этим полям и нужен доступ, чтобы потом с каждым из них можно было управлять с помощью JavaScript. Как это сделать (лучше, проще) ? Или ткните меня где про это можно почитать. Спасибо.

Nicson,
Ну Вам должен помочь Jquery.
Но в целом достаточно размыто Вы поставили задачу. Желательно бы код выложить, как у Вас все устроено и подробности. Надеюсь ссылка Вам поможет.

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

Корпоративный сайт, на котором работники добавляют заявки на нужные детали. Начальник потом видит эти заявки и обрабатывает. На странице добавления заявки есть форма добавления - деталей в заявке может быть сколько угодно, поэтому поля для ввода добавляются динамически. Нажимаешь на кнопку и поле добавилось. Все работает, но сейчас заявки заполняются "руками" работников и вот есть идея сделать, чтобы в одном поле работник вводил каталожный номер, а в другом появлялось название, чтобы не было ошибок ввода. Если форма статичная, то есть изначально прописана в коде - у меня все работает через ajax. Но когда делаю на этих динамических полях, тогда возникают проблемы с поиском элементов этих полей, чтобы передавать данные. Поэтому и появился этот вопрос - как можно получать доступ к динамическим полям формы. Сам сайт написан на CakePHP 2. Писал сам, поэтому если нужен еще какой то код - могу выложить или что то объяснить.

Если имена полей будут именно такими [Application][i][title], то сервер вообще ничего не получит, это ключи без имени.

Получить к динамически добавляемому элементу, это не конкретно. Если к примеру подразумевается назначение обработчика, то лучше делегирование в этом случае. Если же обратиться к нему, то можно и по имени, вот только возникает вопрос что же это за i такое, если просто порядковый номер, то его можно без вреда и выбросить, если это признак, пусть и временный, то опять смотря чего, можно ведь его и знать.

Вопрос слишком абстрактный.

Выложите текущий HTML код формы заполненный руками(без аяксов) на два или три наименования (пустые строки наименований можно не включать, если они идентичны по структуре заполненным)

Спасибо, за советы и помощь. Вроде получилось. Сделал так: заполняешь строку данными, нажимаешь кнопку добавить строку - предыдущая становиться readonly, а в новой все работает. Может конечно, криво, но работает. Как такой вариант в плане оптимизации и быстроты работы ?
Я недавно начал работать в Явой, поэтому так. Но изучение не прекращаю, а с набором опыта буду код улучшать. Еще было бы здорово, если бы посоветовали, что почитать, чтобы побыстрей вьехать в курс дела. Спасибо всем!

А если замечена ошибка в предыдущем и надо исправить? Вы не считаете нужным пояснять неизвестное, поэтому трудно судить о том правильно или нет делаете, но именование полей и описание задачи позволяют сказать - Нет.

Извиняюсь, это правда - упускаю такие вещи из виду. Так вот - если в предыдущей ошибка - эту строку можно только удалить и написать по новой. Начальство такой вариант вроде устраивает.

Это не правильно, вы изначально неправильно поступаете. Удалять предыдущее, чтобы удалить ошибку, это слишком. :)

Может все таки поясните что означают имена формы?

Это уникальное имя, по которому CakePHP "понимает" что это за поле и добавляет из него данные в базу. Это если проще.
Я бы выложил весь код формы в HTML, просто там он добавляет кучу всего и страница получается весьма большой.

А в чем не правильность того, чтобы удалить строку, если в ней ошибка ?
Попробую выложить сюда пару полей этой формы из вывода.

вместо <%= key %> underscore.js добавляет числа, чтобы поля были уникальными. Это делал по этой статье, которую теперь не могу найти. Может еще найдеться.

Nicson,
Ну это не то, чтобы неправильно, скорее, это выглядит как:
вам надо положить пару швов на руку, но лучше отрубить руку и новую на её место пришить. Как-то так)

Согласен, но по другому пока не знаю как это сделать. На первый вариант, думаю пойдет. Потом может разберусь и сделаю как надо

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

То что мы "работаем" с полем текущим в примере будет отражаться отображением его значения на странице.

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

То есть "работать" будет то поле, которое имеет фокус - запрос сервера за каталожным номером.

Вернуться для изменения в любое из полей тоже не проблема. Удалить поле, так же пожалуйста.

Отправка формы отобразит отправляемые данные, сервер при это получить элементы массива abc начиная с индекса 0.

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script> 
$(function() {
    $('#add').click(function() {
        $('#fields').append('<div><input name="abc[key][][field]"> <span id="del">Del</span></div>')
    });
    
    $('#fields').on('keyup', 'input', function() {
        $('#val').text(this.value)
    }).on('click', 'span', function() {
        $(this).parent().remove()
    });
    
    $('form').submit(function(e) {
        e.preventDefault();
        $('#val').text(JSON.stringify($(this).serializeArray()))
    })
});
</script>     
</head> 
<body>
<span id="add">Add</span> 
<form>
<div id="fields"></div>
<button>Send</button>
</form>
</body>
<div id="val"></div> 
</html>

То есть проблемы как таковой и нет собственно говоря, но с другой стороны много неясностей.


Еще раз - поле должно иметь имя и только затем ключи его, иначе сервер не примет таковых данных.


PS. data[Application][<%= key %>][num_app] - вот это другой разговор. Имя поля, это "data", а далее это ключи. Если key, это идентификатор (только в этом случае можно говорить об уникальности), которому значения полей будут добавлены, тогда да, это нужно, и это не просто число как вы писали. В противном случае это число указывать не обязательно.

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

Спасибо! Но это тогда надо переписывать все вручную. А все уже написано на CakePHP. Поэтому - за пример большущее спасибо, я его разберу в качестве примера для дальнейшего изучения. А потом может сделаю подобное на том что есть

Что именно?

В том смысле,что совсем отказывается от CakePHP и писать все в "чистую". А этого не хотелось бы

Я вам не предлагаю отказываться от движка, и код этого не предполагает. Вы не даете пояснений. Что такое есть <%= key %>?

В JS коде примера, собственно говоря, наплевать будет там номер или нет, если это просто номер.

Пример с чего начинается? Правильно, нет вообще полей. А если ваш движок по умолчан6ию пусть помещает в форму одно поле, а остальные добавляет пользователь, и надо нумеровать, ну так ведь не проблема считать вставки и удаления, и вставляя некий номер.

Другое дело, если <%= key %>, это уникальный идентификатор, то не проблема его сообщить клиенту, или получить из имени, так как он постоянен будет.

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

Чтобы весь форум лег? :)

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

Вы и без этого кода должны знать что это за число, вы же задачу ставите, код движка лишь решает ее. Косвенно понять это также не сложно, посмотрев результирующий html-код формы на странице.

Nicson,
Проще дать ссылку на страницу с примером формы для заполнения
И Скриншот заполненных Вами парой наименований и что там к ним прилагается