Форум

laimas · #81 (**permalink**) 25.07.2017, 22:14

Сообщение от ФедорН

Я сначала ее в калькулятор запихал, естественно, первая строка при загрузке сразу удалялась

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

$('div.roword').not(':first').filter(function() {
           return !$(this).find('select').val()
        })
        .remove()
        .end()

Это коллекция, в которой все после первого набора заполнены. Заполнено ли все в первой неизвестно, требуется проверка.

ФедорН · #82 (**permalink**) 26.07.2017, 20:26

Сообщение от laimas

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

Понял. Поправил. Все ок.

laimas · #83 (**permalink**) 26.07.2017, 20:37

Сообщение от ФедорН

Все ок.

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

Поле можно добавлять используя ранее заготовленный шаблон, который описан в переменной или хранится как данные в атрибуте кнопки Добавить:

<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>

ФедорН · #84 (**permalink**) 03.08.2017, 09:32

laimas, прошу прощения, только сейчас увидел ваше последнее сообщение. Вы имели в виду, что первая строка требует проверки перед тем, как добавить следующую или же перед тем, как перейти к форме заказа?
Но что-то в коде не так: перестали работать калькулятор и кнопка "добавить", с первой же строки калькулятора появилась не кликабельная "удалить".
В html были несколько ошибок (видимо, образовались в процессе копирования): съехал <button data-ins=' и <div class="clearfix"></div>, и как понимаю, это лишний кусок: <div><textarea></textarea></div>
<a>Send</a>
Это я поправил. Но скрипт не могу.

laimas · #85 (**permalink**) 03.08.2017, 09:51

Сообщение от ФедорН

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

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

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

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

ФедорН · #86 (**permalink**) 03.08.2017, 10:17

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 · #87 (**permalink**) 03.08.2017, 10:27

Сообщение от ФедорН

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

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

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

ФедорН · #88 (**permalink**) 03.08.2017, 10:50

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

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

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

laimas · #89 (**permalink**) 03.08.2017, 11:28

Сообщение от ФедорН

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

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

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

Сообщение от ФедорН

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

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

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

ФедорН · #90 (**permalink**) 03.08.2017, 11:51

Сообщение от laimas

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

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

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

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

Форум

Справочник

Discord чат

Курсы javascript