Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.12.2015, 08:07
Аспирант
Отправить личное сообщение для dpts Посмотреть профиль Найти все сообщения от dpts
 
Регистрация: 12.05.2015
Сообщений: 99

Размножение полей формы
День добрый.
Есть разметка
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <meta http-equiv="Content-Language" content="ru">
</head>
<body>
<form id="tasks" action="taskssave.asp">
<table style="width:70%;border-collapse:collapse;">
    <tr>
        <th>Тип задачи</th>
        <th>Норма времени</th>
        <th>Объект привязки</th>
    </tr>
    <tr>
        <td><center><input type="text" name="task_name" required="required"></center></td>
        <td>
            <center>
            <select name="task_len">
                <option value="5">5 мин.</option>
                <option value="10">10 мин.</option>
                <option value="15">15 мин.</option>
                <option value="20">20 мин.</option>
                <option value="25">25 мин.</option>
                <option value="30">30 мин.</option>
                <option value="35">35 мин.</option>
                <option value="40">40 мин.</option>
                <option value="45">45 мин.</option>
                <option value="50">50 мин.</option>
                <option value="55">55 мин.</option>
                <option value="60">60 мин.</option>
                <option value="90">90 мин.</option>
                <option value="120">120 мин.</option>
                <option value="180">180 мин.</option>
            </select>
            </center>
        </td>
        <td>
            <center>
            <select name="task_obj">
                <option value="1">Звонки</option>
                <option value="2">Контакты</option>
                <option value="3">Контрагенты</option>
            </select>
            </center>
        </td>
    </tr>
    <tr>
        <td colspan="3"><br>
            <center><input type="submit" name="Сохранить"></center>
        </td>
    </tr>
</table>
</form>
</body>
</html>

При этом оба раскрывающихся списка генерируются динамически (из БД) VBS-ом.
Нужно размножать поля формы, чтобы не вводить задачи по одной.
Например по принципу, как здесьhttp://ajaxs.ru/lesson/jq/121-razmno..._na_sajte.html
Пробовали сами этот скрипт поправить, но не сумели.
Ответить с цитированием
  #2 (permalink)  
Старый 29.12.2015, 08:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,092

dpts,
какие имена будут у добавленных, кнопки удалить, добавить, теги thead и tbody где, js или jquery?
Ответить с цитированием
  #3 (permalink)  
Старый 29.12.2015, 09:08
Аспирант
Отправить личное сообщение для dpts Посмотреть профиль Найти все сообщения от dpts
 
Регистрация: 12.05.2015
Сообщений: 99

Сообщение от рони Посмотреть сообщение
dpts,
какие имена будут у добавленных, кнопки удалить, добавить, теги thead и tbody где, js или jquery?
- имена - пусть остаются именно такимиже, - то есть если всего 5 tr-ов с полями - то обработчику передается по 5 штук каждого имени (разбирать vbs-ом проще)
- кнопки - да надо.
- thead и tbody - а обязательно?
- js
Ответить с цитированием
  #4 (permalink)  
Старый 29.12.2015, 09:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,092

Сообщение от dpts
- кнопки - да надо.
Ответить с цитированием
  #5 (permalink)  
Старый 29.12.2015, 09:44
Аспирант
Отправить личное сообщение для dpts Посмотреть профиль Найти все сообщения от dpts
 
Регистрация: 12.05.2015
Сообщений: 99

А если так:
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <meta http-equiv="Content-Language" content="ru">
</head>
<body>
<form id="tasks" action="taskssave.asp">
<table style="width:70%;border-collapse:collapse;">
    <tr>
        <th>Тип задачи</th>
        <th>Норма времени</th>
        <th>Объект привязки</th>
		<th>&nbsp;</th>
    </tr>
    <tr>
        <td><center><input type="text" name="task_name" required="required"></center></td>
        <td>
            <center>
            <select name="task_len">
                <option value="5">5 мин.</option>
                <option value="10">10 мин.</option>
                <option value="15">15 мин.</option>
                <option value="20">20 мин.</option>
                <option value="25">25 мин.</option>
                <option value="30">30 мин.</option>
                <option value="35">35 мин.</option>
                <option value="40">40 мин.</option>
                <option value="45">45 мин.</option>
                <option value="50">50 мин.</option>
                <option value="55">55 мин.</option>
                <option value="60">60 мин.</option>
                <option value="90">90 мин.</option>
                <option value="120">120 мин.</option>
                <option value="180">180 мин.</option>
            </select>
            </center>
        </td>
        <td>
            <center>
            <select name="task_obj">
                <option value="1">Звонки</option>
                <option value="2">Контакты</option>
                <option value="3">Контрагенты</option>
            </select>
            </center>
        </td>
		<td width="40px">Х<!-- это кнопка для удалить tr и поля в нем--></td>
    </tr>
    <tr>
		<td colspan="2" align="left"><br>
            +<!-- это кнопка для добавить tr с полями в нем-->
        </td>
        <td colspan="2" align="right"><br>
            <input type="submit" name="Сохранить">
        </td>
    </tr>
</table>
</form>
</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 29.12.2015, 09:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,092

добавление строки в таблицу
dpts,
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <meta http-equiv="Content-Language" content="ru">
  <style type="text/css">
   tbody tr:first-child td:last-child{
      visibility: hidden;
   }

  </style>
</head>
<body>
<form id="tasks" action="taskssave.asp">
<table style="width:70%;border-collapse:collapse;">
  <thead>
    <tr>
        <th>Тип задачи</th>
        <th>Норма времени</th>
        <th>Объект привязки</th>
    </tr>
    </thead>
 	<tbody>
    <tr>
        <td><center><input type="text" name="task_name" required="required"></center></td>
        <td>
            <center>
            <select name="task_len">
                <option value="5">5 мин.</option>
                <option value="10">10 мин.</option>
                <option value="15">15 мин.</option>
                <option value="20">20 мин.</option>
                <option value="25">25 мин.</option>
                <option value="30">30 мин.</option>
                <option value="35">35 мин.</option>
                <option value="40">40 мин.</option>
                <option value="45">45 мин.</option>
                <option value="50">50 мин.</option>
                <option value="55">55 мин.</option>
                <option value="60">60 мин.</option>
                <option value="90">90 мин.</option>
                <option value="120">120 мин.</option>
                <option value="180">180 мин.</option>
            </select>
            </center>
        </td>
        <td>
            <center>
            <select name="task_obj">
                <option value="1">Звонки</option>
                <option value="2">Контакты</option>
                <option value="3">Контрагенты</option>
            </select>
            </center>
        </td>
        <td style="width: 60px;"><img border="0" alt="del" src="http://ajaxs.ru/demo/jq/add_input/delete.png" class="delete"></td>
    </tr>
    <tr>
        <td colspan="4"><br>
            <center><input type="button" value="Добавить поле" id="add" onclick="return add_new();">
            <input type="submit" name="Сохранить"></center>
        </td>
    </tr>
  	</tbody>
</table>
</form>
<script>
window.addEventListener("DOMContentLoaded", function() {
    var a = document.querySelector("#tasks"),
        b = a.querySelector("tbody"),
        d = b.querySelector("tr").cloneNode(!0);
    a.querySelector("#add").addEventListener("click", function() {
        var c = d.cloneNode(!0);
        c.addEventListener("click", function() {
            var a = event.target.classList;
            a && a.contains("delete") && b.removeChild(c)
        });
        b.insertBefore(c, b.lastElementChild)
    })
});
</script>
</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 29.12.2015, 09:58
Аспирант
Отправить личное сообщение для dpts Посмотреть профиль Найти все сообщения от dpts
 
Регистрация: 12.05.2015
Сообщений: 99

Работает, отлично, спасибо большое
Ответить с цитированием
  #8 (permalink)  
Старый 30.12.2015, 07:32
Аспирант
Отправить личное сообщение для dpts Посмотреть профиль Найти все сообщения от dpts
 
Регистрация: 12.05.2015
Сообщений: 99

когда прикручиваю к страничке перестает работать
1. Суть в том, что на странице кроме это еще вагон таблиц. В том числе и таблица с полями формы живет в DIVе, который тоже живет в таблице, и когда прикрутил
<style type="text/css">
   tbody tr:first-child td:last-child{
      visibility: hidden;
   }

  </style>

"все пропало".
2. Временно убрал стили, поменял
<img border="0" alt="del" src="http://ajaxs.ru/demo/jq/add_input/delete.png" class="delete">

на
<span class="delete"><ul class="icons icons--stroke--header"><li class="iconsmall" style="top:3px;left:20px;"><svg viewbox="0 0 9 9"><use xlink:href="#close" transform="translate(0, 0) scale(.35)"></svg></li></ul></span>

получили вот такого вида форму поле загрузки:

на форме Плюс в кружочке работает, Галка в кружочке(отправка формы ) - работает.
над плюсом появилось текстовое поле с крестиком в кружочке сразу после загрузки, крестик к этому полю работает - удаляет его, а вот крестик справа от строки с тремя полями - не работает...
код после правок выглядит так:
<form id="tasks" action="add.asp">
                        <center>
                            <table id="table_container" class="setup">
                                <thead>
                                 <tr>
                                        <th class="setup" style="width: 45%">Тип задачи</th>
                                        <th class="setup">Норма времени</th>
                                        <th class="setup">Привязать объект</th>
                                        <th class="setup-del-row">&nbsp;</th>
                                 </tr>
                                </thead>
                                <tbody>
                                 <tr>
                                        <td class="setup"><center><input size="60" class="big" type="text" name="task_name" required="required"></center></td>
                                        <td class="setup">
                                            <center>
                                            <select name="task_len">
                                                <option value="5">5 мин.</option>
                                                <option value="10">10 мин.</option>
                                                <option value="15">15 мин.</option>
                                                <option value="20">20 мин.</option>
                                                <option value="25">25 мин.</option>
                                                <option value="30">30 мин.</option>
                                                <option value="35">35 мин.</option>
                                                <option value="40">40 мин.</option>
                                                <option value="45">45 мин.</option>
                                                <option value="50">50 мин.</option>
                                                <option value="55">55 мин.</option>
                                                <option value="60">60 мин.</option>
                                                <option value="90">90 мин.</option>
                                                <option value="120">120 мин.</option>
                                                <option value="180">180 мин.</option>
                                            </select>
                                            </center>
                                        </td>
                                        <td class="setup">
                                            <center>
                                            <select name="task_obj">
                                                <option value="1">Звонки</option>
                                                <option value="2">Контакты</option>
                                                <option value="3">Контрагенты</option>
                                            </select>
                                            </center>
                                        </td>
                                        <td class="setup-del-row"><span class="delete"><ul class="icons icons--stroke--header"><li class="iconsmall" style="top:3px;left:20px;"><svg viewbox="0 0 9 9"><use xlink:href="#close" transform="translate(0, 0) scale(.35)"></svg></li></ul></span></td>
                                 </tr>
                                </tbody>
                                    <tr>
                                    <td colspan="2" align="left">
                                    <span id="add" onclick="return add_new();">
                                                    <ul class="icons icons--stroke">
                										<li class="icon">
                                                            <a>
                												<svg viewbox="0 0 9 9">
                													<use xlink:href="#add" transform="translate(0, 0) scale(.35)">
                												</svg>
                											</a>
                										</li>
                									</ul>
                                    </span>
                                </td>

                                <td align="right">
                                    <button class="for-svg" type="submit">
                                                    <ul class="icons icons--stroke">
                										<li class="icon" style="top:-19px;left:-11px;">
                												<svg viewbox="0 0 9 9">
                													<use xlink:href="#save" transform="translate(0, 0) scale(.35)">
                												</svg>
                										</li>
                									</ul>
                                    </button>

                                </td>
                                    </tr>

                            </table>
                    </form>
                            <script>
                            window.addEventListener("DOMContentLoaded", function() {
                                var a = document.querySelector("#tasks"),
                                    b = a.querySelector("tbody"),
                                    d = b.querySelector("tr").cloneNode(!0);
                                a.querySelector("#add").addEventListener("click", function() {
                                    var c = d.cloneNode(!0);
                                    c.addEventListener("click", function() {
                                        var a = event.target.classList;
                                        a && a.contains("delete") && b.removeChild(c)
                                    });
                                    b.insertBefore(c, b.lastElementChild)
                                })
                            });
                            </script>

Последний раз редактировалось dpts, 30.12.2015 в 07:37.
Ответить с цитированием
  #9 (permalink)  
Старый 30.12.2015, 07:36
Аспирант
Отправить личное сообщение для dpts Посмотреть профиль Найти все сообщения от dpts
 
Регистрация: 12.05.2015
Сообщений: 99

https://yadi.sk/i/r5EwEW8Vmb8Di

вот так выглядит форма
Ответить с цитированием
  #10 (permalink)  
Старый 30.12.2015, 07:58
Аспирант
Отправить личное сообщение для dpts Посмотреть профиль Найти все сообщения от dpts
 
Регистрация: 12.05.2015
Сообщений: 99

С артефактом в виде лишнего поля с крестиком разобрался
Как починить удаление?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать проверку всех полей формы при нажатии кнопки sss2019 Общие вопросы Javascript 2 04.01.2014 00:00
проверка формы на изменение полей, кроме одного! cmygeHm ExtJS 14 13.04.2011 17:27
Проверка полей отправляемой формы. denisOgr jQuery 6 18.10.2010 18:40
Собрать значения всех полей формы vvsh Events/DOM/Window 3 08.11.2009 23:35
проверка полей формы!!!! DENAT Общие вопросы Javascript 0 05.06.2008 21:14