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

[laimas]

Вы имели в виду, что первая строка требует проверки перед тем, как добавить следующую или же перед тем, как перейти к форме заказа?

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

Последний пример, это в форме изначально вообще отсутствуют наборы полей, а добавляются они в форму из шаблона, который хранится в атрибуте кнопки Добавить. В этом случае можно удалять любой набор кнопкой Удалить. Также будет удаляться и первый набор полей если в нем нет выбора при проверке во время отправления формы. После чего производится формирование текста из набранных (в этом примере все упрощенно, без текста, только значения полей, как с текстом формировать было в примерах раньше). После чего останется проверить не пуста ли сформированная строка и если да, то она помещается форму и ....

textarea и кнопка отправления Send чисто для запуска этого примера здесь.

[ФедорН]

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

Я третий день пытаюсь прикрутить к форме google reCaptcha. Возможно, с принципом подключения вы знакомы.
Хочу ее добавить не по событию открытия формы заказа, а по событию отправки -непосредственно, когда пользователь заполнил форму и нажимает "отправить". Мне кажется, в моем случае, это правильнее?
Встроил ее в скрипт валидации обязательных полей формы, в последней версии, к которой я пришел, капча работает, валидация - нет. Т.е. можно вообще отправить абсолютно пустую форму, она без проблем уходит.

Изначально код валидации выглядел так:

jQuery(document).ready(function($) {
        $('.callback-form-container').submit(function() {
            var formInputs = $(this).find('.validate');
            var errors = '';
            $(formInputs).each(function() {
                if($.trim(this.value) == '') {
                    fieldLabel = $(this).parent().find('span.label-text').html();
                    errors += '- ' + fieldLabel + '\n';
                }
            });
            if(errors.length > 0) {
                alert('Пожалуйста, заполните следующие поля:\n\n' + errors);
                return false;
            }
            else
            {
                $('.submit-button').val('Пожалуйста, пододжите...');
                $('.submit-button').attr('disabled', 'disabled');
                return true             
            }           
            });         
        }); 
});

то, что получилось у меня:

jQuery(document).ready(function($) {
    var form=$('.callback-form-container');
    form.submit(function() {
        var formInputs = $(this).find('.validate');
        var errors = '';
        $(formInputs).each(function() {
            if($.trim(this.value) == '') {
                fieldLabel = $(this).parent().find('span.label-text').html();
                errors += '- ' + fieldLabel + '\n';
            }
        });
        $.ajax({
           type: "POST",
           url: "/Captcha.php",
           data: form.serialize(),
           dataType: "json", 
           error: function(){
              alert("Ошибка сервера. Проверьте интернет-соединение");
          },
           success:function(result){
             if(errors.length > 0) {
                alert('Пожалуйста, заполните следующие поля:\n\n' + errors);
             }else{
                $('.submit-button').val('Пожалуйста, пододжите...');
                $('.submit-button').attr('disabled', 'disabled');
                 
             }
           }     
        });
    }); 
});

captcha.php

<?php
if(isset($_POST['g-recaptcha-response'])) {
    $result = json_decode(file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=6Le(секретный код)7O&response=$_POST["g-recaptcha-response"]&remoteip=$_SERVER["REMOTE_ADDR"]'), TRUE);

    if($result['success'] == 1) {
        console.log("Ok");

    } else {
        grecaptcha.reset();
    }
}
?>

[laimas]

в моем случае так не пойдет, т.к. в футере есть fixed button, которая сразу предлагает сделать расчет, переходит в область на странице, где калькулятор.

Что значит расчет и переходить к "калькулятор"? Если калькулятор только высчитывает ранее набранное, то ему должна передаваться форма, как при этом было добавление полей роли не играет. А если набор происходит на странице калькулятора, то так без разницы как и из чего добавляются поля. В проем дело хозяйское.

$('.callback-form-container').submit(function() и form.submit(function() это один и тот же обработчик, какой смысл расклеивать его на две составляющие да еще и в дважды одном и тот же jQuery(document).ready(function($)? Причем логическое построение этих обработчиков желает лучшего. А отправление формы должно быть только тогда когда требуемые ее поля заполнены и Recaptcha дала добро.

[ФедорН]

Что значит расчет и переходить к "калькулятор"?

Вы идете по странице, читаете про товар, в нижнем углу вас всегда сопровождает кнопка "расчет стоимости", вы ее нажимаете, она вас кидает в область лэндинга, где калькуятор. Если вы ее не нажимаете, в любом случае при пролистывании дойдете до него.

$('.callback-form-container').submit(function() и form.submit(function() в разных кодах. Я имел в виду, что первый код с $('.callback-form-container').submit(function() - то, что было изначально, где работала только валидация, я изменил на вариант с form.submit(function(). Как понимаю, вы так поняли, что я оба этих кода использовал в одном скрипте?

[laimas]

Вы идете по странице, читаете про товар, в нижнем углу вас всегда сопровождает кнопка "расчет стоимости", вы ее нажимаете, она вас кидает в область лэндинга, где калькуятор. Если вы ее не нажимаете, в любом случае при пролистывании дойдете до него.

Странная у вас логика однако. Ваш калькулятор рассчитывает сразу, по мере выбора в списке. Если набор этих полей происходит там где "Вы идете по странице, читаете про товар", то какое отношение имеет к калькулятору переход вниз? низу получается форма уже, а в ней только проверка набранного, и если такового не будет не сложно "промотать" пользователя и к полям "где читаем и выбираем".

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

$('.callback-form-container').submit(function() и form.submit(function() в разных кодах. Я имел в виду, что первый код с $('.callback-form-container').submit(function() - то, что было изначально, где работала только валидация, я изменил на вариант с form.submit(function().

Это не разные коды, это один и тот же обработчик расклеенный на две части, плюс и рекаптча тоже сама по себе, а все должно быть описано одной логической структурой:

отправка формы
1) отменяем действие по умолчанию
2) устанавливаем кнопку отправки формы недоступной
3) проверяем заполнение полей - если нет, сообщение, страницу к полям (бог знает что такое у вас калькулятор) и выход
4) иначе проверка каптчи
5) если каптча Ок выполняем Ajax

[ФедорН]

отправка формы
1) отменяем действие по умолчанию
2) устанавливаем кнопку отправки формы недоступной
3) проверяем заполнение полей - если нет, сообщение, страницу к полям (бог знает что такое у вас калькулятор) и выход
4) иначе проверка каптчи
5) если каптча Ок выполняем Ajax

Спасибо! Пошел пытаться.

По поводу калькульятора )) - примерно так будет выглядеть

Пользователь может и не захотеть заказывать, а просто сделать расчет. Поэтому не логично начинать с (лишнего) действия "добавить", Сразу видно строку, он считает, а дальше уже решает, что ему делать. И уже при нажатии ЗАКАЗАТЬ (на скрине ФОРМА ЗАКАЗА) происходит открытие попап формы, которая заполняется, проверяется капча ....

[laimas]

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

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

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

[ФедорН]

laimas, отсутствие полей из калькулятора разрешено формой (пока), по той причине, что при присвоении textaera статуса обязательного поля данные попадающие туда из калькулятора не учитываются, выдается сообщение о том, что поле пустое. Как понимаю, тут идет проверка, ввел ли пользователь что-то с клавиатуры, а не попало ли что-то в эту ячейку и откуда... Больше я с этим не разбирался.

Добавление полей конечно же не противоречит осуществлению расчета без заказа, но если вы уже даете пользователю ссылку на "сделать расчет", зачем еще какие-то действия. Моя логика тут такова: если в ОС вы нажимаете "калькулятор", он открывается, вы же не добавляете еще в него какое-то поле, сразу можете считать. Конечно, можно привести и много антиаргументов, но как я уже говорил, со своими (не)знаниями языка, я выбираю понятные/готовые решения, в которые мне более-менее по силам внести какие-то правки. С вами, как с разработчиком-гуру, в этой части я спорить даже не посмею ))

Вопрос по:
4) иначе проверка каптчи
5) если каптча Ок выполняем Ajax

я использую invisible captcha, поэтому мне тут не совсем понятно про "проверка каптча". Т.е. как обозначить "если каптча Ок".
Она не токеном проверяется? Или токен только ключи сверяет?

function onSubmit(token) {
document.getElementById("send").submit();
}

Что есть success function я понимаю, но к чему она должна относиться?

[laimas]

Делайте как вам угодно, но мне не понятна ваша логика.

Можете какую угодно каптчу использовать, сторонний сервис, свою ли, но роль ее понятна да - проверить "на робота". Так когда должна отправляться форма - после проверки каптчи и результата этой проверки или же каптча сама по себе, а Ajax ее ждать будет? Наверное же первое, второе же не возможно в связи с асинхронностью данных процессов.
То есть ввод в каптчу, отправка, ответ положительный - если да, то только сейчас можно отправлять форму, иначе нет.

[ФедорН]

jQuery(document).ready(function($) {
    	var callbackFormWidth = $('.callback-btn').attr('data-formwidth');
	if(!callbackFormWidth) {
		callbackFormWidth = '400px';
	}
	$('.inline-container').width(callbackFormWidth);
	if($.isFunction($.colorbox)){
		$(".callback-form-show").colorbox({
			width:callbackFormWidth
		});
	}
	jQuery(document).ready(function($) {
	$( ".submit-button" ).click(function( event ) {
		event.preventDefault();
		$('.submit-button').attr('disabled', 'disabled');
	});

        $('.callback-form-container').submit(function() {
            var formInputs = $(this).find('.validate');
            var errors = '';
            $(formInputs).each(function() {
                if($.trim(this.value) == '') {
                    fieldLabel = $(this).parent().find('span.label-text').html();
                    errors += '- ' + fieldLabel + '\n';
                }
            });
            if(errors.length > 0) {
                alert('Пожалуйста, заполните следующие поля:\n\n' + errors);
                return false;
            }
            else
            {
				function get_action(form) {
					var v = grecaptcha.getResponse();
					if(v.length == 0)
					{
					return false;
					grecaptcha.reset();
				}
					else
					{
						return true;
						$.ajax({
						type: "POST",
						url: "/reCaptcha.php",
						data: form.serialize(),
						dataType: "json",
							success : function(text){
								if (text == "success"){
								formSuccess();
								} else {
								formError();
								submitMSG(false,text);
								}
							}
						});
					}
				}
                            
            }           
        });          
	});

});

laimas, поразбирался, набросал, как понял.
Ошибок в структуре, полагаю, куча.
Но сейчас не грузится лайтбокс.
Ранее с такой ошибкой встречался, когда допускал "промахи" в балансе скобок, сейчас все на 5 раз перепроверил, видимо, дело в коде.
Ткнете носом?