I'm getting the value of a Stripe transaction fee and displaying it via a disabled text field.
There is a large gap in the sentence due to the input text field
This is the amount $3.50____________that needs to be paid.
What I need: (Need to close the gap)
This is the amount $3.50 that needs to be paid.
How can I change this code to use an auto width on the text field or change the code to use a span to grab the transaction fee value?
This is the line I would like to change:
<input size='5' id="p-charge" type="number" disabled>
Codepen if needed: https://codepen.io/daugaard47/pen/JwLRvZ
var Pgoal = document.querySelector('.p-goal');
var Ffixed = document.querySelector('#f-fixed');
var Fpercent = document.querySelector('#f-percent');
var Pcharge = document.querySelector('#p-charge');
var checkbox = document.querySelector('#gift-check');
var totalBox = document.querySelector('.total-box');
var totalDonation = $('.total-box > span');
function f(n) {
return Number((+n).toFixed(10));
}
function calcPcharge(goal, fixed, percent) {
return (goal + fixed) / (1 - percent) - (goal);
}
function update() {
console.log('update')
var charge = calcPcharge(
f(Pgoal.value),
f(Ffixed.value),
f(Fpercent.value / 100)
);
Pcharge.value = (charge || 0).toFixed(2);
var total = checkbox.checked ? f(Pgoal.value) + f(charge) : f(Pgoal.value);
totalDonation.text(total.toFixed(2));
document.querySelector("input[name='amount']").value = total;
}
[].forEach.call(document.querySelectorAll('input'), function() {
this.addEventListener('input', update);
this.addEventListener('change', update);
});
update();
checkbox.addEventListener('change', update);input[type="number"]:disabled {
background-color: transparent;
border-style: none;
text-decoration: underline;
color: tomato
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><h2>Cost $<span class="total-box"><span></span></span></h2><span>$</span><input type="number" min="1.00" max="200000.00" step="0.01" value="60" id="other_amount" name="other_amount" class="p-goal"><span>USD</span><input type="hidden" id="f-fixed" type="number" value="0.30"><input type="hidden" id="f-percent" type="number" value="2.9"><p>Gift transaction fee of $ <input size='5' id="p-charge" type="number" disabled> so we can get 100% of your payment?</p><input type="checkbox" value="yes" name="yes" id="gift-check" autocomplete="off">Yeah, Sure!<p>Total Amount $<span class="total-box"><span></span></span></p>