25.07.2017, 22:14
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от ФедорН
|
Я сначала ее в калькулятор запихал, естественно, первая строка при загрузке сразу удалялась
|
Все верно, она и должна удаляться так как это пример без учета того, что элементы первого набора удалять нельзя. Если можно отменить отправление формы и вернуться к набору, то удалив первый набор полей, добавить новые клонированием уже нельзя. Удалять незаполненные, но кроме первой:
$('div.roword').not(':first').filter(function() {
return !$(this).find('select').val()
})
.remove()
.end()
Это коллекция, в которой все после первого набора заполнены. Заполнено ли все в первой неизвестно, требуется проверка.
|
|
26.07.2017, 20:26
|
Аспирант
|
|
Регистрация: 19.06.2017
Сообщений: 40
|
|
Сообщение от laimas
|
Все верно, она и должна удаляться так как это пример без учета того, что элементы первого набора удалять нельзя. Если можно отменить отправление формы и вернуться к набору, то удалив первый набор полей, добавить новые клонированием уже нельзя. Удалять незаполненные, но кроме первой:
|
Понял. Поправил. Все ок.
|
|
26.07.2017, 20:37
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от ФедорН
|
Все ок.
|
Как душе угодно, но учтите, первый при этом требует проверки. А можно ведь и не клонировать, а удалять все, при этом по умолчанию нет никаких полей.
Поле можно добавлять используя ранее заготовленный шаблон, который описан в переменной или хранится как данные в атрибуте кнопки Добавить:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.myPrice {
border: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
$('button').click(function() {
$($(this).data('ins')).appendTo($('#form'))
.find('.myPrice').focus(function() {
this.blur()
})
.end()
.find('a').click(function() {
$(this).closest('.roword').remove()
})
});
//обработка изменения слайдера и выбора в списке
$('#form').on('input change', 'select,input', function() {
if(this.type == 'range') $(this).next().text(this.value) //отобразить значение слайдера
//рассчет
var o = $(this).closest('.roword').find('select,input'),
v = o.eq(0).val(),
w = o.eq(1).val(),
h = o.eq(2).val(),
r = o.last().val('');
if(v) {
v = v * w * h;
if(w * h <= 2399) v *= 1.1
else if(w * h >= 2400 && w * h <= 3999) v *= 1.055
else if(w * h >= 4000 && w * h <= 5399) v *= 1.03;
else if(w * h >= 5400 && w * h <= 6399) v *= 1.0135;
r.val(v.toFixed())
}
});
$('a').click(function() {
$('div.roword').filter(function() {
return !$(this).find('select').val()
}).remove();
var res = $.map($('div.roword'), function(e, i) {
return i+1 + '. ' + $.map($(e).find('select,input'), function(e) {
return e.value
}).join(', ');
}).join('\n');
if(res) {
$('textarea').val(res);
$('button').prop('disabled', 0);
}
})
});
</script>
</head>
<body>
<div id="form"></div>
<div class="clearfix"></div>
<button data-ins='<div class="roword"><div class="col-md-3 col-sm-6 col-xs-12 form-col-1"><select>
<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 type="range" min="40" max="300" value="40"><span>40</span></div>
<div class="col-md-3 col-sm-6 col-xs-12 form-col-3"><input type="range" min="40" max="200" value="40"><span>40</span></div>
<div class="col-md-3 col-sm-6 col-xs-12 form-col-4"><input class="myPrice" type="text" readonly> <a>Удалить</a></div></div>'>Добавить</button>
<div><textarea></textarea></div>
<a>Send</a>
</body>
</html>
Последний раз редактировалось laimas, 26.07.2017 в 21:27.
|
|
03.08.2017, 09:32
|
Аспирант
|
|
Регистрация: 19.06.2017
Сообщений: 40
|
|
laimas, прошу прощения, только сейчас увидел ваше последнее сообщение. Вы имели в виду, что первая строка требует проверки перед тем, как добавить следующую или же перед тем, как перейти к форме заказа?
Но что-то в коде не так: перестали работать калькулятор и кнопка "добавить", с первой же строки калькулятора появилась не кликабельная "удалить".
В html были несколько ошибок (видимо, образовались в процессе копирования): съехал <button data-ins=' и <div class="clearfix"></div>, и как понимаю, это лишний кусок: <div><textarea></textarea></div>
<a>Send</a>
Это я поправил. Но скрипт не могу.
Последний раз редактировалось ФедорН, 03.08.2017 в 09:51.
|
|
03.08.2017, 09:51
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от ФедорН
|
Вы имели в виду, что первая строка требует проверки перед тем, как добавить следующую или же перед тем, как перейти к форме заказа?
|
Если первый набор полей является источником добавляемых, то он не может быть удален при проверке во время отправления формы. Удаляются только те наборы, в которых не выбрано значения в списке. Первый же набор при этом получается не проверялся, так как его не затрагивает удаление, поэтому нужно проверить выбран ли в этом наборе список.
Последний пример, это в форме изначально вообще отсутствуют наборы полей, а добавляются они в форму из шаблона, который хранится в атрибуте кнопки Добавить. В этом случае можно удалять любой набор кнопкой Удалить. Также будет удаляться и первый набор полей если в нем нет выбора при проверке во время отправления формы. После чего производится формирование текста из набранных (в этом примере все упрощенно, без текста, только значения полей, как с текстом формировать было в примерах раньше). После чего останется проверить не пуста ли сформированная строка и если да, то она помещается форму и ....
textarea и кнопка отправления Send чисто для запуска этого примера здесь.
Последний раз редактировалось laimas, 03.08.2017 в 10:04.
|
|
03.08.2017, 10:17
|
Аспирант
|
|
Регистрация: 19.06.2017
Сообщений: 40
|
|
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();
}
}
?>
Последний раз редактировалось ФедорН, 03.08.2017 в 10:21.
|
|
03.08.2017, 10:27
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от ФедорН
|
в моем случае так не пойдет, т.к. в футере есть fixed button, которая сразу предлагает сделать расчет, переходит в область на странице, где калькулятор.
|
Что значит расчет и переходить к "калькулятор"? Если калькулятор только высчитывает ранее набранное, то ему должна передаваться форма, как при этом было добавление полей роли не играет. А если набор происходит на странице калькулятора, то так без разницы как и из чего добавляются поля. В проем дело хозяйское.
$('.callback-form-container').submit(function() и form.submit(function() это один и тот же обработчик, какой смысл расклеивать его на две составляющие да еще и в дважды одном и тот же jQuery(document).ready(function($)? Причем логическое построение этих обработчиков желает лучшего. А отправление формы должно быть только тогда когда требуемые ее поля заполнены и Recaptcha дала добро.
|
|
03.08.2017, 10:50
|
Аспирант
|
|
Регистрация: 19.06.2017
Сообщений: 40
|
|
Что значит расчет и переходить к "калькулятор"?
Вы идете по странице, читаете про товар, в нижнем углу вас всегда сопровождает кнопка "расчет стоимости", вы ее нажимаете, она вас кидает в область лэндинга, где калькуятор. Если вы ее не нажимаете, в любом случае при пролистывании дойдете до него.
$('.callback-form-container').submit(function() и form.submit(function() в разных кодах. Я имел в виду, что первый код с $('.callback-form-container').submit(function() - то, что было изначально, где работала только валидация, я изменил на вариант с form.submit(function(). Как понимаю, вы так поняли, что я оба этих кода использовал в одном скрипте?
Последний раз редактировалось ФедорН, 03.08.2017 в 10:59.
|
|
03.08.2017, 11:28
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от ФедорН
|
Вы идете по странице, читаете про товар, в нижнем углу вас всегда сопровождает кнопка "расчет стоимости", вы ее нажимаете, она вас кидает в область лэндинга, где калькуятор. Если вы ее не нажимаете, в любом случае при пролистывании дойдете до него.
|
Странная у вас логика однако. Ваш калькулятор рассчитывает сразу, по мере выбора в списке. Если набор этих полей происходит там где "Вы идете по странице, читаете про товар", то какое отношение имеет к калькулятору переход вниз? низу получается форма уже, а в ней только проверка набранного, и если такового не будет не сложно "промотать" пользователя и к полям "где читаем и выбираем".
Если надо полей внизу, тогда да, это калькулятор и форма внизу. Но какая при этом разница каким образом добавляются поля в форму? Логику кода достаточно построить правильно, а не писать так, чтобы чтобы все зависело от того каким образом добавляются поля. Впрочем это ваше дело.
Сообщение от ФедорН
|
$('.callback-form-container').submit(function() и form.submit(function() в разных кодах. Я имел в виду, что первый код с $('.callback-form-container').submit(function() - то, что было изначально, где работала только валидация, я изменил на вариант с form.submit(function().
|
Это не разные коды, это один и тот же обработчик расклеенный на две части, плюс и рекаптча тоже сама по себе, а все должно быть описано одной логической структурой:
отправка формы
1) отменяем действие по умолчанию
2) устанавливаем кнопку отправки формы недоступной
3) проверяем заполнение полей - если нет, сообщение, страницу к полям (бог знает что такое у вас калькулятор) и выход
4) иначе проверка каптчи
5) если каптча Ок выполняем Ajax
|
|
03.08.2017, 11:51
|
Аспирант
|
|
Регистрация: 19.06.2017
Сообщений: 40
|
|
Сообщение от laimas
|
отправка формы
1) отменяем действие по умолчанию
2) устанавливаем кнопку отправки формы недоступной
3) проверяем заполнение полей - если нет, сообщение, страницу к полям (бог знает что такое у вас калькулятор) и выход
4) иначе проверка каптчи
5) если каптча Ок выполняем Ajax
|
Спасибо! Пошел пытаться.
По поводу калькульятора )) - примерно так будет выглядеть
Пользователь может и не захотеть заказывать, а просто сделать расчет. Поэтому не логично начинать с (лишнего) действия "добавить", Сразу видно строку, он считает, а дальше уже решает, что ему делать. И уже при нажатии ЗАКАЗАТЬ (на скрине ФОРМА ЗАКАЗА) происходит открытие попап формы, которая заполняется, проверяется капча ....
Последний раз редактировалось ФедорН, 03.08.2017 в 11:55.
|
|
|
|