Привіт. Пробуємо зробити форму з можливістю динамічного додавання полів. Поговоримо трохи про динамічних полях, а точніше для чого вони взагалі потрібні. Це ситуація коли від користувача потрібно отримати невідома кількість значень через звичайну html – форму, з набором инпутов, чекбоксов і т. п. Для цих цілей зручно використовувати форму з можливістю паралельного додавання значень. Реалізувати це справа зручно за допомогою javascript, що ми і зробимо.
Форму робимо такого виду:
Отже, що ж особливого в цій формі.
Тегу table присвоїли id=”v_table”, для зручності звертання до рядків таблиці, всередині яких набір елементів форми.
За замовчуванням у нас буде один рядок з формами введення, після чого, кнопкою «Додати поле» ми викликаємо js функцію add_value_f(), саме вона нам і буде додавати додаткові рядки.
Оскільки планується, що введення може бути множинного значення, звертаємо на імена полів вводу форми, вони повинні бути у вигляді масиву, відповідно перший рядок у нас має індекс 0.
Вийти така форма:
Далі в заголовку або в тілі сторінки додаємо блок js код:
var d = document;
var last_id = 0;
function add_value_f() {
// знаходимо потрібну таблицю
var tbody = d.getElementById(‘v_table’).getElementsByTagName(‘tbody’)[0];
// створюємо рядок таблиці і додаємо її
var row = d.createElement(“tr”);
tbody.appendChild(row);
// створюємо клітинки в рядку вышесозданной
var td1 = d.createElement(“td”);
var td2 = d.createElement(“td”);
var td3 = d.createElement(“td”);
var td4 = d.createElement(“td”);
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
last_id = last_id + 1;
// додаємо форми введення в комірки
td1.innerHTML = “;
td2.innerHTML = “;
td3.innerHTML = “;
td4.innerHTML = “;
}
Власне це і є функція add_value_f(), яка буде додавати нам на формі нові рядки. Перевіряємо форму:
Рядки додаються справно, імена полів у коді задаються як треба. Власне все.
Тепер непогано б перевірити, як приходять змінні до нас на сервер з цієї форми. Для цього заповнюємо форму приблизно так:
У підсумку, після відправки форми, ми отримуємо на сервері такі змінні:
Array
(
[xml_id] => Array
(
[0] => zn1
[1] => zn2
[2] => zn3
)
[values] => Array
(
[0] => Значення 1
[1] => Значення 2
[2] => Значення 3
)
[val_sort] => Array
(
[0] => 500
[1] => 500
[2] => 500
)
[default] => 1
[send] => Зберегти
)
Як бачимо, змінні та їх значення успішно прийшли на сервер. Зрозуміло, форму можна змінювати для своїх потреб. Тут можна подивитися робочий приклад.
Додав: htmaker, 04.07.2013 р.
(Ще не оцінили)
Завантаження…
Діліться з друзями:
См. також:
Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO
Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript
Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека
Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript
Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript
Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript
Список вибору на JQuery
Рубрика: Html, CSS, Javascript
Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript
Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript
