Обработать несколько input
Здравствуйте, новичок, сразу предупреждаю :)
Есть очень длинная форма для заполнения, которую в итоге мне необходимо будет отправить в БД. Форму я реализовал пошаговыми блоками, сначала заполняется 4 поля, нажимается Далее, их там же и проверяю, потом следующие и тд. В 3-м блоке должна быть возможность дублировать целый блок с n-кол-вом форм внутри (пока не реализовал, тоже буду разбираться...). Так вот, в итоге у меня получится неопределенное кол-во input, которые я не смогу перебрать по id(очень большой и не красивый код). В интернете нашел парочку примеров перебора нескольких input, но работать у меня они не хотят, поэтому прошу помощи :) Если заодно и поможете с добавлением блока повторного (сложность я вижу только в том, как ему имя уникальное присвоить потом), то буду вдвойне благодарен. Вот примеры, которые я нашел: <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> $(function() { var o = $('#price').find('input[name^="fact"]').keyup(function() { var m = 0; this.value = this.value.replace(/\D/, ''); for(var i=0, k=o.length; i<k; i++) m += o[i].value * 1; $('#total').text(m) }) }); </script> </head> <body> <form id="price"> <input name="fact_price[25]" /> <input name="fact_price[123]" /> <input name="fact_price[46]" /> <input type="submit" /> </form> <span id="total"></span> </body> </html> И еще один, который работает по нажатию кнопки test, но как получить значения и собрать их в один список или что-то подобное, чтобы потом отправить, я не понимаю <script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script> <form method="post" name="form03" action="" > <input type="hidden" name="status" value="0" > Логин*<br /> <input type="text" name="login" required="required" > Пароль*<br /> <input type="password" name="password" required="required" > Email*<br /> <input type="text" name="email" required="required" > <input type="submit" name="go_callback_form03" value="Отправить" > </form> <input type="button" onclick="Test()" value="Test"> <script type="text/javascript"> function Test() { $("form[name='form03']").find("input,select").not('[type="submit"]').each(function() { alert($(this).attr('type')) }); } </script> Вот, как выглядит моя форма: |
Возможно пора идти спать, всегда обращаешься с проблемой, и находишь некоторое решение. Получил значение input с помощью val(). Но опять же, как мне это все сложить и отправить? Сделать как-то массив?
|
Не понятно чего делается, но уж точно незачем "должна быть возможность дублировать целый блок с n-кол-вом форм внутри". Поэтапное заполнение форм, это означает, что сервер принял форму, обработал, если ОК, то далее. Результаты каждого этапа сервер хранит, финиш возможен только в том случае, если каждый этап истина.
|
Да, сейчас объясню еще раз. Пример как на hh, у меня есть n-устройств на фабрике, то есть необходимо добавлять n-блоков(описание 1 устройства - это 1 блок). Конечно я не собираюсь 100 блоков добавлять, будет ограничение на 5 блоков, допустим. Если есть варианты, как сделать это лучше, я и написал сюда, ибо сам с такими задачами не сталкивался
|
Вы пишите о "очень длинная форма для заполнения, которую в итоге мне необходимо будет отправить в БД", а блоками ли это называть, гектарами ли, дело вашего вкуса.
Отвечайте сами себе на вопрос: 1) Есть N форм для поэтапного оформление данных для сервера. В этом случае каждая форма отправляется отдельно (тут уже по логике ясно - зачем же иметь кучи форм, а не одну, если потом кучу собирать в одну), со всеми вытекающими .... 2) Есть одна форма, но ее логические части отображаются для пользователя поэтапно, по условию заполнения предыдущей. Естественно что форма одна и отправляется. Что у вас или чего вам надо - 1 или 2? |
Цитата:
|
Цитата:
|
Цитата:
<div class="container"> <div class="header"> .... </div> <form action="#" role="form" method="post"> <div class="content"> <div id="first_step"> ... </div> <div id="second_step"> ... </div> <div id="third_step"> <div class="devices"> .....input, select </div> </div> </div> </form> </div> Вот в 3-м шаге мне необходимо класс decices еще раз вывести, если устройств больше 1 |
А конкретнее, что есть устройство и т.д.?
Если надо, не проблема - проверили что-то, больше 1, клонировали <div class="devices"> и добавили. На своей структуре покажите конкретно что есть что и что надо сделать. |
Цитата:
<div id="third_step"> <h1>Данные приборов</h1> <div class="form"> <div class="devices"> <div class="form-group"> <label for="connect_with">Подключение от:</label> <input type="text" class="form-control" id="connect_with" placeholder="" required> </div> <div class="form-group"> <label for="place_set">Место установки:</label> <input type="text" class="form-control" id="place_set" placeholder="Место установки"> </div> <div class="row"> <div class="col-md-4"> <span>Приборы учета</span> <div class="form-group"> <label for="type_device">Тип:</label> <select class="form-control" id="type_device"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label for="class_tochnost">Класс точности атив/реактив. энергии:</label> <input type="text" class="form-control" id="class_tochnost" placeholder="Класс точности" required> </div> </div> </div> </div> </div> </div> Так, окей, клонирую я его. Потом в итоге заполненную форму в виде массива в БД отправлять? Или как с ним работать? |
Цитата:
Собственно вам кроме показанной структуры описывающей прибор нужна еще и кнопка "Добавить", по щелчку на которой клонировать первый элемент ".devices" (надо полагать, что хотя бы один прибор в форме должен быть), найти в клонированном список и поля ввода, сбросив их значения, после чего клонированное добавить в форму. Но, поля формы не имеющие имен на сервер преданы не будут, а у вас ни одно поле не имеет имени, хотя идентификаторы ненужные имеют все. Идентификатор является уникальным значением, а при клонировании он будет дублироваться. Поэтому все идентификаторы выбросить. Как именовать поля формы зависит от того, как они будут разбираться на сервере, то есть какой на сервере язык программирования используется. К примеру в РНР есть возможность самостоятельно ковырять сырые данные формы. Но проще получить уже готовое из массивов $_GET/$_POST, в которые РНР сам поместит данные пришедшей формы. При клонировании полей формы будут клонированы и их имена, а это будет означать, что в массив будут поступать одни и те же ключи. Так как в массиве не может быть дубликатов ключей, то РНР будет перезаписывать данные одноименных ключей. В итоге в массиве останутся значения последних одноименных полей формы. Чтобы этого не произошло поля формы можно именовать как элементы массива. Например список Тип так: <select class="form-control" name="type_device[]"> Поле класса точности <input type="text" class="form-control" name="class_tochnost[]" placeholder="Класс точности" required> и т.п. Если форму отправить методом POST, то в массиве $_POST под ключами type_device и class_tochnost будут индексные массивы значений этих полей с количеством равным добавленных в форму полей. Как примечание: type_device и при этом class_tochnost, это как жаргон гопника на вечеринке деятелей искусства. ;) Что касается сохранения массива в базе, то не каждая база может хранить в себе массив как структуру. Самый дешевый вариант, как бесплатный, практически на всех хостах имеющийся, это MySQL, у которой нет типа Array, и записать в себя массив она не может. Но по большому счету этого и не требуется в данном случае. Кроме этого, форму содержащую помимо элементов описывающих множество устройств, которые кому-то как-то принадлежат, и эти "хозяева" также оперируют в форме, никак нельзя впихнуть в одну sql-таблицу. Если есть вопрос "Потом в итоге заполненную форму в виде массива в БД отправлять? Или как с ним работать?" значит у вас вообще ничего нет, либо вы так далеки от этого, что ... А ведь приложение нужно начинать с проектирование БД, ибо она как матка в улье, скрипты же, это рабочие пчелы ее обслуживающие, а формы, это трутни ее оплодотворяющие. У вас получается, что матки нет, но есть трутни. :) |
Хорошо, спасибо. Все замечания учту и исправлю.
С именами да, понимаю, оправдание, что полей много, а воображение и память англ слов заканчивалась хоть и ужасное, но есть :) При исправлении id на name все учту. По поводу БД, вы, конечно, правы. Не отрицаю, что далек от этого, с БД мне еще не приходилось работать (точнее связывать с БД что-либо), но есть задача разобраться в этом. Исправлю все замечания, попытаюсь красиво реализовать клонирование, составлю БД, а потом буду обращаться сюда снова :help: |
Цитата:
|
Получилось реализовать, как хотел. Спасибо.
Получилось так: function class_clone(c_clone) { if (c_clone == 1) $(".device_num").text("Прибор №1"); else { for (var i = 0; i < c_clone-1; i++) $(".devices").clone().addClass("newElement").appendTo("#third_step .form"); } } Добавляю новый класс, так как если копировать придется 3 раза, будет копироваться класс с уже одной копией |
Зачем список для выбора, если надо добавить, добавили, надо еще один, добавили, а нужно удалить добавленное, тоже не проблема.
|
Цитата:
|
Цитата:
|
Зачем в файл и каким образом? Я писал каким образом поля формы можно именовать, чтобы оперировать ими на сервере. Что у вас делается я не знаю.
|
Цитата:
|
|
|
Часовой пояс GMT +3, время: 05:26. |