今回は過去にあった案件の中から、入力フォームに税込価格自動計算の機能を実装したので今回はソースコードを紹介しようと思います!
目次
実際の表示
フォームに数字を入力すると自動で税込の金額が表示されます。
デフォルトで軽減税率対象商品のチェックが入っているので、数字を入力すると8%で税込金額が表示されます。
チェックを外すと税率が10%に変更されます。
初期表示は「 ー 円」となっています。負の数や数字以外を入力しても「 ー 円」のまま表示は変わりません。
デフォルトで軽減税率対象商品のチェックが入っているので、数字を入力すると8%で税込金額が表示されます。
チェックを外すと税率が10%に変更されます。
初期表示は「 ー 円」となっています。負の数や数字以外を入力しても「 ー 円」のまま表示は変わりません。
円(税抜)
ソースコード例
HTMLソースコード
PR
<div class="form-group">
<label for="taxExclude" class="form-group__heading">
販売価格(税別)<span class="required-badge">必須</span>
</label>
<div class="form-content">
<input type="number" id="taxExclude" name="taxExclude" min="0" required>
<span>円(税抜)</span>
<span id="taxInclude"></span>
</div>
</div>
<div class="form-group">
<input id="taxCheck" type="checkbox" checked>
<label for="taxCheck">軽減税率対象商品</label>
</div>
CSSソースコード
.form-group:nth-of-type(n+2) {
margin-top: 20px;
}
.form-group__heading {
position: relative;
display: flex;
align-items: center;
font-weight: 700;
}
.form-group__heading::before {
content: "";
display: inline-block;
width: 6px;
height: 30px;
margin-right: 10px;
border-radius: 5px;
background-color: #094;
}
.required-badge {
padding: 4px 8px;
margin-left: 20px;
font-size: 12px;
display: inline-block;
font-weight: 700;
line-height: 1;
color: #fff;
background-color: #dc3545;
text-align: center;
border-radius: 3px;
}
.form-content {
margin-top: 20px;
}
input[type="number"] {
width: 150px;
padding: 12px;
font-size: 14px;
line-height: 100%;
border-radius: 8px;
border: 1px solid #ddd;
}
#taxInclude {
font-weight: 700;
margin-left: 20px;
}
@media screen and (max-width: 480px) {
#taxInclude {
display: block;
margin-left: 0;
margin-top: 20px;
}
}
JavaScriptソースコード
純粋なJavaScriptの場合
const taxExcluded = document.querySelector('#taxExclude');
const taxIncluded = document.querySelector('#taxInclude');
const taxCheck = document.querySelector('#taxCheck');
function updateTaxIncludedPrice() {
const taxRate = taxCheck.checked ? 1.08 : 1.10;
const excludedPrice = parseFloat(taxExcluded.value);
if (isNaN(excludedPrice) || excludedPrice <= 0) {
taxIncluded.textContent = '販売価格:ー 円';
} else {
const priceVal = Math.round(excludedPrice * taxRate);
taxIncluded.textContent = `販売価格:${priceVal}円(税込)`;
}
}
taxExcluded.addEventListener('input', updateTaxIncludedPrice);
taxCheck.addEventListener('change', updateTaxIncludedPrice);
updateTaxIncludedPrice();
jQueryを使用した場合
const taxExcluded = jQuery('#taxExclude');
const taxIncluded = jQuery('#taxInclude');
const taxCheck = jQuery('#taxCheck');
function updateTaxIncludedPrice() {
const taxRate = taxCheck.prop('checked') ? 1.08 : 1.10;
const excludedPrice = parseFloat(taxExcluded.val());
if (isNaN(excludedPrice) || excludedPrice <= 0) {
taxIncluded.text('販売価格:- 円');
} else {
const priceVal = Math.round(excludedPrice * taxRate);
taxIncluded.text(`販売価格:${priceVal}円(税込)`);
}
}
taxExcluded.on('change input', updateTaxIncludedPrice);
taxCheck.on('change input', updateTaxIncludedPrice);
updateTaxIncludedPrice();