Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Обработать несколько input (https://javascript.ru/forum/events/72076-obrabotat-neskolko-input.html)

Dbnfkbq 06.01.2018 00:51

Обработать несколько 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>

Вот, как выглядит моя форма:


Dbnfkbq 06.01.2018 00:57

Возможно пора идти спать, всегда обращаешься с проблемой, и находишь некоторое решение. Получил значение input с помощью val(). Но опять же, как мне это все сложить и отправить? Сделать как-то массив?

laimas 06.01.2018 10:23

Не понятно чего делается, но уж точно незачем "должна быть возможность дублировать целый блок с n-кол-вом форм внутри". Поэтапное заполнение форм, это означает, что сервер принял форму, обработал, если ОК, то далее. Результаты каждого этапа сервер хранит, финиш возможен только в том случае, если каждый этап истина.

Dbnfkbq 06.01.2018 16:44

Да, сейчас объясню еще раз. Пример как на hh, у меня есть n-устройств на фабрике, то есть необходимо добавлять n-блоков(описание 1 устройства - это 1 блок). Конечно я не собираюсь 100 блоков добавлять, будет ограничение на 5 блоков, допустим. Если есть варианты, как сделать это лучше, я и написал сюда, ибо сам с такими задачами не сталкивался

laimas 06.01.2018 17:10

Вы пишите о "очень длинная форма для заполнения, которую в итоге мне необходимо будет отправить в БД", а блоками ли это называть, гектарами ли, дело вашего вкуса.

Отвечайте сами себе на вопрос:

1) Есть N форм для поэтапного оформление данных для сервера. В этом случае каждая форма отправляется отдельно (тут уже по логике ясно - зачем же иметь кучи форм, а не одну, если потом кучу собирать в одну), со всеми вытекающими ....

2) Есть одна форма, но ее логические части отображаются для пользователя поэтапно, по условию заполнения предыдущей. Естественно что форма одна и отправляется.

Что у вас или чего вам надо - 1 или 2?

Dbnfkbq 06.01.2018 18:30

Цитата:

Сообщение от laimas (Сообщение 474390)
Вы пишите о "очень длинная форма для заполнения, которую в итоге мне необходимо будет отправить в БД", а блоками ли это называть, гектарами ли, дело вашего вкуса.

Отвечайте сами себе на вопрос:

1) Есть N форм для поэтапного оформление данных для сервера. В этом случае каждая форма отправляется отдельно (тут уже по логике ясно - зачем же иметь кучи форм, а не одну, если потом кучу собирать в одну), со всеми вытекающими ....

2) Есть одна форма, но ее логические части отображаются для пользователя поэтапно, по условию заполнения предыдущей. Естественно что форма одна и отправляется.

Что у вас или чего вам надо - 1 или 2?

Да, извините, у меня одна форма, которая заполняется поэтапно, а на 3 этапе у меня идет описание оборудования. Это описание, при необходимости(если оборудований больше 1) необходимо дублировать и тоже в конце отправить.

laimas 06.01.2018 18:51

Цитата:

Сообщение от Dbnfkbq
у меня одна форма, которая заполняется поэтапно

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

Dbnfkbq 06.01.2018 20:31

Цитата:

Сообщение от laimas (Сообщение 474394)
А вот по представленному коду этого сказать нельзя, по крайней мере в коде их две. А если еще и дублирование, то вообще не понять чего же вы делаете.

Это не мой код, я писал, что это примеры, которые я нашел по своей проблеме. По факту у меня такая структура:
<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

laimas 06.01.2018 20:53

А конкретнее, что есть устройство и т.д.?

Если надо, не проблема - проверили что-то, больше 1, клонировали <div class="devices"> и добавили.

На своей структуре покажите конкретно что есть что и что надо сделать.

Dbnfkbq 06.01.2018 23:44

Цитата:

Сообщение от laimas (Сообщение 474399)
А конкретнее, что есть устройство и т.д.?

Если надо, не проблема - проверили что-то, больше 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>



Так, окей, клонирую я его. Потом в итоге заполненную форму в виде массива в БД отправлять? Или как с ним работать?


Часовой пояс GMT +3, время: 16:47.