I have been working on a conversion calculator, we need the numbers to include ',' to make larger numbers to read. For example, the form currently outputs numbers like 10000 but we need it to be like 10,000. This should occur when the calculation takes place aswell.
Any help would be much appreciated :)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre> <style>
*,
:after,
:before {
box-sizing: border-box;
}
pre {
display: none;
}
.entry-title {
display: none;
}
h1.entry-title {
display: none;
}
.page-roi-calculator .inner-banner {
padding: 166px 0px 182px;
text-align: center;
}
.page-roi-calculator .inner-banner p{
margin: 0 auto;
}
.page-roi-calculator .inner-background {
background-size: 50% 100%;
}
.calculator {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.calculator .row {
padding-top: 18px;
padding-bottom: 18px;
background: #fff;
}
.calculator .row:nth-child(even) {
background: #f0f0f0;
}
.calculator .row:last-child {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
h3 {
margin: 0px;
font-size: 18px;
font-weight: 300;
}
.calculator .row:first-child:before {
content: '';
background: url(/wp-content/uploads/2020/12/calculator-icon-02.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 170px;
height: 170px;
display: block;
position: absolute;
top: -140px;
left: -140px;
}
.calculator .row:first-child .col-sm-4:last-child:before {
content: '';
background: url(/wp-content/uploads/2020/12/calculator-icon-01.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 170px;
height: 170px;
display: block;
position: absolute;
top: -140px;
right: -140px;
}
.calculator .row:last-child:before {
content: '';
background: url(/wp-content/uploads/2020/12/calculator-icon-04.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 170px;
height: 170px;
display: block;
position: absolute;
bottom: -80px;
left: -140px;
}
.calculator .row:last-child .col-sm-4:last-child:after {
content: '';
background: url(/wp-content/uploads/2020/12/calculator-icon-03.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 210px;
height: 170px;
display: block;
position: absolute;
bottom: -160px;
right: -130px;
transform: rotate(-30deg);
}
.calculator input {
background: none;
border: none;
width: 100%;
padding: 0px;
margin-bottom: 0px;
outline: none;
}
.calculator-left-column {
padding-right: 30px;
font-size: 18px;
}
.calculator-left-column i {
position: absolute;
right: 20px;
}
.info-box {
position: absolute;
right: -230px;
top: 0;
max-width: 200px;
background: #122b33;
color: #fff;
padding: 10px;
z-index: 10;
display: none;
}
.calculator-left-column:hover > .info-box{
display: block;
}
.calculator-popup {
margin: 0;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
background: #fff;
max-width: 800px;
border-radius: 8px;
padding: 30px;
display: none;
text-align: center;
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
z-index: 999;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.calculator-popup h3 {
color: #2992c1;
font-size: 44px;
font-weight: 600;
margin: 20px 0px 30px;
}
.calculator-popup p {
color: #122b33;
}
.calculator-popup .select-wrapper, .select-wrapper select {
width: 100%;
}
.calculator-button {
background: #2992c1;
display: table;
color: #fff;
padding: 8px 50px;
font-size: 18px;
text-transform: uppercase;
margin: 50px auto;
text-align: center;
cursor: pointer;
border-radius: 8px;
font-weight: 600;
}
.calculator-popup form div input, .calculator-popup form div select{
width: 100%;
padding: 8px;
margin-bottom: 10px;
}
.calculator-popup form div label {
color: #fff;
text-align: left;
width: 100%;
}
.calculator-popup form {
max-width: 600px;
margin: 0 auto;
margin-top: 40px;
}
.calculator-banner {
text-align: center;
padding: 97px 0px 80px 0px;
}
.calculator-popup-close {
position: absolute;
right: 40px;
color: #122b33;
font-size: 30px;
top: 20px;
cursor: pointer;
}
.calculator .row:first-child {
background: #2992c1;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: #fff;
font-size: 22px;
font-weight: 600;
}
.calculator .row:first-child p {
color: #fff;
margin-top: 0px;
}
.nofill {
color: #9e9e9e;
}
.calculator .row {
font-size: 16px;
margin: 0px;
}
.calculator .row input {
font-weight: 500;
}
</style>
</pre>
<div class="inner-banner bg-grey">
<div class="wrapper">
<h1>Conversion <strong>Calculator</strong></h1>
<p class="">Fill out all the details below to see how we could turbo-charge your lead generation.</p>
</div>
</div>
<div class="inner-background">
<div class="wrapper">
<div class="calculator">
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<h3> <strong>Without</strong></h3>
</div>
<div class="col-sm-4">
<h3><strong>With</strong></h3>
</div>
</div>
<div class="row">
<div class="col-sm-4 calculator-left-column">
Website visitors per month <sup class="questionmark">?</sup>
<div class="info-box">Enter the number of visitors to your site every month</div>
</div>
<div class="col-sm-4">
<input type="number" class="input" id="without-lf-visitors" onkeyup="$('#with-lf-visitors').val($(this).val())" onchange="$('#with-lf-visitors').val($(this).val())" value="10000"></div>
<div class="col-sm-4">
<input type="number" class="input readonly" id="with-lf-visitors" onkeyup="$('#without-lf-visitors').val($(this).val())" onchange="$('#without-lf-visitors').val($(this).val())" value="10000"></div>
</div>
<div class="row">
<div class="col-sm-4 calculator-left-column">
Standard form fill conversion % <sup class="questionmark">?</sup>
<div class="info-box">Enter your website conversion-rate (the average is 2%)</div>
</div>
<div class="col-sm-4">
<input type="number" class="input" id="without-lf-conversion" onkeyup="$('#with-lf-conversion').val($(this).val())" onchange="$('#with-lf-conversion').val($(this).val())" value="2"></div>
<div class="col-sm-4">
<input type="number" class="input" id="with-lf-conversion" onkeyup="$('#without-lf-conversion').val($(this).val())" onchange="$('#without-lf-conversion').val($(this).val())" value="2"></div>
</div>
<div class="row">
<div class="col-sm-4 calculator-left-column">
Number of form fill inquiries <sup class="questionmark">?</sup>
<div class="info-box">The number of inquiries generated</div>
</div>
<div class="col-sm-4">
<input type="number" class="input nofill" id="without-lf-formfillenquiries" onkeyup="$('#with-lf-formfillenquiries, #without-lf-opportunities').val($(this).val())" onchange="$('#with-lf-formfillenquiries, #without-lf-opportunities').val($(this).val())" value="200" readonly=""></div>
<div class="col-sm-4">
<input type="number" class="input readonly nofill" id="with-lf-formfillenquiries" onkeyup="$('#without-lf-formfillenquiries').val($(this).val())" onchange="$('#without-lf-formfillenquiries').val($(this).val())" value="200" readonly=""></div>
</div>
<div class="row">
<div class="col-sm-4 calculator-left-column">
Conversion from identified website visitors <sup class="questionmark">?</sup>
<div class="info-box">The average conversion percentage of through the Web Insights software</div>
</div>
<div class="col-sm-4"></div>
<div class="col-sm-4">
<input type="number" class="input readonly nofill " id="with-lf-identifiedvisitors" value="5" readonly=""></div>
</div>
<div class="row">
<div class="col-sm-4 calculator-left-column">
Number of website visitor conversions <sup class="questionmark">?</sup>
<div class="info-box">Total conversions through the Web Insights software</div>
</div>
<div class="col-sm-4"></div>
<div class="col-sm-4">
<input type="number" class="input readonly nofill" id="with-lf-visitorconversions" value="500" readonly=""></div>
</div>
<div class="row">
<div class="col-sm-4 calculator-left-column">
Total number of opportunities <sup class="questionmark">?</sup>
<div class="info-box">The number of opportunities generated</div>
</div>
<div class="col-sm-4">
<input type="number" class="input readonly nofill " id="without-lf-opportunities" value="200" readonly=""></div>
<div class="col-sm-4">
<input type="number" class="input readonly nofill " id="with-lf-opportunities" value="700" readonly=""></div>
</div>
<div class="row">
<div class="col-sm-4 calculator-left-column">
Conversion of opportunities to sales (%) <sup class="questionmark">?</sup>
<div class="info-box">What percentage of opportunities convert to sales?</div>
</div>
<div class="col-sm-4">
<input type="number" class="input readonly" id="without-conversion-percentage" onkeyup="$('#with-lf-conversion-percentage').val($(this).val())" onchange="$('#without-lf-conversion-percentage').val($(this).val())" value="20" max="100"></div>
<div class="col-sm-4">
<input type="number" class="input readonly" id="with-lf-conversion-percentage" onkeyup="$('#without-conversion-percentage').val($(this).val())" onchange="$('#without-conversion-percentage').val($(this).val())" value="20" max="100"></div>
</div>
<div class="row">
<div class="col-sm-4 calculator-left-column">
Number of sales <sup class="questionmark">?</sup>
<div class="info-box">The total number sales closed</div>
</div>
<div class="col-sm-4">
<input type="number" class="input readonly nofill" id="without-number-sales" value="40" readonly=""></div>
<div class="col-sm-4">
<input type="number" class="input readonly nofill" id="with-number-sales" value="40" readonly=""></div>
</div>
<div class="row">
<div class="col-sm-4 calculator-left-column">
Average order value <sup class="questionmark">?</sup>
<div class="info-box">Enter the Average Order Value (AOV) for your business ($)</div>
</div>
<div class="col-sm-4">
<input type="number" class="input readonly" id="without-average-value" onkeyup="$('#with-average-value').val($(this).val())" onchange="$('#with-average-value').val($(this).val())" value="1000"></div>
<div class="col-sm-4">
<input type="number" class="input readonly" id="with-average-value" onkeyup="$('#without-average-value').val($(this).val())" onchange="$('#without-average-value').val($(this).val())" value="1000"></div>
</div>
</div>
<div class="calculator-button">Calculate</div>
<div class="calculator-popup">
<div class="calculator-popup-close">x</div>
<h3>Make $<span class="calculator-total">1,680,000</span> a reality</h3>
<p class="">With Web Insights, you could generate $1,680,000 $<span class="calculator-total">1,680,000</span> of revenue.</p>
<p class="">Enter your details below to get your free trial started and begin maximizing revenue today.</p>
[contact-form-7 id="919" title="ROI Calculator"]
<div class="row" style="display: none;">
<div class="col-sm-4 calculator-left-column">Revenue Generated
<div class="info-box">How much revenue does this generate?</div>
</div>
<div class="col-sm-4"><span class="calculator-dollar"><input id="without-revenue-generated" class="input readonly" type="number" value="40000"></span></div>
<div class="col-sm-4"><span class="calculator-dollar"><input id="with-revenue-generated" class="input readonly" type="number" value="140000"></span></div>
</div>
<div class="row" style="display: none;">
<div class="col-sm-4 calculator-left-column">12 Month Business Benefit
<div class="info-box">The business benefit over one year</div>
</div>
<div class="col-sm-4"><span class="calculator-dollar"><input id="without-year-benefit" class="input readonly" type="number" value="480000"></span></div>
<div class="col-sm-4"><span class="calculator-dollar"><input id="with-year-benefit" class="input readonly" type="number" value="1680000"></span></div>
</div>
</div>
</div>
</div>
<pre><script>
$('#without-lf-visitors, #with-lf-visitors, #without-lf-conversion, #with-lf-conversion, #without-lf-formfillenquiries, #with-lf-formfillenquiries, #with-lf-identifiedvisitors, #with-lf-visitorconversions, #without-lf-opportunities, #with-lf-opportunities, #without-conversion-percentage, #with-lf-conversion-percentage, #without-number-sales, #with-number-sales, #without-average-value, #with-average-value, #without-revenue-generated, #with-revenue-generated, #without-year-benefit, #with-year-benefit').change(function() {
var withoutlfvisitors = parseFloat($('#without-lf-visitors, #with-lf-visitors').val())
var withoutlfconversion = parseFloat($('#without-lf-conversion, #with-lf-conversion').val())
var withoutlfformfillenquiries = parseFloat($('#without-lf-formfillenquiries').val())
var withlfidentifiedvisitors = 5;
var withoutlfopportunities = parseFloat($('#without-lf-opportunities').val())
$('#without-lf-formfillenquiries, #with-lf-formfillenquiries, #without-lf-opportunities').val(Math.round(withoutlfvisitors * withoutlfconversion / 100)) // Number of Form Fill Inquiries
$('#with-lf-visitorconversions').val(Math.round(withoutlfvisitors * withlfidentifiedvisitors / 100)) // Number of LF Visitor Conversions
});
$('#without-lf-visitors, #with-lf-visitors, #without-lf-conversion, #with-lf-conversion, #without-lf-formfillenquiries, #with-lf-formfillenquiries, #with-lf-identifiedvisitors, #with-lf-visitorconversions, #without-lf-opportunities, #with-lf-opportunities, #without-conversion-percentage, #with-lf-conversion-percentage, #without-number-sales, #with-number-sales, #without-average-value, #with-average-value, #without-revenue-generated, #with-revenue-generated, #without-year-benefit, #with-year-benefit').change(function() {
var withlfformfillenquiries = parseFloat($('#with-lf-formfillenquiries').val())
var withlfvisitorconversions = parseFloat($('#with-lf-visitorconversions').val())
$('#with-lf-opportunities').val(Math.round(withlfvisitorconversions + withlfformfillenquiries)) // Total Number of Opportunities
});
$('#without-lf-visitors, #with-lf-visitors, #without-lf-conversion, #with-lf-conversion, #without-lf-formfillenquiries, #with-lf-formfillenquiries, #with-lf-identifiedvisitors, #with-lf-visitorconversions, #without-lf-opportunities, #with-lf-opportunities, #without-conversion-percentage, #with-lf-conversion-percentage, #without-number-sales, #with-number-sales, #without-average-value, #with-average-value, #without-revenue-generated, #with-revenue-generated, #without-year-benefit, #with-year-benefit').change(function() {
var withoutlfopportunities = parseFloat($('#without-lf-opportunities').val())
var withlfopportunities = parseFloat($('#with-lf-opportunities').val())
var withoutconversionpercentage = parseFloat($('#without-conversion-percentage').val())
var withconversionpercentage = parseFloat($('#with-lf-conversion-percentage').val())
$('#without-number-sales').val(Math.round(withoutlfopportunities * withoutconversionpercentage / 100)) // Number of LF Visitor Conversions
$('#with-number-sales').val(Math.round(withlfopportunities * withconversionpercentage / 100))
});
$('#without-lf-visitors, #with-lf-visitors, #without-lf-conversion, #with-lf-conversion, #without-lf-formfillenquiries, #with-lf-formfillenquiries, #with-lf-identifiedvisitors, #with-lf-visitorconversions, #without-lf-opportunities, #with-lf-opportunities, #without-conversion-percentage, #with-lf-conversion-percentage, #without-number-sales, #with-number-sales, #without-average-value, #with-average-value, #without-revenue-generated, #with-revenue-generated, #without-year-benefit, #with-year-benefit').change(function() {
var withoutaveragevalue = parseFloat($('#without-average-value').val())
var withaveragevalue = parseFloat($('#with-average-value').val())
var withoutrevenuegenerated = parseFloat($('#without-revenue-generated').val())
var withrevenuegenerated = parseFloat($('#without-revenue-generated').val())
var withoutnumbersales = parseFloat($('#without-number-sales').val())
var withnumbersales = parseFloat($('#with-number-sales').val())
$('#without-revenue-generated').val(Math.round(withoutnumbersales * withoutaveragevalue))
$('#with-revenue-generated').val(Math.round(withnumbersales * withoutaveragevalue))
});
$('#without-lf-visitors, #with-lf-visitors, #without-lf-conversion, #with-lf-conversion, #without-lf-formfillenquiries, #with-lf-formfillenquiries, #with-lf-identifiedvisitors, #with-lf-visitorconversions, #without-lf-opportunities, #with-lf-opportunities, #without-conversion-percentage, #with-lf-conversion-percentage, #without-number-sales, #with-number-sales, #without-average-value, #with-average-value, #without-revenue-generated, #with-revenue-generated, #without-year-benefit, #with-year-benefit').change(function() {
var yearbenefit = 12
var withoutrevenuegenerated = parseFloat($('#without-revenue-generated').val())
var withrevenuegenerated = parseFloat($('#with-revenue-generated').val())
$('#without-year-benefit').val(Math.round(withoutrevenuegenerated * yearbenefit))
$('#with-year-benefit').val(Math.round(withrevenuegenerated * yearbenefit))
});
$('.calculator-button').click(function() {
$('.calculator-popup').show(500);
});
$('.calculator-popup-close').click(function() {
$('.calculator-popup').hide(500);
});
$('input').on('keydown, keyup, change', function () {
var texInputValue = $('#with-year-benefit').val();
$('.calculator-total').html(texInputValue);
});
</script>
</pre>