Работа с раскрывающимся списком
Добрый день.
Создан раскрывающийся список средствами JS:
var CheckColor = function myPrice() {
var x = document.createElement("SELECT");
x.setAttribute("id", "mySelect");
document.body.appendChild(x);
var z = document.createElement("option");
z.setAttribute("color", "green");
var t = document.createTextNode("Зеленый");
z.appendChild(t);
document.getElementById("mySelect").appendChild(z);
var z = document.createElement("option");
z.setAttribute("color", "red");
var t = document.createTextNode("Красный");
z.appendChild(t);
document.getElementById("mySelect").appendChild(z);
var z = document.createElement("option");
z.setAttribute("color", "blue");
var t = document.createTextNode("Синий");
z.appendChild(t);
document.getElementById("mySelect").appendChild(z);
}
Далее будет функция, которая считает стоимость в зависимости от введенной площади, исходя из цены 1кв.м. Но стоимость 1 кв.м. разная, зависит от выбранного цвета. Как можно обратиться к атрибуту с цветом из другой функции - направьте, пожалуйста. |
ZMA,
а создать нормальный option никак? |
рони, опции созданы теперь отдельно.
Но в коде что-то не так. Предполагается, что пользователь вводит 2 значения: высота и ширина. Считается автоматом, без клавиши submit. Также хотелось бы добавить доп. функцию: при вводе пользователем размера площадью <= 0,4 кв.м. к coefficient автоматом прибавляется 10%. Как понимаю, через через дополнительный if, куда вставить, подскажите. Кто может, проверьте, помогите, пожалуйста.
var options = [
{
value: 'red',
coefficient: 1,
text: 'красный'
},
{
value: 'green',
coefficient: 1.2,
text: 'зеленый'
},
{
value: 'blue',
coefficient: 2.5,
text: 'синий'
},
];
var output = $('#output');
function createOption(obj) {
var option = document.createElement('option');
var text = document.createTextNode(obj.text);
option.appendChild(text);
option.value = obj.value;
option.dataset.coefficient = obj.coefficient;
return option;
}
function createSelect(obj) {
var select = document.createElement('select');
select.id = 'mySelect';
obj.forEach(function(option) {
select.appendChild(createOption(option));
});
document.body.appendChild(select);
}
function calculate(height, width, coefficient) {
return height * width * coefficient;
}
createSelect(options);
$('#height, #width, #coefficient').on('keyup', function(){
var height = $('#height').val() * 1;
var width = $('#width').val() * 1;
var select = document.getElementById('mySelect');
var coefficient = select.options[select.selectedIndex].dataset.coefficient;
if(!isNaN(height) && !isNaN(width)){
output.html('Цена: ' + calculate(height * width* coefficient).toFixed(2) + ' руб.');
} else {
output.html('Не верный формат!');
}
});
<form action="" id="form">
<input type="text" id="height">
<input type="text" id="width">
<ul id="output"></ul>
</form>
|
калькулятор площади
ZMA,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var options = [
{
value: 1,
text: 'красный'
},
{
value: 1.2,
text: 'зеленый'
},
{
value: 2.5,
text: 'синий'
}
];
function createOption(obj) {
return new Option(obj.text, obj.value)
}
function createSelect(obj) {
var select = document.createElement("select");
select.id = "mySelect";
obj.forEach(function(option) {
select.appendChild(createOption(option))
});
return form.insertBefore(select, output)
}
function calculate() {
var h = +height.value || 0,
w = +width.value || 0,
c = +select.value;
h < 0 && (h = 0);
w < 0 && (w = 0);
h = h * w;
h <= .4 && (c *= 1.1);
h *= c;
output.innerHTML = h.toFixed(2)
}
var form = document.querySelector("#form"),
output = document.querySelector("#output"),
width = document.querySelector("#width"),
height = document.querySelector("#height"),
select = createSelect(options);
form.addEventListener("input", calculate);
form.addEventListener("change", calculate);
});
</script>
</head>
<body>
<form action="" id="form" >
<input type="text" id="height">
<input type="text" id="width">
<p id="output"></p>
</form>
</body>
</html>
|
рони, спасибо огромнейшее.
|
рони, можно еще вопрос.
Пытаюсь добавить, чтобы при вводе числа меньше min/max, автоматом происходила замена на min/max число. Причем на w и h min и max разные. добавляю replace var h= +height.value.replace(/\D/g,'')||0; , if'ы <>, onblur/onchange в input, но безрезультатно. |
ZMA,
Вот же у вас проверка на min h < 0 && (h = 0); w < 0 && (w = 0); Поставьте вместо нулей нужные значения min Аналогично и по max. Ну и исправить в инпутах height.value = h.toString(); width.value = w.toString(); |
Dilettante_Pro, к сожалению, это ограничивает только расчет.
Т.е., если вы установите max 200, а значение будет введено 305, то посчитается как 200, но значение пользователь так и будет видеть 305. Хотелось бы, чтобы 305 менялось на 200 (установленный max) автоматически. |
h < 10 && (h = 10); w < 20 && (w = 20); h > 200 && (h = 200); w > 250 && (w = 250); height.value = h.toString(); width.value = w.toString(); Только обработчик на input лучше убрать - не даст ввести изменения в случае ошибки |
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var options = [
{
value: 1,
text: 'красный'
},
{
value: 1.2,
text: 'зеленый'
},
{
value: 2.5,
text: 'синий'
}
];
function createOption(obj) {
return new Option(obj.text, obj.value)
}
function createSelect(obj) {
var select = document.createElement("select");
select.id = "mySelect";
obj.forEach(function(option) {
select.appendChild(createOption(option))
});
return form.insertBefore(select, output)
}
function calculate() {
var h = +height.value || 0,
w = +width.value || 0,
c = +select.value;
h < 10 && (h = 10);
w < 20 && (w = 20);
h > 200 && (h = 200);
w > 250 && (w = 250);
height.value = h.toString();
width.value = w.toString();
h = h * w;
h <= 400 && (c *= 1.1);
h *= c;
output.innerHTML = h.toFixed(2)
}
var form = document.querySelector("#form"),
output = document.querySelector("#output"),
width = document.querySelector("#width"),
height = document.querySelector("#height"),
select = createSelect(options);
// form.addEventListener("input", calculate);
form.addEventListener("change", calculate);
});
</script>
</head>
<body>
<form action="" id="form" >
<input type="text" id="height">
<input type="text" id="width">
<p id="output"></p>
</form>
</body>
</html>
|
Dilettante_Pro, благодарю. Я сильно все усложнял :)
|
--
|
--
|
привет.
У меня очень похожая ситуация. этот скрипт тоже подойдёт,но на элементы в том числе селект, нужно навешивать стили и т.п,а в js я ноль с плюсом. если есть возможность поделитесь как переделать,чтобы select был не в скрипте, а в form вместе с input и output. Заранее выражаю благодарность |
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
function calculate() {
var h = +height.value || 0,
w = +width.value || 0,
c = +select.value;
h < 10 && (h = 10);
w < 20 && (w = 20);
h > 200 && (h = 200);
w > 250 && (w = 250);
height.value = h.toString();
width.value = w.toString();
h = h * w;
h <= 400 && (c *= 1.1);
h *= c;
output.innerHTML = h.toFixed(2)
}
var form = document.querySelector("#form"),
output = document.querySelector("#output"),
width = document.querySelector("#width"),
height = document.querySelector("#height"),
select = document.querySelector("#mySelect");
form.addEventListener("change", calculate);
});
</script>
</head>
<body>
<form action="" id="form" >
<input type="text" id="height">
<input type="text" id="width">
<select id="mySelect">
<option value="1"/>красный</option>
<option value="1.2"/>зеленый</option>
<option value="2.5"/>синий</option>
</select>
<p id="output"></p>
</form>
</body>
</html>
|
Цитата:
<output id="output"></output> output.value = .... Цитата:
|
j0hnik, laimas, спасибо
Цитата:
|
Цитата:
|
laimas, понял. Спасибо
Сориентируйте ещё пожалуйста. Скрипт и форма располагаются просто на странице, если сделать так чтобы пользователь вводит цвет , размеры , видит стоимость , нажимает добавить ещё , появляется такая же строка , он вводит другой цвет, размеры и т.д. несколько раз. Потом он нажимает заказать , открывается попап форма для ввода телефона и комментария. В поле комментарий автоматом текстом вставляются цвет и размеры введённые ранее. Добавить ещё (это будет рекурсия? )и вставку введённых данных в существующую форму (как понимаю, инпуты и селект переменных нужно присвоить?) это сложно реализовать? Как понимаю, дополнительная работа с базой данных тут не нужна ? Т. К. данные автоматом при заказе уйдут мне на почту. |
Цитата:
|
Цитата:
|
Цитата:
Всего один вопрос - нахрена вам вообще тогда серверный язык? Ну создайте вы статичные страницы, в них укажите свое мыло, все свои товары опишите в них же, клиентским скриптом пусть там чего-то выбирают, а почту шлют прямо с клиента, либо через POP3, если доступен, либо через сервис. |
ФедорН,
Цитата:
А при сохранении заказа можно реализовать его анализ на туфту. Если заказы не единичные - вы замучаетесь с контролем исполнения заказов по письмам. |
Цитата:
Нет, я не имел в виду что я вообще БД не использую. Сайт полностью наполнен информацией, я имею в виду только что в данном конкретном случае отдельно данные заказа можно не сохранять. Колбэк форма кроме отправки на почту данные в админке сохраняет. Разумеется с такой схемой при появлении объёмов работать не планируется. Если появятся объёмы будет делаться новый сайт, не на CMS |
Цитата:
Коли база есть, вывод продуктов по базе, значит сервер должен ожидать только идентификаторы товаров/характеристик и количество набранного. Проверяет, рассчитывает стоимость и формирует почтовое отправление на основе выбранного. |
Цитата:
Онлайн оплаты тоже нет т.к продвигаться будет изначально в ручном режиме. Все пока рассчитано преимущественно на Юр лиц. Если бы нужно было создать базу товаров и пр то я бы поставил какой-нибудь woocommerce и не грел голову. Но тут подобное не имеет здравого смысла. 3 вида товара. Фишка в индивидуальном размере. Не создавать же базу с изделиями 30х30, 30х31, 30х32.... 31х32... и так до 200х250. А если ещё и с миллиметрами? Пока спрос будет изучаться в рамках региона , а если и будет отправка, то только ТК, и то есть нюансы в виде обрешётки и тд, поэтому формирование почтового отправления тут тоже неуместно. Обсудили -то здорово, но как насчёт сориентировать по тому как сделать в первом запросе )) просто "добавить ещё" (вставляемся аналогичная строев ниже) и эти данные вставляются в форму. |
Цитата:
Изучение спроса либо на "пустом месте", тогда да, вам пишут что угодно, а вы уж решаете. Но коли у вас калькулятор, а далее вопрос "Добавить еще ...", значит не на пустом месте, а все таки есть предложения. Размеры, цвет, все что угодно, но что-то есть. А если спрос и допускается помимо предложений и произвольное от заказчика, то это из того же списка "Другое....", и тогда будет доступно поле ввода для указания например цвета, или размера. То есть иное, это как раз и можно отправлять в "Комментарий", который дополнение к конкретному предложенному, либо вообще ничего не выбирается из предложенного, а чисто текстом описывается .... При этом предложения, если их немного, можно описать и обычным массивов в подключаемом файле. Добавить в форму набор полей не сложно, полную структуру этих полней формы покажите. И на чем надо, JS или jQuery? |
Цитата:
Размеры вводит пользователь. Цвет выбирает тоже пользователь , возможность выбора как раз реализована в скрипте, который опубликован изначально в этой ветке. Текстом пользователю ничего вводить не нужно т.к. Цвета 3, в этом все отличие. Собственно , на данном этапе нет никаких доп. фишек , которые бы пользователь мог для заказа достать из собственной головы , все фиксированно. JS. По поводу попап формы , использую данный плагин. Лишнее для себя из него убрал, но принцип остаётся тот же. Подскажите , если нужно куда-то выгрузить или скопировать часть кода только окна формы , сделаю. Буду очень благодарен если наставите на путь истинный) |
Цитата:
Это не торговая сеть, поэтому цена статична. Если ее нужно поменять будет, то раз в год. А через год если спрос будет уже и мысли о новом сайте будут, а то и раньше. Даже если скрипт один раз потребуется открыть для (хотя прекрасно понимаю это неправильно ) изменения, то ничего страшного. Если вы это имели ввиду |
Цитата:
Почта в данном случае полезна была бы мне не как "ах заказ пришел", а отправление этого заказа клиенту на указанную почту. До этого параметры заказа хранятся в базе. Если придет подтверждение заказа, значит работаем, если нет, удаляем его из базы. По поводу плагина ничего не понять - вы используете wordpress поэтому этот плагин или просто понравилось? Дело в том, что нужно связать поля окна с полями заказа. Нельзя отправить две формы сразу. |
Цитата:
Если говорить о сделано все как положено , то хороший сайт и на Wordpress не должен работать. По поводу ввода текста пользователем, я имел в виду что никаких текстовых комментариев у него необходимости нет вводить. |
Цитата:
Да, я использую wp и именно это плагин. По поводу связи мне вот не совсем понятно , как помечать и вытаскивать значения селектов и инпутов в моем случае. Возможно, я что-то не так представляю, 2 формы отправлять и не нужно. Ввёл на странице размеры , цвет нажал добавить ещё, снова ввёл -> заказать открылась форма где в одно из полей вставлены значения , вводишь телефон и имя , и отправляешь |
Хорошо, отправляйте что хотите, имеется ввиду не проверяя, что шлет клиент. Но Теоретически каждый Вася, а практически круг таких людей на общую массу населения сильно ограничен., это ну просто дилетантский подход к веб приложению.
Цитата:
|
Цитата:
Цитата:
|
Цитата:
|
Цитата:
<?php
function callback_display_form($lightbox = true) {
$field_email = null;
$field_time = null;
$field_message = null;
$label = null;
$script = null;
$description = wpautop(wpcallback_get_description());
$inline_container = null;
$field_label_name = wpcallback_get_option('field_option_label_name');
$field_placeholder_name = wpcallback_get_option('field_option_placeholder_name');
$field_label_telephone = wpcallback_get_option('field_option_label_telephone');
$field_placeholder_telephone = wpcallback_get_option('field_option_placeholder_telephone');
$field_label_email = wpcallback_get_option('field_option_label_email');
$field_placeholder_email = wpcallback_get_option('field_option_placeholder_email');
$field_label_message = wpcallback_get_option('field_option_label_message');
$field_placeholder_message = wpcallback_get_option('field_option_placeholder_message');
$field_label_submit = wpcallback_get_option('field_option_label_submit');
if($lightbox) {
$label = '<h1>' . callback_get_option('label') . '</h1>';
$script = '<script type="text/javascript" src="' . plugins_url('js/callback.js', __FILE__) . '"></script>';
}
else {вариант к моему случаю не относится поэтому вырезал}
$form_action = get_site_url() . '/?callback_action=email';
$form = <<<EOT
<div class="callback-form {$inline_container}">{$label}{$description}<form class="clearfix callback-form-container" action="{$form_action}" method="post"><label class="hear-about-us"><span>Hear about us</span><input type="text" autocomplete="off" name="hear_about_us"></label><label><span class="callback-label"><span class="label-text">{$field_label_name}</span> <span class="input-required">*</span></span><input class="validate" type="text" autocomplete="off" name="callback_name" placeholder="{$field_placeholder_name}"></label><label><span class="callback-label"><span class="label-text">{$field_label_address}</span> <span class="input-required">*</span></span><input class="validate" type="text" autocomplete="off" name="callback_address" placeholder="{$field_placeholder_address}"></label><label><span class="callback-label"><span class="label-text">{$field_label_telephone}</span> <span class="input-required">*</span></span><input class="validate" type="text" autocomplete="off" name="callback_telephone" placeholder="{$field_placeholder_telephone}"></label>{$field_email}{$field_time}{$field_message}<input class="submit-button" type="submit" value="{$field_label_submit}"></form></div>{$script}
EOT;
return $form;
}
Код:
<form action="" id="form" > |
Цитата:
Дальнейшее словоблудие- бесполезная трата времени и не более. |
Если делать так как я говорил, то <form id="send" class="clearfix callback-form-container" action="{$form_action}" method="post"> - добавляем ID форме.
<option value="1.2"/> - это неправильно, не должно быть тут слеша. А вот если отправлять поля формы id="form", то тег этой формы заменить на тег DIV, а полям добавит атрибуты form="send". Но, чтобы эти поля отправились на сервер, они должны иметь имена, например список, это name="color[]", и соответственно name="width[]" и name="height[]" у полей ввода. ID у полей и списка удалить, так как они должны быть уникальны. Если ID эти используются в калькуляторе, то его код нужно переписать делегируя обработку общему родителю - id="form", так как поля добавляются. Именование как name[], означает, что это элемент массива name. То есть сервер получит такой массив: Код:
Array
<div id="form" >
<div class="roword">
<div class="col-md-3 col-sm-6 col-xs-12 form-col-1">
<select form="send" name="color[]">
<option value="">Выберите цвет</option>
<option value="1.2">Зеленый</option>
<option value="1.6">Синий</option>
<option value="1.8">Красный</option>
</select>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 form-col-2">
<input form="send" type="number" step="1" name="width[]">
</div>
<div class="col-md-3 col-sm-6 col-xs-12 form-col-3">
<input form="send" type="number" name="height[]">
</div>
<div class="col-md-3 col-sm-6 col-xs-12 form-col-4">
<output></output>
</div>
</div>
</div>
<button>Add</button>
И обработчик:
$(function() {
$('button').click(function() {
$('div.roword').first().clone().appendTo($('#form')).find('select, input').val('')
})
});
|
относительно разобрался.
id в скрипте используются. Правильно ли я понимаю, что я document.querySelector("#id") должен заменить на что-то вроде width=document.querySelector("#form" input[name=width[]]) ? Надеюсь, хотя бы мыслю в правильном направлении. Для наглядности продублирую скрипт:
function calculate() {
var h = +height.value || 0,
w = +width.value || 0,
c = +select.value;
h < 40 && (h = 40);
w < 40 && (w = 40);
h > 200 && (h = 200);
w > 300 && (w = 300);
height.value = h;
width.value = w;
h = h * w;
h *= c;
output.value = h.toFixed(0)
}
var form = document.querySelector("#form"),
output = document.querySelector("#output"),
width = document.querySelector("#width"),
height = document.querySelector("#height"),
select = document.querySelector("#mySelect");
form.addEventListener("change", calculate);
});
|
Где ваш HTML?
насчет замены. это не обязательно, можно обращаться по ID. |
| Часовой пояс GMT +3, время: 05:42. |