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

[ФедорН]

Тогда сними входную дверь, и узнаешь нужно Васе с улицы что-то или нет. Просто от нечего делать могут и убить. Что за идиотские вопросы кому это нужно, тебе что 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.

[laimas]

j0hnik, не порите хрени, ID = идентификатор, еще не означает, что нужно именно по нему обращаться к объекту. В данном случае ID, это зло.

Правильно ли я понимаю, что я document.querySelector("#id") должен заменить на что-то вроде width=document.querySelector("#form" input[name=width[]]) ?

Нет. document.querySelector(selector) вернет первый из набора. Если он один на странице, то все Ок, но если их много, то достучаться до остальных этим методом не получится. И к тому же селектор в данном случае, это строка, которая у вас с ошибкой прописана. Селектор "#form input[name=width[]]" не найдет требуемого, будет получена ошибка о некорректном селекторе, так как квадратные скобки в именах, а также точку необходимо экранировать - "#form input[name=width\\[\\]]" или "#my\\.iden" в случае идентификатора.

Но даже используя корректные селекторы и document.querySelectorAll() все равно не получится, так как элементы добавляются динамически, ранее объявленные обработчики их не затронут. Нужно делегировать обработку родителю form.

$('#form').on('change input', 'select, input', function() {
     this.value //здесь, это значение источника, а
     this //сам источник, который нужно исключить из набора остальных получаемых элементов
     var elm = $(this).closest('.roword').find('select, input').not(this) //набор остальных
})

Можно в набор включить сразу и output, перемножая значения среза элементов 0, -1 и this, помещая результат в последний в наборе (то есть output).

Кроме события change родителю делегируется обработка и события input, так как в поле ввода можно изменять значение не только стрелками, но и непосредственно вводом значения.

Ранее показанный код добавления нужно исправить, забыто об output, кроме того, по уму, поля ввода должны иметь значение по умолчанию 40 (в атрибутах min="40" max="200 и 300").

$('button').click(function() {
        $('div.roword').first()
                       .clone()
                       .appendTo($('#form'))
                       .find('select, output').val('')
                       .end()
                       .find('input')
                       .val(40)
    });

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

[ФедорН]

laimas, спасибо Вам огромное за помощь и развернутые ответы.

По обстоятельствам только вчера добрался, внес правки, но... вообще теперь все не работает пытаюсь разбираться с jQuery теперь

Правильно ли я понимаю, что

window.addEventListener

это теперь

$('#form').on

дополнительно оборачивать в

$(function() {

не требуется?

[laimas]

Правильно ли я понимаю, что
window.addEventListener
это теперь
$('#form').on

Нет. $('#form').on, это установка обработчика события в jQuery, и установить его можно только тогда, когда готова DOM, то есть после загрузки документа. Только по наступлению этого события, что и описывается обработчиком события $(function() ... в jQuery, будут доступны объекты документа и можно установить обработчики для них. То есть обязательно

(function() {
    $('#form').on(event, function() {
         //....
    }); 
})

window.addEventListener установка события в JS, которой и оперирует JQuey (это фреймворк написанный на JS).

вообще теперь все не работает

Ну если не думать о багах, которые неизбежны в коде вашем, то будет работать.

[ФедорН]

Понял

[laimas]

Добавил функцию для учета атрибутов инпутов min и max, в jsfiddle она отлично работает, а у меня в php -нет

Что именно на РНР не работает, значения min и max? Ну они и не передаются на сервер.

Что касается сервера, то я могу еще раз повторить - с точки зрения веб приложения, рассчитать на клиенте и результаты расчета отдать серверу, серверу принять и поверить, это профанация.

Грамотно, это так:

1) Опции списка color в значениях должны содержать не величины, которые для расчета, а идентификаторы этих величин.

2) Значения min и мах для полей типа number должен задавать север.

На основании 1 и 2 следует, что параметры всех величин сервер знает, а значит получая идентификатор списка он может проверить истинность выбранного. Выбранные величины ширины/высоты на корректность сервер может проверить, зная величины min и мах.

Вы так не поступаете, что там у вас за проблемы не знаю. Но если вы доверяете все клиенту, то и <output></output> не годится, так как его значение на сервер не передается, даже если задать тегу имя. Тогда уж обычное поле ввода с запретом на ввод.

Говоря о неизбежных багах в коде я имел ввиду min и мах в том числе, но в ином ракурсе.

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

<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" class="minmax" min="40" max="200" type="number" name="width[]">
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12 form-col-3">
            <input form="send" class="minmax" min="40" max="300" type="number" name="height[]">
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12 form-col-4">
            <output></output> <a style="display:none">Удалить</a>
        </div>
    </div>
</div>
<div class="clearfix"></div>
<button>Добавить</button>

Код обслуживающий добавление/удаление полей:

$(function() {
    $('button').click(function() {
        $('div.roword').first() //получаем первый набор полей
                       .clone() //клонируем его
                       .appendTo($('#form')) //добавляем набор в форму
                       .find('select, output').val('') //сбрасываем значения полей 
                       .end() //в начало набора
                       .find('input') //ищем поле ввода
                       .val(function() {
                            return this.min //устанавливаем значение равное минимальному   
                       })
                       .end() //в начало набора
                       .find('a').click(function() { //получаем кнопку удаления полей из формы
                            $(this).closest('.roword').remove() //удаляем добавленное из формы
                       })
                       .show() //делаем видимой кнопку удаления
    });
});

Проблемы неизбежные заложены в полях типа number. В поле можно вводить значение не только кнопками, но и ручным вводом (утомительно набирать максимальное значение с шагом 1). А то, что это поле типа number совсем не означает, что я не могу ввести в нем "абвгд". Вторая проблема, это "что определяет момент расчета"? Если бы это действие запускалось по кнопке "Рассчитать", тогда проблем с проверкой на min бы не было даже при ручном вводе. Но если расчет запускается при каждом изменении ввода и ввод не кнопками, а ручной, то возникает проблема с определением min. Можно конечно навесить таймер, определяя "вроде бы ввод закончен", но это палка о двух концах. С определением max проблем нет.

//обработка ввода, выбора кнопками и выбора в списке
    $('#form').on('change input', 'select, input', function() {
        if(this.type == 'number') { //если поле ввода
            this.value = this.value.replace(/^0|\D/, ''); //вырезаем не цифровые символы и 0 вначале 
            if(this.value.length >= this.max.length && this.max < this.value) this.value = this.max //если значение превышает максимальное             
        }
        //расчет
        //.........
    })

Обработчик определяет - если источник поле number, то удаляет не цифры из набора, сравнивает длину значения и значение с параметрами max. Подобное с min сделать нельзя, так как ввод в поле к примеру 2, еще не означает, что это будет меньше 40, это может быть в итоге 250.

Решить эту проблему можно используя поле не number, а range, тогда необходимость в проверке min/max отпадает (но только для клиента). В этом случае поля описываются так

<input form="send" type="range" min="40" max="300" name="width[]" value="40"> <output>40</output>
и
<input form="send" type="range" min="40" max="200" name="height[]" value="40"> <output>40</output>

В обработчик такой:

$(function() {
    $('button').click(function() {
        $('div.roword').first() //получаем первый набор полей
                       .clone() //клонируем его
                       .appendTo($('#form')) //добавляем набор в форму
                       .find('select').val('') //сбрасываем значение списка
                       .end() //в начало набора
                       .find('input, output') //слайдеры и выводы
                       .val(function(i) {
                            return i == 4 ? '' //очищаем output результата расчета
                                          : this.type == 'range' ? this.min //минимальное значение слайдеру
                                                                 : $(this).prev().attr('min') //отобразить значение слайдера по умолчанию   
                       })
                       .end() //в начало набора
                       .find('a').click(function() { //получаем кнопку удаления полей из формы
                            $(this).closest('.roword').remove() //удаляем добавленное из формы
                       })
                       .show() //делаем видимой кнопку удаления
    })
    //обработка изменения слайдера и выбора в списке
    //событие input в данном случае для отображения значения слайдера непосредственно при перемещении ползунка
    $('#form').on('change input', 'select, input', function() {
        if(this.type == 'range') $(this).next().val(this.value)  //отобразить значение слайдера
        //расчет
        //.........
    })
});

[ФедорН]

laimas, проблема, упомянутая вчера, из-за которой все не работало, - не подключался jquery.
В итоге подключил только через функцию:

<?php
function my_jquery_scripts() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_jquery_scripts' );
?>

через header.php так и не смог подключить ни одним из способов (причина так мне осталась неясна).

За пояснения снова безмерно благодарю.

Фреймворк jQuery мне показался более простым для понимания, но от понимания логики языка пока далек.

Осталось сделать самую малость- расчет.
Но и тут у меня возникли проблемы
Перепробовал много всего, но получил хоть какой-то результат только на этом решении (как понимаю, оно и является одним из/самым простым):

$('#form').on('change input', 'select, input', function() {
        if(this.type == 'range') $(this).next().val(this.value)
 	var h = $('.height').val();
    	var w = $('.width').val();
    	var mySelect = $("#form select option:selected").val();
   		mySelect = (mySelect) ? mySelect : 0; //если ничего не выбрано, правильно? 
    		$('.sum').val(h * w * mySelect);
  })

Поле вывода сделал input (с типом text), как вы и посоветовали. Классы инпутам, конечно, присвоил (не буду снова копировать форму), но результат всегда NaN.

Также еще буду думать над тем, чтобы при площади (height * width) равной или менее 2500 добавлялся доп. коэффициент, как это было сделано в первоначальной версии на JS (h <= 2500 && (c *= 1.1); ).
Для меня понятнее, как это делается через if, но есть варианты проще? (только не пишите за меня решение - сам хочу подумать).