Работа с раскрывающимся списком

[ФедорН]

ФедорН, дело не в том как часто ты будешь менять цену, а в том что теоретически любой вася при большом желании сможет подправить цены в этом скрипте у себя в браузере и отправятся тебе на почту неверные расчеты по цене, как ты это будешь контролировать без проверки по базе цен перед отправкой на почту, или будешь вручную пересчитывать каждый раз каждое письмо или у тебя память феноменальная и содержит все возможные варианты значений цены и сможешь на глаз определить подлог?

Теоретически каждый Вася, а практически круг таких людей на общую массу населения сильно ограничен. Из них в код каждого сайта на котором есть калькулятор заходят ещё единицы. На сайте нет онлайн оплаты , работа подавляюще с Юр лицами (выставление счета и тд), зачем это Васе с улицы нужно ? Просто от нечего делать?

Если говорить о сделано все как положено , то хороший сайт и на Wordpress не должен работать.

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

[ФедорН]

Вы не понимаете сути того, о чем вам говорят. Никто не говорит, что пользователя нужно заставить решать теоремы, есть калькулятор, пусть считает. Но это сервис для него, а сервер должен получить ID продукта и выбор - ширина, высота. Цену продукта сервер знает, рассчитать он может, и должен, без клиента.

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

По поводу плагина ничего не понять - вы используете wordpress поэтому этот плагин или просто понравилось? Дело в том, что нужно связать поля окна с полями заказа. Нельзя отправить две формы сразу.

по поводу подтверждения заказа вы имеете в виду клиент через свою почту подтверждает заказ? Нет , этот вариант не пойдёт. Попап форма здесь служит больше колбэк-формой на которую будет реагирование в виде звонка. А организовать в подобной форме подтвердите нам по смс что это вы, тогда... не пойдёт )

Да, я использую wp и именно это плагин.
По поводу связи мне вот не совсем понятно , как помечать и вытаскивать значения селектов и инпутов в моем случае. Возможно, я что-то не так представляю, 2 формы отправлять и не нужно. Ввёл на странице размеры , цвет нажал добавить ещё, снова ввёл -> заказать открылась форма где в одно из полей вставлены значения , вводишь телефон и имя , и отправляешь

[laimas]

Хорошо, отправляйте что хотите, имеется ввиду не проверяя, что шлет клиент. Но Теоретически каждый Вася, а практически круг таких людей на общую массу населения сильно ограничен., это ну просто дилетантский подход к веб приложению.

как помечать и вытаскивать значения селектов и инпутов в моем случае.

Не надо ничего вытаскивать. Поля формы через атрибут form можно можно связать с формой, при этом будучи находясь вне ее. Допустим ваш плагин не только принимает ввод, но и отправляет форму. Если этой форме к примеру дать id="order", а полям и спискам, которые определяют параметры заказа прописать атрибут form="order", то форма отправляемая плагином отправит и эти поля.

[ФедорН]

Хорошо, отправляйте что хотите, имеется ввиду не проверяя, что шлет клиент. Но Теоретически каждый Вася, а практически круг таких людей на общую массу населения сильно ограничен., это ну просто дилетантский подход к веб приложению.

насчет дилетантства я с вами полностью согласен.

Не надо ничего вытаскивать. Поля формы через атрибут form можно можно связать с формой, при этом будучи находясь вне ее. Допустим ваш плагин не только принимает ввод, но и отправляет форму. Если этой форме к примеру дать id="order", а полям и спискам, которые определяют параметры заказа прописать атрибут form="order", то форма отправляемая плагином отправит и эти поля.

А как сделать "добавить ещё"? При этом форма остаётся одна, просто внутри неё добавляется ещё каким-то образом строка?

[laimas]

А как сделать "добавить ещё"?

Клонировать элементы формы и вставляя их в форму, очистив их. Я просил показать точный html код формы, его нет, поэтому конкретный код написать не могу.

[ФедорН]

Клонировать элементы формы и вставляя их в форму, очистив их. Я просил показать точный html код формы, его нет, поэтому конкретный код написать не могу.

<?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" >
<div class="col-md-3 col-sm-6 col-xs-12 form-col-1">
<select id="mySelect">
<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 type="number" step="1" id="height">
</div>
<div class="col-md-3 col-sm-6 col-xs-12 form-col-3">
<input type="number" id="width">
</div>
<div class="col-md-3 col-sm-6 col-xs-12 form-col-4">
<output id="output"></output>
</div>
</form>

Прикрепил попап форму, а ниже форму калькулятора, в том виде, в клиром она у меня. Признателен, если подскажите

[ФедорН]

Тогда сними входную дверь, и узнаешь нужно Васе с улицы что-то или нет. Просто от нечего делать могут и убить. Что за идиотские вопросы кому это нужно, тебе что 5 лет? Иначе бы мы жили в идеальном мире если бы все делали только то что нужно. Есть такое слово безопасность, оно актуально везде где есть человек, и интернет не исключение.

Но там всё как положено, а не как тебе кажется.

Если не необходимости не значит что он этого не сделает.

Я согласен, что это по-дилетантски как уже сказали выше. И вы как человек знающий Веб разработку рассуждаете абсолютно правильно. Работа мастером должна быть сделана качественно и корректно. В частных случаях человек может обойтись тем решение, которое его устроит на какое -то время. На свой страх и риск.

Дальнейшее словоблудие- бесполезная трата времени и не более.

[laimas]

Если делать так как я говорил, то <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
(
    [color] => Array
        (
            [0] => значение
            [1] => значение
            ....
        )

    [width] => Array
        (
            [0] => значение
            [1] => значение
             ....
        )

    [height] => Array
        (
            [0] => значение
            [1] => значение
            .....
        )

)

Это бутстрап, не знаю где кнопка добавить, тут для примера. Списку добавить опцию с пустым значением (если только Зеленый, это не значение по умолчанию).

<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);
});

[j0hnik]

Где ваш HTML?
насчет замены. это не обязательно, можно обращаться по ID.