Помощь с кредитным калькулятором

[Nik_Dev]

Доброго времени суток.

Помогите переделать калькулятор, пожалуйста.
Готов заплатить за помощь в пределах разумного

Нужно сделать, чтоб поле "Гривен в день" было visible, если срок кредите до 30 дней, если больше 30, то это поле нужно сделать hide и вместо него показать поле "Гривен в месяц" (соотвественно поле "Гривен в месяц" hide, по срок кредита не будет больше 30).

И чтоб в поле "Гривен в день" считало сумму в день (до 3000 гривен и до 30 дней без процентов ), а в поле "Гривен в месяц" сумму в месяц какую вносить.




Посмотреть можно тут
https://molnimoney.top/

Вот сам калькулятор

$(function() {
	// start input tap
	$('input#money-range').on('input', function(e){
  var min = e.target.min,
      max = e.target.max,
      val = e.target.value;

  $(e.target).css({
    'backgroundSize': (val - min) * 100 / (max - min) + '% 100%'
  });

})


.trigger('input');
$('input#data-range').on('input', function(e){
var min = e.target.min,
		max = e.target.max,
		val = e.target.value;

$(e.target).css({
	'backgroundSize': (val - min) * 100 / (max - min) + '% 100%'
});

})


.trigger('input');
    $("input#money-range").on('input', function(){
      $(this).prev().prev().val(this.value);
			var moneyPercent = this.value;
			var moneyCommon = (moneyPercent*0.1)/310;
			$("#money-display").text(parseInt(moneyCommon));
			var innerData = parseInt(moneyPercent) + parseInt(moneyCommon);
			$("#common-display").text(parseInt(innerData));
    });
		$("input#data-range").on('input', function(){
      $(this).prev().prev().val(this.value);
			var dataPercent = this.value;
			var moneyValue = $("input#money").val();
			moneyData = (moneyValue*0.2)/500;
			var innerData = moneyData * dataPercent + parseInt(moneyValue);
			$("#common-display").text(parseInt(innerData));

            // date

            $("#data-display").text(parseInt(dataPercent));
            // end date
    });

    $('#money-range').on('#money', function(){
        $('#money').val($('#money-range').val());
    });

    $('#money').on('keyup', function(){
        $('#money-range').val($('#money').val());
    });

    $('#data-range').on('#data', function(){
        $('#data').val($('#data-range').val());
    });

    $('#data').on('keyup', function(){
        $('#data-range').val($('#data').val());
    });
});


$(function() {

// 5 charachters limit
    var max_chars = 5;

    $('#money').keydown(function (e) {
        if ($(this).val().length >= max_chars) {
            $(this).val($(this).val().substr(0, max_chars));
        }
    });

    $('#money').keyup(function (e) {
        if ($(this).val().length >= max_chars) {
            $(this).val($(this).val().substr(0, max_chars));
        }
    });
});


$(function() {
// 4 charachters limit
    var max_chars = 4;

    $('#data').keydown(function (e) {
        if ($(this).val().length >= max_chars) {
            $(this).val($(this).val().substr(0, max_chars));
        }
    });

    $('#data').keyup(function (e) {
        if ($(this).val().length >= max_chars) {
            $(this).val($(this).val().substr(0, max_chars));
        }
    });
});

<div class="calc-box">
                    <form action="/profile/" method="GET">
                        <div class="calc-top-content">

                            <div class="input-money">
                                <label for="money">Сумма</label>
                                <input id="money" type="number" name="credit_size" min="100" max="50000" value="5000">
                                <span class="coin"><img src="" alt="Coin"></span>
                                <input type="range" id="money-range" min="100" max="50000" step="100" value="3000">
                                <span class="min-money">100</span>
                                <span class="max-money">50000</span>
                            </div>
                           <div class="input-data">
                                <label for="data">Срок кредита</label>
                                <input id="data" type="number" name="credit_term" min="5" max="1825" maxlength="4" value="25">
                                <span class="coin">дней</span>
                                <input type="range" min="5" id="data-range" max="1825" step="1" value="30">
                                <span class="min-data">5</span>
                                <span class="max-data">1825</span>
                            </div>
                            <div class="send-button hidden-xs hidden-sm">
                                <button type="submit">Получить кредит</button>
                            </div>

                        </div>
                        <div class="calc-bottom-data">
                            <div class="bottom-data"><p>Гривен в день: <span id="money-display">2</span><img src="" alt="Money"></p></div>
                            <div class="bottom-data"><p>Вернуть через: <span id="data-display">25</span></p></div>
                            <div class="bottom-data bt-flex-right"><p>Всего: <span id="common-display">5050</span><img src="" alt="Money"></p></div>
                        </div>
                        <div class="calc-bottom-data hidden-button-box hidden-lg hidden-md">
                            <div class="bottom-data bd-right"><button type="submit">Получить кредит</button></div>
                        </div>
                    </form>
                </div>

[laimas]

Зачем столько объявлений $(function()? Код строк 74-84 и 92-102 идентичны, хватит одного обработчика.

PS. Не только эти обработчики "дублируются", но и другие тоже.

А это что такое $('#money-range').on('#money'?

[Nik_Dev]

Зачем столько объявлений $(function()? Код строк 74-84 и 92-102 идентичны, хватит одного обработчика.

PS. Не только эти обработчики "дублируются", но и другие тоже.

А это что такое $('#money-range').on('#money'?

Честно без понятия, я его сам выдрал с другого сайта и немного переделал под себя значения и поля.

Конкретно это строчка "$('#money-range').on('#money', function(){" передвигает ползунок если данные вводятся в поле input, вроде бы.
Но это мои предположения, я в js не силен.

[laimas]

я его сам выдрал с другого сайта

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

Почему две кнопки отправления формы с одинаковой смысловой операцией?
Зачем поля типа number дублируются полями типа range?

Конкретно это строчка "$('#money-range').on('#money', function(){" передвигает ползунок

Ничего она не передвигает, это синтаксическая ошибка.

[Nik_Dev]

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

Почему две кнопки отправления формы с одинаковой смысловой операцией?
Зачем поля типа number дублируются полями типа range?



Ничего она не передвигает, это синтаксическая ошибка.

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

[laimas]

Тогда я не знаю

А кто должен знать? Если нужен ползунок для ввода и при этом обеспечить и ручной ввод, то range + number не лучший выбор, так как последний также имеет элементы управления (кнопки), и достаточно его одного. Но при этом проверять длину введенного значения при заданном максимальном не имеет смысла так как длина может равна длине максимального, но не равна ей в абсолютном значении.

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

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

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

Бутылку готов оплатить

Не страдаю этим

[Nik_Dev]

А кто должен знать? Если нужен ползунок для ввода и при этом обеспечить и ручной ввод, то range + number не лучший выбор, так как последний также имеет элементы управления (кнопки), и достаточно его одного. Но при этом проверять длину введенного значения при заданном максимальном не имеет смысла так как длина может равна длине максимального, но не равна ей в абсолютном значении.

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

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

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



Не страдаю этим

Судя по всем тот кто писал этот код, тот и знает ))

По поводу второй кнопки submit спасибо, даже не замечал, уже исправил.


Знаю что код го*н и как переписать я не знаю.
Но может подскажите как это реализовать?

Нужно сделать, чтоб поле "Гривен в день" было visible, если срок кредите до 30 дней, если больше 30, то это поле нужно сделать hide и вместо него показать поле "Гривен в месяц" (соотвественно поле "Гривен в месяц" hide, по срок кредита не будет больше 30).

И чтоб в поле "Гривен в день" считало сумму в день (до 3000 гривен и до 30 дней без процентов ), а в поле "Гривен в месяц" сумму в месяц какую вносить.

Через if, else, как я понимаю и не знаю куда и что писать.
Но js я совсем не знаю и времени разбираться если честно вообще нет.
Поэтому и прошу помощи и готов предложить вознаграждение.

[laimas]

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

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

Управление (ввод данных) вот таким интерфейсом это нормально - https://screenshots.firefox.com/MsW2ZgGGU9uF12xr/null ? Я могу согласиться что-то сделать, но никак не с таким набором. Кроме этого элементы типа number и range, это HTML5, то есть браузеры-инвалиды не будут поддерживать ваш калькулятор. Если вы не в курсе и этого, а поддержка нужна, то может плагин использовать, коих в сети найти не сложно?

[Nik_Dev]

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

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

Управление (ввод данных) вот таким интерфейсом это нормально - https://screenshots.firefox.com/MsW2ZgGGU9uF12xr/null ? Я могу согласиться что-то сделать, но никак не с таким набором. Кроме этого элементы типа number и range, это HTML5, то есть браузеры-инвалиды не будут поддерживать ваш калькулятор. Если вы не в курсе и этого, а поддержка нужна, то может плагин использовать, коих в сети найти не сложно?

Без понятия как и что здесь сделано, я делал frontend в этом сайте.
Человек который делал вёрстку и всё остальное пропал, меня попросили поправить, так как я один из тех кто создавал сайт.

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

Я ведь изначально написал что мне нужно реализовать, а не кто и что делал на данном сайте.

Можете помочь - помогите, нет значит буду искать в другом месте и не буду тратить ни мое, ни Ваше время.

[laimas]

Сделать можно, но нужно представлять среду в которой это будет работать. Я просто смотрю код формы, вижу что-то от бутстрапа, но в тоже время остальное скажем так не вяжется с ним, да еще упоминание, что это выдрано с другого сайта. А вот по ссылке https://molnimoney.top/ я вижу разумную форму, и там нет бустрапа.

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

PS. Изучил код по ссылке - весь бардак от того, что не во всех браузерах форма выглядит нормально (проблемы со стилями). Но лучше решить заменой поля number на обычное поле, так как в IE будет дополнительная проблема.