Импорт определенных значений по id
Всем привет товарищи. Помогите пожалуйста.
Как можно сделать импорт определенных value с полей любого типа с выводом по id например уже в теге span: http://jsfiddle.net/hw4vx3cy/16 Просто в данном случае происходит последовательный вывод. А нужно сделать чтобы порядок можно было контролировать с помощью id или класса. С меня + и отзыв. :) |
Anushki,
name="tarif" id="a" name="pack" id="a" Цитата:
|
Цитата:
|
ну или как проверить id поля инпута, селекта.. с id элемента, в который будет импортироваться значение
|
Anushki,
не понимаю |
Цитата:
|
Этот вариант: http://jsfiddle.net/hw4vx3cy/16 предложил мне Рони.
так вот вариант идеальный! Но при импорте происходят ошибки. Если не заполнены предыдущие поля то значения выводятся не в том месте. И поэтому нужно выводить не в порядке очереди а по <span id=""> например. У меня пошаговая форма в которой люди заполняют различные поля и примерно на 3-4 шаге мне нужен импорт для того чтобы формировать договор и показывать его. Но не все импортируемые поля выводятся в договоре некоторые нужно вывести вне договора. И поэтому последовательный импорт не подходит. Нужно как то сравнивать id поля input или selecta с id span'a например. Или каким либо образом обозначить каждый span так чтобы он выводил только определенное поле. |
Хотите ID, тогда дайте их SPAN, они каждый в единственном экземпляре, а элементов формы не обязательно по одному. При этом ID могут быть равны именам полей формы, связать не проблема. Кроме прочего - проверяйте флажки, это же на одноименная группа радиокнопок имеющих одно значение.
|
Цитата:
Закрепить к каждому input и select полю свой span. И выводить его хоть где и в любом порядке. Не обязательно в том же что и в форме. |
Свяжите так:
<input type="text" name="name" placeholder="Ваше ФИО"><br><br> <input type="text" name="phone" placeholder="Телефон"> ..... <p>Заказчик: <span id="name"></span></p> <p>Телефон: <span id="phone"></span></p> ..... В обработчике выполните такой код:
$.each(this.elements, function(i, e) {
console.log($('#'+e.name))
});
Видны в консоли ваши SPAN? Какая проблема? Проблема возникнет с флажками, если как выше говорилось, а значит их именовать надо как например pack[], а в связывании убирать из имени. Если связать по имени класса, то по крайней мере этого бы не требовалось. Чем имя класса хуже ID? |
Цитата:
|
Anushki,
привязка по классу
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$("form").on("input change", function() {
var data = $(this).serializeArray(), obj ={};
$.each(data, function(i, el) {
var cls = "."+el.name, val = el.value;
if(/\[\]/.test(cls)) {
cls = cls.slice(0,-2);
obj[cls] !== undefined ? obj[cls].push(val) : (obj[cls] = [val]);
val = obj[cls].join(",");
}
$(cls).html(val);
});
})
});
</script>
</head>
<body> <p>Заказчик: <span class="name"></span></p>
<p>Заказчик: <span class="name"></span></p>
<p>Заказчик: <span class="name"></span></p>
<div class="content"><h2>Договор</h2>
<p>Заказчик: <span class="name"></span></p>
<p>Телефон: <span class="phone"></span></p>
<p>Заказал: <span class="category"></span></p>
<p>Тариф: <span class="tarif"></span></p>
<p>Пакет: <span class="pack"></span></p></div>
<form action="" method="post">
<input type="text" name="name" placeholder="Ваше ФИО"><br><br>
<input type="text" name="phone" placeholder="Телефон"><br><br>
<select name="category">
<option selected disabled>Тип сайта</option>
<option>Визитка</option>
<option>Лендинг</option>
</select><br><br>
<input type="radio" name="tarif" value="Тариф 1"> Тариф 1
<input type="radio" name="tarif" value="Тариф 2"> Тариф 2<br><br>
<input type="checkbox" name="pack[]" value="Пакет 1"> Пакет
<input type="checkbox" name="pack[]" value="Пакет 2"> Пакет
</form>
<h2>Договор</h2>
<p>Заказчик: <span class="name"></span></p>
<p>Телефон: <span class="phone"></span></p>
<p>Заказал: <span class="category"></span></p>
<p>Тариф: <span class="tarif"></span></p>
<p>Пакет: <span class="pack"></span></p>
</body>
</html>
|
Цитата:
$(function() {
$("form").on("input", function() {
var o = $('span').empty();
$.each($(this).serializeArray(), function() {
var a = o.filter('#'+this.name.replace(/\[\]/,'')), v = a.text();
a.text(v + (v ? ', ' : '') + this.value); //флажков может быть несколько
});
})
});
|
Цитата:
|
Загрузил на http://jsfiddle.net/4gZAT/1388 идеальный вариант от РОНИ ! Спасибо ещё раз.
|
Цитата:
Разберитесь, два кода делают одно и тоже. :) |
| Часовой пояс GMT +3, время: 00:34. |