Develop Reference

Decimal Separator within input field

I have added a thousand separator by Javascript keyup to an input field within a standard form. Now my form cannot submit because of the comma "," in the value.
How can I edit my current code or add a new function to remove the comma when submitting the form.
Javascript Event Keyup
<script>
var cal2_txtLoan = document.getElementById('cal2_txtLoan');
cal2_txtLoan.addEventListener('keyup', function() {
var val = this.value;
val = val.replace(/[^0-9\.]/g,'');
if(val != "") {
valArr = val.split('.');
valArr[0] = (parseInt(valArr[0],10)).toLocaleString();
val = valArr.join('.');
}
this.value = val;
});
</script>
Form
<form>
<div class="row mt20">
<div class="col-md-3 col-sm-12 col-xs-12">
</div>
<div>
<input id="cal2_txtLoan" class="wpcf7-form-control wpcf7-text form-control investment-class-form" type="text" placeholder="วงเงินกู้(บาท)">
</div>
</div>
<div class="row mt20">
<div class="col-md-6 col-sm-9 col-xs-9">
<input id="cal2_txtTenor" class="wpcf7-form-control wpcf7-text form-control investment-class-form" type="number" placeholder="ระยะเวลากู้ 1-30 ปี">
</div>
</div>
<div class="row mt20">
<div class="col-md-6 col-sm-9 col-xs-9">
<input id="cal2_txtInterestRate" class="wpcf7-form-control wpcf7-text form-control investment-class-form" type="number" placeholder="ดอกเบี้ย(%)">
</div>
</div>
<div class="row mt20">
<div class="col-md-offset-3 col-md-6 col-sm-offset-0 col-sm-9 col-xs-offset-0 col-xs-9">
<div class="row">
<div class="col-xs-6">
<button type="button" id="cal2_btnCalculate" class="button investment-button">คำนวณ</button>
</div>
</div>
</div>
</div>
<div class="row mt20">
<div class="col-md-3 col-sm-12 col-xs-12">
<label class="investment-list">สรุปยอดผ่อนต่อเดือน (บาท)</label> <input id="cal2_txtInstallment" class="wpcf7-form-control wpcf7-text form-control investment-class-form" disabled="disabled" type="text"> <span class="investment-list" style="color:red;">* ผลลัพธ์จากการคำนวณ เป็นเพียงผลการคำนวณเบื้องต้นเท่านั้น โปรดติดต่อธนาคารเพื่อคำนวณยอดที่ถูกต้องอีกครั้งหนึ่ง</span>
</div>
</div>
</form>

Check out: How to convert a locale string (currency) back into a number?
let num = parseFloat(yourString.replace(/[^0-9\.]/g,''));
(You actually have the answer in your own code 😉)
Update: Here's an example.
let myString = "1,250,856.5867";
function convertToFloat(string) {
let num = parseFloat(string.replace(/[^0-9\.]/g,''));
return num;
}
/* Test the function in console */
console.log(convertToFloat(myString));
Output will be: 1250856.5867

Passing values from id element and calculate price

I am trying to create a small pricing calculator. I am passing variables from id elements(complex,subject,number_quiz) to formula to calculate and output results to id variable total.
I after passing variables to the formula, it's not calculating and not displaying any results.
function price() {
var com = document.getElementsById('complex').value;
var subject = document.getElementsById('subject').value;
var n_q = document.getElementsById('number_quiz').value;
if (subject == 5 && com == 10) {
var total = (com + subject) n_q;
document.getElementById('total').value = total;
} else if (subject == 7 && com == 10) {
var total = (com + subject) n_q;
document.getElementById('total').value = total;
}
if (subject == 5 && com == 20) {
var total = (com + subject) n_q;
document.getElementById('total').value = total;
} else if (subject == 7 && com == 20) {
var total = (com + subject) n_q;
document.getElementById('total').value = total;
}
}
<div class="container py-5">
<div class="row py-3">
<div class="col-sm-4">
<label>Subject</label>
</div>
<div class="col-sm-4">
<select class="form-control" name="subject" id="subject" onclick="price()">
<option default="">Select Subject</option>
<option value="5">Subject A</option>
<option value="7">Subject A</option>
</select>
</div>
</div>
<div class="row py-3">
<div class="col-sm-4">
<label>Complexity</label>
</div>
<div class="col-sm-4">
<select class="form-control" name="complex" id="complex">
<option default>Select Complexity</option>
<option value="10">Complex Question</option>
<option value="20">Non Complex Question</option>
</select>
</div>
</div>
<div class="row py-3">
<div class="col-sm-4">
<label>Number of questions</label>
</div>
<div class="col-sm-4">
<input type="number" name="number_quiz" id="number_quiz" max="9999" min="1" class="form-control">
</div>
</div>
<div class="row py-3">
<div class="col-sm-4">
<label>Total Net</label>
</div>
<div class="col-sm-4">
<input type="text" readonly="readonly" id="total" onkeyup="total()" name="total" class="form-control bg-white border-0">
</div>
</div>
<div class="row py-3">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
<input type="submit" class="btn btn-danger btn-lg w-50 rounded-pill">
</div>
</div>
</div>

Missing * as already mentioned
getElementById is singular
Use onChange and add it as an eventListener on the container, added benefit, any change will trigger a calculation
You have not told us the manipulation needed in the different ifs, you are missing an else there too
onkeyup="total()" does not exist, and what is it supposed to do?
Note I cast the values to number usining the unary + operator and use 0 if undefined
document.querySelector('.container').addEventListener('change', function() {
const com = +document.getElementById('complex').value || 0;
const subject = +document.getElementById('subject').value || 0;
const n_q = +document.getElementById('number_quiz').value || 0;
const total = (com + subject) * n_q;
if (subject == 5 && com == 10) {
// ...
} else if (subject == 7 && com == 10) {
// ...
} else if (subject == 5 && com == 20) {
// ...
} else if (subject == 7 && com == 20) {
// ...
}
document.getElementById('total').value = total;
});
<div class="container py-5">
<div class="row py-3">
<div class="col-sm-4">
<label>Subject</label>
</div>
<div class="col-sm-4">
<select class="form-control" name="subject" id="subject">
<option default="">Select Subject</option>
<option value="5">Subject A</option>
<option value="7">Subject A</option>
</select>
</div>
</div>
<div class="row py-3">
<div class="col-sm-4">
<label>Complexity</label>
</div>
<div class="col-sm-4">
<select class="form-control" name="complex" id="complex">
<option default>Select Complexity</option>
<option value="10">Complex Question</option>
<option value="20">Non Complex Question</option>
</select>
</div>
</div>
<div class="row py-3">
<div class="col-sm-4">
<label>Number of questions</label>
</div>
<div class="col-sm-4">
<input type="number" name="number_quiz" id="number_quiz" max="9999" min="1" class="form-control">
</div>
</div>
<div class="row py-3">
<div class="col-sm-4">
<label>Total Net</label>
</div>
<div class="col-sm-4">
<input type="text" readonly id="total" name="total" class="form-control bg-white border-0">
</div>
</div>
<div class="row py-3">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
<input type="submit" class="btn btn-danger btn-lg w-50 rounded-pill">
</div>
</div>
</div>

(com + subject)n_q
is incorrect. If you want to multiply it should be...
(com + subject) * n_q
Also the if statements are unnecessary, because you're doing the same action in all of them.

function price()
{
var com = document.getElementById('complex').value;
var subject = document.getElementById('subject').value;
var n_q = document.getElementById('number_quiz').value;
if (subject == 5 && com == 10)
{
var total = (com + subject)*n_q;
document.getElementById('total').value = total;
}
else if (subject == 7 && com == 10) {
var total = (com + subject)*n_q;
document.getElementById('total').value = total;
}
if (subject == 5 && com == 20)
{
var total = (com + subject)*n_q;
document.getElementById('total').value = total;
}
else if (subject == 7 && com == 20) {
var total = (com + subject)*n_q;
document.getElementById('total').value = total;
}
}
<div class="container py-5">
<div class="row py-3">
<div class="col-sm-4">
<label>Subject</label>
</div>
<div class="col-sm-4">
<select class="form-control" name="subject" id="subject" onclick="price()">
<option default="">Select Subject</option>
<option value="5">Subject A</option>
<option value="7">Subject A</option>
</select>
</div>
</div>
<div class="row py-3">
<div class="col-sm-4">
<label>Complexity</label>
</div>
<div class="col-sm-4">
<select class="form-control" name="complex" id="complex" >
<option default>Select Complexity</option>
<option value="10">Complex Question</option>
<option value="20">Non Complex Question</option>
</select>
</div>
</div>
<div class="row py-3">
<div class="col-sm-4">
<label>Number of questions</label>
</div>
<div class="col-sm-4">
<input type="number" name="number_quiz" id="number_quiz" max="9999" min="1" class="form-control">
</div>
</div>
<div class="row py-3">
<div class="col-sm-4">
<label>Total Net</label>
</div>
<div class="col-sm-4">
<input type="text" readonly="readonly" id="total" name="total" class="form-control bg-white border-0">
</div>
</div>
<div class="row py-3">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
<input type="button" onclick="price()" value="Submit"
class="btn btn-danger btn-lg w-50 rounded-pill">
</div>
</div>
</div>
Error 1
To do multiplication you need to use *
var total = (com + subject)*n_q;
Error 2
In your code, you had document.getElementsById which should be document.getElementById
Error 3
In your code on total, you are calling a function total on keyup, which is not defined on your javascript code
Error 4
Your calculation function price is never called

First, I believe you mean var total = (com + subject) * n_q; rather than var total = (com + subject)n_q;.
Second, all if clauses run the same code, so you can remove all the if statements and leave the code as.
Third, you need to change getElementsById to getElementById.
function price()
{
var com = document.getElementById('complex').value;
var subject = document.getElementById('subject').value;
var n_q = document.getElementById('number_quiz').value;
var total = (com + subject) * n_q;
document.getElementById('total').value = total;
}

put html in input field

I want that in the input field for a user there is predefined (in the "Einkommen" field) text (see picture).
How can I do this?
Here is my code for the other fields:
<script type="text/javascript">
function sumValues() {
var num1;
var num3;
var num4;
num1 = Number(document.formcalc.txtnum1.value);
num3 = ((num1 * 0.12) - (num1 * 0.118)) / 12;
num4 = ((num1 * 0.12) - (num1 * 0.118)) * 15500;
document.formcalc.txtres.value = 'Fr. ' + Math.round(num3) + '.-';
document.formcalc.txtres2.value = 'Fr. ' + Math.round(num4) + '.-';
// document.getElementById("result").value = res;
}
</script>

It's not really clear what you're asking.
But in HTML with JavaScript, what you have commented:
document.getElementById("result").value = "90000";
is actually correct if your intention is to set a value over the input.
Also, I'm wondering if by "predefined" you mean actual text or just a placeholder?

this is my code:
<div class="container content-center" id="margin">
<form name="formcalc">
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Einkommen</label>
<div class="col-sm-10">
<!-- <div class="input-group-addon">Fr.</div> -->
<input type="text" class="form-control" name="txtnum1">
</div>
</div>
<fieldset disabled>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Dein Ersparniss / Jahr</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="txtres" readonly>
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Verlust Stadt Wil / Jahr</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="txtres2" readonly>
</div>
</div>
</fieldset>
<input type="button" class="btn btn-danger" value="Berechnen" onClick="sumValues()">
</form>
<hr class="featurette-divider">
<section class="container">
<p class="lead" id="lead"> Ist es dir Wert, dass deine Stadt pro Jahr XXX weniger Budget zur Verfügung hat
und du XXX mehr pro Jahr in der Tasche hast?
</p>
</section>
<hr class="featurette-divider">
<small class="d-block mb-3 text-muted">created by Behar Zenuni</small>
</div>
I want for the input field to already have "Fr." inside before a user puts a number in.

If I understand what you want, you want to add the "Fr." prefix and ".-" suffix to your value automatically, right? One way to do this is using the onBlur event, so when the user clicks / navigates out of the field, the code will add the rest.
An example, would be with your HTML being:
<input name="einkommen" type="text" value="" onblur="formatValue(this)">
and add this function to your Javascript:
ES5:
function formatValue(e) {
e.value = 'Fr. ' + e.value + '.-';
};
ES6:
const formatValue = e => e.value = `Fr. ${e.value}.-`;

I think this is what you want:
$(document).ready(function(){
sumValues = function() {
var num1;
var num3;
var num4;
num1 = 90000;
num3 = ((num1 * 0.12) - (num1 * 0.118)) / 12;
num4 = ((num1 * 0.12) - (num1 * 0.118)) * 15500;
$('input[name="txtnum1"]').val(num1);
$('input[name="txtres1"]').val('Fr. ' + Math.round(num3) + '.-');
$('input[name="txtres2"]').val('Fr. ' + Math.round(num4) + '.-');
$('input[name="txtnum1"]').addClass( "colored-background" );
};
})
.colored-background {
background: yellow !important;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="container">
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Einkommen</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="txtnum1" value="Fr. .-" readonly>
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Dein Ersparniss / Jahr</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="txtres1" value="Fr. .-" readonly>
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Dein Ersparniss / Jahr</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="txtres2" value="Fr. .-" readonly>
</div>
</div>
<input type="button" class="btn btn-danger" value="Berechnen" onClick="sumValues()">
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

Sending jQuery UI Slider value though a form

I'm using the jQuery UI Slider in a form that should submit the information to Velocify.
Everything gets sent correctly but the slider's value stays blank. Here is my code:
<form id="short-form" name="short-form" method="post" data-toggle="validator" role="form"
action="https://secure.velocify.com/Import.aspx?Provider=XXXXX&Client=XXXXX&CampaignId=XXXXX&URL=https://example.com/confirmation.php">
<input type="hidden" name="keyword" id="keyword" />
<div class="form-group">
<label class="loan-amount-label" for="_Requested_loan_amount">I'd like to borrow:</label>
<input type="text" id="_Requested_loan_amount" name="_Requested_loan_amount" class="loan-amount" readonly>
<p class="small">Drag the slider below to the amount you'd like to borrow</p>
<div id="slider"></div>
<div class="row slider-minmax">
<div class="col-xs-6 col-sm-6 col-md-6 text-left min">$2,501</div>
<div class="col-xs-6 col-sm-6 col-md-6 text-right max">$50,000</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-6 form-group">
<label for="_First_name" class="hidden">First Name</label>
<input type="text" class="form-control" id="_First_name" name="_First_name"
placeholder="First Name *" data-error="Please enter your first name." required>
</div>
<div class="col-sm-6 col-md-6 form-group">
<label for="_Last_name" class="hidden">Last Name</label>
<input type="text" class="form-control" id="_Last_name" name="_Last_name"
placeholder="Last Name *" data-error="Please enter your last name." required>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-6 form-group">
<label for="_Home_Phone" class="hidden">Phone Number</label>
<input type="text" class="form-control" id="_Home_Phone" name="_Home_Phone"
placeholder="Your Phone Number *" data-error="Please enter a valid phone number." required>
</div>
<div class="col-sm-6 col-md-6 form-group">
<label for="_Email_Address" class="hidden">Email</label>
<input type="email" class="form-control" id="_Email_Address" name="_Email_Address"
placeholder="Your Email *" data-error="Please enter a valid email address." required>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-6 form-group">
<label for="_Auto_year">Vehicle Year:</label>
<select class="form-control" id="_Auto_year" name="_Auto_year"
data-error="Please choose a vehicle year." required>
</select>
</div>
<div class="col-sm-6 col-md-6 form-group">
<label for="_Auto_make">Vehicle Make:</label>
<select class="form-control" id="_Auto_make" name="_Auto_make"
data-error="Please choose a vehicle make." required>
</select>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<div class="row">
<div class="col-xs-7 col-sm-8 col-md-8 form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block">
Get Started
</button>
</div>
<div class="col-xs-5 col-sm-4 col-md-4">
<div class="verify pull-right text-right">
</div>
</div>
</div>
</form>
The javascript:
<script>
$(function () {
$("#slider").slider({
value: 6500,
min: 2501,
max: 50500,
step: 500,
range: "min",
slide: function(event, ui) {
var x = Number(ui.value);
if (x > 2501) {
x = x - (x % 500);
}
$("#_Requested_loan_amount").val('$' + addCommas(x));
}
});
$("#_Requested_loan_amount").val('$' + addCommas($("#slider").slider("value")));
function addCommas(nStr) {
var x = Number(nStr);
if (x > 2501) {
x = x - (x % 500);
}
nStr = x.toString();
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
});
</script>
When I submit the form to my test page using
<?php echo $_POST["_Requested_loan_amount"]; ?>
I see the field value generates correctly so I'm not sure why it isn't sending that value to Velocify.
Thanks!

Form field values sum in jQuery

I can't seem to get this to work for a project I'm doing. Basically I'm trying to get the values in the "Revenue" fields to total at the bottom in the "Total Revenue" field.
I've made a JSFiddle which hopefully will make it easier to understand-
HTML markup:
<div class="form-group">
<label class="control-label col-md-2">April</label>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">$</span><input class="form-control" name="AprilInput" placeholder="eg. 35,328" type="text" id="AprilInput"></input>
</div>
</div>
<label class="control-label col-md-1">Revenue</label>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">$</span><input class="form-control" name="Output" id="AprilOutput" placeholder="0" type="text" readonly></input>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">May</label>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">$</span><input class="form-control" name="MayInput" placeholder="eg. 35,328" type="text" id="MayInput"></input>
</div>
</div>
<label class="control-label col-md-1">Revenue</label>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">$</span><input class="form-control1" name="Output" id="MayOutput" placeholder="0" type="text" readonly></input>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">June</label>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">$</span><input class="form-control" name="JuneInput" placeholder="eg. 35,328" type="text" id="JuneInput"></input>
</div>
</div>
<label class="control-label col-md-1">Revenue</label>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">$</span><input class="form-control1" name="Output" id="JuneOutput" placeholder="0" type="text" readonly></input>
</div>
</div>
</div>
<br/>
<span class="form-horizontal">
<div class="row">
<div class="col-lg-12">
<div class="widget-container fluid-height clearfix">
<div class="heading">
<i class="icon-reorder"></i>Annual Total
</div>
<div class="widget-content padded">
<div class="form-group">
<label class="control-label col-md-6">Total Revenue</label>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">$</span><input class="form-control" name="TotalOutput" id="TotalOutput" placeholder="0" type="text" readonly></input>
</div>
</div>
</div>

You could tidy the code up a little:
function SetupInput(obj,output,sumfunction){
$(obj).keyup(function(){
var n = parseInt($(this).val());
var n = this.value.replace(/,/g, "");
if(n <= 155000) {
$(output).val(numberWithCommas((n/100*70).toFixed(0)));
}
else if(n <= 175000) {
$(output).val(numberWithCommas((n/100*75).toFixed(0)));
}
else {
$(output).val(numberWithCommas((n/100*80).toFixed(0)));
}
sumfunction();
});
}
SetupInput($('#AprilInput')[0],$('#AprilOutput')[0],calculateSum);
SetupInput($('#MayInput')[0],$('#MayOutput')[0],calculateSum);
SetupInput($('#JuneInput')[0],$('#JuneOutput')[0],calculateSum);
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
}
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".form-control1").each(function() {
//add only if the value is number
var value=this.value.replace(',','');//remove ','
if(!isNaN(value) && value.length!=0) {
sum += parseFloat(value);
console.log(this.id,sum);
}
});
//.toFixed() method to roundoff the final sum
$("#TotalOutput").val(sum.toFixed(0));
}
Check out the jsfiddle: http://jsfiddle.net/2jY6P/43/

You are looping though Output tag. Change it to .form-contol:
$(".form-control").each(function() { /* ... */ }
And not .html, but .val():
`$("#TotalOutput").val(sum.toFixed(0));`

i edited you code: http://jsfiddle.net/2jY6P/38/
changed:
$(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
$("input[name='Output']").keyup(function(){
calculateSum();
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$("input[name='Output']").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method to roundoff the final sum
$("#TotalOutput").val(sum.toFixed(0));
}
$('Output') should be input $("[name='Output']")
$("#TotalOutput").html(sum.toFixed(0));
should be $("#TotalOutput").val(sum.toFixed(0));

I put some changes in
http://jsfiddle.net/2jY6P/39/
$(document).keyup(function() {
var sumRevenue = 0;
$.each($(".revenue"), function() {
var val = $.trim($(this).val());
if(val != "")
sumRevenue += parseFloat(val);
});
$("#sumrevenue").val(sumRevenue);
});

function calculateTotalREv(){
var totalRev = 0;
$("input[name='Output']").each(function() {
totalRev = eval(total+parseFloat($(this).val()));
});
alert(totalRev);
}
calculateTotalREv();