Sending data from calculator form to other page form in Laravel and JS

Question

I apologize in advance for my English but I am a Slovak and I also helped a bit with Google Translator :)

I hope to find help here for my problem ...

I have a loan calculator examples will be given below.

I try to make sure that when I have a calculator on the domain.xx/loan page, I need to achieve that when I choose the loan amount, loan maturity and when I click the button I want the page to redirect to domain.xx/request ... where the form will be ready

The problem is that I don't know how to send the information from the calculator to the second page so that it is attached to the form that will be filled in and it will be sent to the DB

I hope you understand my problem.

I use: Laravel and JS

 $("document").ready(function() { const rangeSliderAmount = document.querySelector('.lc-range-slider-amount'); const rangeSliderMonth = document.querySelector('.lc-range-slider-month'); const rangeValueBarAmount = document.querySelector('#lc-range-value-bar-amount'); const rangeValueBarMonth = document.querySelector('#lc-range-value-bar-month'); const rangeValueAmount = document.querySelector('#lc-range-value-amount'); const rangeValueMonth = document.querySelector('#lc-range-value-month'); const rangeAmount = document.getElementById("lc-amount"); const rangeMonth = document.getElementById("lc-month"); let isDown = false; function dragHandler() { isDown = !isDown; if (!isDown) { rangeValueAmount.style.setProperty('opacity', '0'); rangeValueMonth.style.setProperty('opacity', '0'); } else { rangeValueAmount.style.setProperty('opacity', '0'); rangeValueMonth.style.setProperty('opacity', '0'); } } function dragOn(e) { if (!isDown) return; rangeValueHandler(); } function rangeValueHandler() { amountPercentage = `${((rangeSliderAmount.value - 500) * 100) / (6000 - 500)}%`; monthPercentage = `${((rangeSliderMonth.value - 6) * 100) / (60 - 6)}%`; rangeValueBarAmount.style.setProperty('width', amountPercentage); rangeValueBarMonth.style.setProperty('width', monthPercentage); rangeValueAmount.innerHTML = `${rangeSliderAmount.value}`; rangeValueMonth.innerHTML = `${rangeSliderMonth.value}`; rangeAmount.innerHTML = `${rangeSliderAmount.value}`; rangeMonth.innerHTML = `${rangeSliderMonth.value}`; vypocetSplatka(); } rangeValueHandler(); rangeSliderAmount.addEventListener('mousedown', dragHandler); rangeSliderAmount.addEventListener('mousemove', dragOn); rangeSliderAmount.addEventListener('mouseup', dragHandler); rangeSliderAmount.addEventListener('click', rangeValueHandler); rangeSliderAmount.addEventListener('touchstart', dragHandler); rangeSliderAmount.addEventListener('touchmove', dragOn); rangeSliderAmount.addEventListener('touchend', dragHandler); rangeSliderAmount.addEventListener('touchstart', rangeValueHandler); rangeSliderMonth.addEventListener('mousedown', dragHandler); rangeSliderMonth.addEventListener('mousemove', dragOn); rangeSliderMonth.addEventListener('mouseup', dragHandler); rangeSliderMonth.addEventListener('click', rangeValueHandler); rangeSliderMonth.addEventListener('touchstart', dragHandler); rangeSliderMonth.addEventListener('touchmove', dragOn); rangeSliderMonth.addEventListener('touchend', dragHandler); rangeSliderMonth.addEventListener('touchstart', rangeValueHandler); function slideValue(inputElement) { var sliderElement = inputElement.closest('.lc-ranger-box').find('.slider'); var val = parseInt(inputElement.val().replace(' ', '')) || 0; var sliderMax = $(sliderElement).slider('option', 'max'); var sliderMin = $(sliderElement).slider('option', 'min'); if (val > sliderMax) { val = sliderMax; } if (val < sliderMin) { val = sliderMin; } $(sliderElement).slider('value', val); val = formatNumber(val, 0, ',', ' '); if (inputElement.val() !== val) { inputElement.val(val); } } $('.slider-value .value').change(function(){ slideValue($(this)); vypocetSplatka(); }); vypocetSplatka(); $('.insurance-box').on('change', 'input[name=poistenie]', function(){ vypocetSplatka(); }); function formatNumber(number, decimals, dec_point, thousands_sep) { var str = number.toFixed(decimals ? decimals : 0).toString().split('.'); var parts = []; for (var i = str[0].length; i > 0; i -= 3) { parts.unshift(str[0].substring(Math.max(0, i - 3), i)); } str[0] = parts.join(thousands_sep ? thousands_sep : ','); return str.join(dec_point ? dec_point : '.'); } function vypocetSplatka() { var mesiace = parseInt($('[data-value="months"]').html()); var pozicka = parseInt($('[data-value="loan"]').html().replace(' ', '')); var poplatok = (pozicka / 100) * 2; $('.hascharge').show(); if(pozicka <= -1){ poplatok = 0; $('.hascharge').hide(); } var benefit = 2; var perc, payment_mpr, payment_mpr_full, insurance, payment_month, payment_month_full, suma, suma_full, rateValue, rpmn; $('[data-value="charge"]').text(poplatok); $('[data-value="months-val"]').text(mesiace); $('span[data-value="loan"]').text(price_format(pozicka)); if (pozicka <= 300) { perc = 15.18; } else if (pozicka <= 700) { perc = 13.9; } else if (pozicka <= 1499) { perc = 11.4; } else { perc = 8.9; } if (pozicka <= 300 && mesiace<=60 && mesiace>=6) { perc = 15.18; } else if (pozicka <= 679 && mesiace<=60 && mesiace>=6) { perc = 13.9; } else if (pozicka <= 720 && mesiace<=60 && mesiace>=6) { perc = 10.01; } else if (pozicka <= 1499 && mesiace<=60 && mesiace>=6) { perc = 11.4; } else if (mesiace<=60 && mesiace>=6) { perc = 8.9; } var diff = (Math.round((perc - benefit) * 100) / 100).toFixed(2); diff = diff.replace('.', ','); $('[data-value="interest"]').text(diff); var pmt_ir_full = perc / 1200; var pmt_ir = (perc - benefit) / 1200; //pmt_ir = 13.9 / 1200; var pmt_np = mesiace; var pmt_pv = -pozicka; if (pmt_np > 0 && pmt_pv < 0) { payment_mpr = pmt(pmt_ir, pmt_np, pmt_pv); payment_mpr_full = pmt(pmt_ir_full, pmt_np, pmt_pv); $('.insurance-label').text(''); // poistenie insurance = 0; if ($('input[name=poistenie]:checked').val() === '1') { insurance += 0.081 * pozicka / 100; $('.insurance-label').text('vrátane poistenia'); } if ($('input[name=poistenie]:checked').val() === '2') { insurance += 0.148 * pozicka / 100; $('.insurance-label').text('vrátane poistenia'); } //payment_mpr += ' €'; payment_month = rd(payment_mpr + insurance); payment_month_full = rd(payment_mpr_full + insurance); payment_mpr = rd(payment_mpr); suma = payment_month * mesiace + poplatok; suma_full = payment_month_full * mesiace + poplatok; $('#clientsave').html(price_format(suma_full - suma) + ' &euro;'); } else { payment_mpr = ''; } $('[data-value="fee"]').html(price_format(payment_month)); $('[data-value="fee-val"]').text(price_format(payment_mpr)); rateValue = rate(pmt_np, payment_mpr, -pozicka + poplatok); rpmn = (Math.pow(rateValue + 1, 12) - 1) * 100; $('[data-value="rpmn-val"]').text(price_format(rpmn)); $('[data-value="sum"]').text(price_format(payment_mpr * mesiace + poplatok)); $('#vyskaF').val(pozicka); $('#splatnostF').val(mesiace); if ($('input[name=poistenie]:checked').val() === '0') { $('#poistenieF').val("bez poistenia"); }; if ($('input[name=poistenie]:checked').val() === '1') { $('#poistenieF').val("základnĂ©"); }; if ($('input[name=poistenie]:checked').val() === '2') { $('#poistenieF').val("rozšĂÂrenĂ©"); }; //bez benefitu repre priklad *NEW 16.11:2017 -- START var diffWo = (Math.round((perc) * 100) / 100).toFixed(2); diffWo = diffWo.replace('.', ','); payment_mpr_full = rd(payment_mpr_full); var rateValue_full, rpmn_full; rateValue_full = rate(pmt_np, payment_mpr_full, -pozicka + poplatok); rpmn_full = (Math.pow(rateValue_full + 1, 12) - 1) * 100; $('[data-value="interest-wo"]').text(diffWo); $('[data-value="fee-val-wo"]').text(price_format(payment_mpr_full)); $('[data-value="rpmn-val-wo"]').text(price_format(rpmn_full)); $('[data-value="sum-wo"]').text(price_format(payment_mpr_full * mesiace + poplatok)); // *NEW 16.11:2017 -- END } function rd(n) { var r = Math.round(n * 100) / 100; return r; } function price_format(number, decimals, decPoint, thousandsSep) { decimals = decimals || 2; number = parseFloat(number); if (!decPoint || !thousandsSep) { decPoint = ','; thousandsSep = ' '; } var roundedNumber = Math.round(Math.abs(number) * ('1e' + decimals)) + ''; var numbersString = decimals ? roundedNumber.slice(0, decimals * -1) : roundedNumber; var decimalsString = decimals ? roundedNumber.slice(decimals * -1) : ''; var formattedNumber = ''; while (numbersString.length > 3) { formattedNumber += thousandsSep + numbersString.slice(-3); numbersString = numbersString.slice(0, -3); } return (number < 0 ? '-' : '') + numbersString + formattedNumber + (decimalsString ? (decPoint + decimalsString) : ''); } //function pmt(ir, np, pv, fv = 0, type = 0) { //defaul value nie je vsade podporovane!!! RBR function pmt(ir, np, pv, fv, type) { var fv = (typeof fv !== 'undefined') ? fv : 0; var type = (typeof type !== 'undefined') ? type : 0; /* * ir - interest rate per month * np - number of periods (months) * pv - present value * fv - future value * type - when the payments are due: * 0: end of the period, eg end of month (default) * 1: beginning of period */ if (ir === 0) { return -(pv + fv) / np; } var pvif = Math.pow(1 + ir, np); var pmt = -ir * pv * (pvif + fv) / (pvif - 1); if (type === 1) { pmt /= (1 + ir); } return pmt; } function rate(paymentsPerYear, paymentAmount, presentValue, futureValue, dueEndOrBeginning, interest) { //If interest, futureValue, dueEndorBeginning was not set, set now if (interest == null) { interest = 0.01; } if (futureValue == null) { futureValue = 0; } if (dueEndOrBeginning == null) { dueEndOrBeginning = 0; } var FINANCIAL_MAX_ITERATIONS = 128; //Bet accuracy with 128 var FINANCIAL_PRECISION = 0.0000001; //1.0e-8 var y, y0, y1, x0, x1 = 0, f = 0, i = 0; var rate = interest; if (Math.abs(rate) < FINANCIAL_PRECISION) { y = presentValue * (1 + paymentsPerYear * rate) + paymentAmount * (1 + rate * dueEndOrBeginning) * paymentsPerYear + futureValue; } else { f = Math.exp(paymentsPerYear * Math.log(1 + rate)); y = presentValue * f + paymentAmount * (1 / rate + dueEndOrBeginning) * (f - 1) + futureValue; } y0 = presentValue + paymentAmount * paymentsPerYear + futureValue; y1 = presentValue * f + paymentAmount * (1 / rate + dueEndOrBeginning) * (f - 1) + futureValue; // find root by Newton secant method i = x0 = 0.0; x1 = rate; while ((Math.abs(y0 - y1) > FINANCIAL_PRECISION) && (i < FINANCIAL_MAX_ITERATIONS)) { rate = (y1 * x0 - y0 * x1) / (y1 - y0); x0 = x1; x1 = rate; if (Math.abs(rate) < FINANCIAL_PRECISION) { y = presentValue * (1 + paymentsPerYear * rate) + paymentAmount * (1 + rate * dueEndOrBeginning) * paymentsPerYear + futureValue; } else { f = Math.exp(paymentsPerYear * Math.log(1 + rate)); y = presentValue * f + paymentAmount * (1 / rate + dueEndOrBeginning) * (f - 1) + futureValue; } y0 = y1; y1 = y; ++i; } return rate; } });

 /*=================================================================*/ /* LOAN CALCULATOR /*=================================================================*/ .lc-wrapper { width: 100%; margin: 0 auto; padding: 5px 0; overflow: hidden; display: flex; flex-direction: row; border-radius: 10px; background: #302f4e; } .lc-ranger-content { width: 70%; padding: 0 10px; } .lc-ranger-box { width: 100%; position: relative; margin: 0; padding: 0; } .lc-ranger-box:first-child { margin-bottom: 5px; border-bottom: 1px solid #28263e; } .lc-ranger-box-top { width: 100%; padding: 7px 25px; display: flex; justify-content: space-between; align-items: center; } .lc-amount { width: 90px; height: 90px; position: relative; display: block; padding-top: 20px; line-height: 30px; text-align: center; font-size: 24px; font-weight: 700; color: #FF4C60; font-style: normal; line-height: normal; border-radius: 50%; box-sizing: border-box; transform-origin: center center; border: 5px solid #5E5C7F; background: #F9F9FF; } .lc-amount::after { display: block; content: "EUR"; font-size: 16px; letter-spacing: 0.07em; margin-top: -2px; } .lc-month { width: 90px; height: 90px; position: relative; display: block; padding-top: 20px; line-height: 30px; text-align: center; font-size: 24px; font-weight: 700; color: #FF4C60; font-style: normal; line-height: normal; border-radius: 50%; box-sizing: border-box; transform-origin: center center; border: 5px solid #5E5C7F; background: #F9F9FF; } .lc-month::after { display: block; content: "Mon."; font-size: 16px; letter-spacing: 0.07em; margin-top: -2px; } .lc-ranger-box-sliding { padding: 15px 0; position: relative; } .lc-ranger-container { position: relative; padding: 15px 0; } .lc-ranger-box-bottom { width: 100%; padding: 7px 25px; display: flex; justify-content: space-between; align-items: center; } .lc-pyment-content { width: 30%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; position: relative; padding: 0; border-left: 1px solid #28263e; } .lc-payment-head { width: 100%; padding: 5px; text-align: center; } .lc-payment-show { width: 100%; } .lc-payment { width: 200px; height: 200px; margin: 0 auto; padding-top: 60px; line-height: 60px; display: block; font-size: 36px; font-weight: 700; text-align: center; position: relative; border-radius: 100%; box-sizing: border-box; border: 5px solid #5E5C7F; background: #F9F9FF; color: #FF4C60; } .lc-payment::after { display: block; content: "EUR/MON."; font-size: 16px; letter-spacing: 0.07em; margin-top: -2px; } .lc-payment-btn { width: 100%; padding: 4px 0 8px 0; text-align: center; } .lc-text { color: #F9F9FF; } .representative-example { width: 100%; position: relative; margin: 50px 0; padding: 15px; font-size: 13px; color: #F9F9FF; border-radius: 5px; background: #302f4e !important; } .representative-example span.span-bold { font-weight: 500; color: #FF4C60; } .representative-example span { font-weight: 400; color: #FF4C60; } #lc-range-value-bar-amount { width: 100%; content: "0"; background-color: #FF4C60; position: absolute; z-index: 100; height: 25px; top: 0; margin: 0; border-radius: 5px; } #lc-range-value-bar-month { width: 100%; content: "0"; background-color: #FF4C60; position: absolute; z-index: 99; height: 25px; top: 0; margin: 0; border-radius: 5px; } input[type='range'] { width: 100%; cursor: pointer; position: absolute; top: 0; margin: 0; border-radius: 5px } input[type=range]:focus { outline: none; } input[type='range'], input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; } input[type='range']::-webkit-slider-runnable-track { width: 100%; height: 25px; cursor: pointer; animate: 0.2s; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; background: #F9F9FF; border-radius: 5px; border: 0px solid #000101; } input[type='range']::-webkit-slider-thumb { box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08); border: 14px solid #F9F9FF; height: 53px; width: 53px; border-radius: 30px; background: #FF4C60; cursor: pointer; -webkit-appearance: none; margin-top: -13.5px; position: relative; z-index: 1000; } input[type='range']::-webkit-slider-thumb::before { position: absolute; content: ''; height: 10px; /* equal to height of runnable track */ width: 500px; /* make this bigger than the widest range input element */ left: -502px; /* this should be -2px - width */ top: 8px; /* don't change this */ background: #777; } input[type=range]::-moz-range-track { width: 100%; height: 12.8px; cursor: pointer; animate: 0.2s; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; background: #353353; border-radius: 25px; border: 0px solid #000101; } input[type=range]::-moz-range-thumb { box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; border: 0px solid #000000; height: 20px; width: 39px; border-radius: 7px; background: #000000; cursor: pointer; } input[type=range]::-ms-track { width: 100%; height: 12.8px; cursor: pointer; animate: 0.2s; background: transparent; border-color: transparent; border-width: 39px 0; color: transparent; } input[type=range]::-ms-fill-lower { background: #000; border: 0px solid #000101; border-radius: 50px; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; } input[type=range]::-ms-fill-upper { background: #000; border: 0px solid #000101; border-radius: 50px; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; } input[type=range]::-ms-thumb { box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; border: 0px solid #000000; height: 20px; width: 39px; border-radius: 7px; background: #000; cursor: pointer; } /* #range-value { content:"0"; background: rgba(233, 239, 244, 0.1);; position: absolute; z-index: 10000; height: 25px; top: -65px; margin: 0; border-radius: 5px; left: 50%; transform0: translateX(-50%); font-size: 20px; padding: 12px; color: #41576B; box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08); text-align: center; opacity: 0; }*/ /*=================================================================*/ /* BUTTONS /*=================================================================*/ .btn { border-radius: 30px; font-family: "Rubik", sans-serif; font-size: 16px; font-weight: 700; overflow: hidden; line-height: 1; padding: 12px 32px; position: relative; } .btn:focus { box-shadow: none; } .btn:focus { outline: 0; } @-webkit-keyframes button-push { 50% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes hvr-push { 50% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .btn-default { color: #FFF; background: #FF4C60; display: inline-block; vertical-align: middle; position: relative; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .btn-default:hover { color: #FFF; -webkit-animation-name: button-push; animation-name: button-push; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="loan bg-shadow"> <div class="container"> <form id="loanFormSubmit" method="get" action="{{ route('request.index') }}"> @csrf <div class="container"> <div class="lc-wrapper shadow-main02s"> <div class="lc-ranger-content"> <div class="lc-ranger-box"> <div class="lc-ranger-box-top"> <span class="lc-ranger-text lc-text">Choose your loan amount</span> <span id="lc-amount" class="lc-amount">6000</span> </div> <div class="lc-ranger-box-sliding"> <div class="lc-ranger-container slider-value"> <input id="lc-range-amount" type="range" class="slider lc-range-slider-amount" min="500" max="6000" step="100" value="1000"> <span id="lc-range-value-bar-amount"></span> <span id="lc-range-value-amount" data-value="loan" class="value" style="display:none!important;">0</span> </div> </div> <div class="lc-ranger-box-bottom"> <span class="lc-ranger-text lc-text">500€</span> <span class="lc-ranger-text lc-text">6000€</span> </div> </div> <div class="lc-ranger-box"> <div class="lc-ranger-box-top"> <span class="lc-ranger-text lc-text">Choose a maturity period</span> <span id="lc-month" class="lc-month">60</span> </div> <div class="lc-ranger-box-sliding"> <div class="lc-ranger-container slider-value"> <input id="lc-range-month" type="range" class="slider lc-range-slider-month" min="6" max="60" step="1" value="24"> <span id="lc-range-value-bar-month"></span> <span id="lc-range-value-month" data-value="months" class="value" style="display:none!important;">0</span> </div> </div> <div class="lc-ranger-box-bottom"> <span class="lc-ranger-text lc-text">6 months</span> <span class="lc-ranger-text lc-text">60 months</span> </div> </div> </div> <div class="lc-pyment-content"> <div class="lc-payment-head lc-text"> <h3>Your monthly payment</h3> </div> <div class="lc-payment-show"> <span id="lc-payment-show" class="lc-payment value " data-value="fee"> 0,00 </span> </div> <div class="lc-payment-btn"> <button type="submit" class="btn btn-default" id="accept-loan"> I want a loan </button> </div> </div> </div> </div> </form> </div> </section>

My attempt added in body onload="setData()" added in loan calculator form in button onclick="submitForm()" and added in JS

 $(document).ready(function() { $("#accept-loan").click(function(e) { var loan = $("#lc-range-amount").val(); var month = $("#lc-range-month").val(); var pay = $("[data-value='fee']").html().replace(' ', ''); var url = $("#loanFormSubmit")[0].setAttribute('action', '/request'+"?loan="+loan+"&months="+month+"&pay="+pay); $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $.ajax({ url: url, method: 'post', type: 'post', data: { _token: '{{csrf_token()}}', loan: $("#loan").html(), month: $("#month").html(), pay: $("#pay").text(), }, contentType: false, processData: false, success: function( data ) { console.log(data); } }); }); }); function submitForm(){ if(typeof(localStorage) != "undefined"){ localStorage.loan = $('[data-value="loan"]').html(); localStorage.months = $('[data-value="months"]').html(); localStorage.payment = $('[data-value="fee"]').html(); } document.getElementById("loanFormSubmit").submit(); } function setData(){ if(typeof(localStorage) != "undefined"){ document.getElementById("loan").innerHTML = localStorage.loan; document.getElementById("month").innerHTML = localStorage.months; document.getElementById("pay").innerHTML = localStorage.payment; } }

Everything seems to be working as I should not know whether it is right to send information like this or whether it can be done even better

Answer 1

Hi you can receive all the data submitted in the form by using request method.

request('title') //Title is the name of the field

I suggest you follow this link to solve your problem. It shows all steps one by one.

https://vegibit.com/how-to-set-up-form-submission-in-laravel/