[英]How to reset the specific input field with either the entered amount and total sum amount from buttons?
I have a working sum amount and reset button for specific field that only works when not inside a form tag but I need to put all the input fields and amount buttons inside a form tag so there would be a validation before submit.我有一个特定字段的工作总金额和重置按钮,仅当不在表单标签内时才有效,但我需要将所有输入字段和金额按钮放在表单标签内,以便在提交之前进行验证。
The process should be like this:过程应该是这样的:
-When the customer click multiple buttons with specified amount, the total amount will display on a field. -当客户点击指定金额的多个按钮时,总金额将显示在一个字段上。
-When customer click the reset, the specific field should be reset. -当客户单击重置时,应重置特定字段。
But the problem is that when the total amount displayed on the field is reset then the customer click a button again, the amount will just add to the total that was cleared .但问题是,当字段上显示的总金额被重置然后客户再次单击按钮时,金额只会添加到已清除的总金额中。 But when I remove the form tag, the reset button is actually working but the validation on submit button will not work.但是当我删除表单标签时,重置按钮实际上正在工作,但提交按钮的验证将不起作用。
So what would be the alternative way to do if I don't remove the form tag?那么,如果我不删除表单标签,另一种方法是什么?
My codes and jsfiddle is attached bellow:我的代码和 jsfiddle 附在下面:
//Total Amount Sum Calculator var sum = 0; function f(val){ sum += val; document.getElementById("deposit-total").value = sum; } function reset(){ sum = 0; document.getElementById("deposit-total").value = 0; } //Automatic Comma function FormatCurrency(ctrl) { //Check if arrow keys are pressed - we want to allow navigation around textbox using arrow keys if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) { return; } var val = ctrl.value; val = val.replace(/,/g, "") ctrl.value = ""; val += ''; x = val.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'); } ctrl.value = x1 + x2; } //Restrict Characters (Numbers Only) function CheckNumeric() { return event.keyCode >= 48 && event.keyCode <= 57 || event.keyCode == 46; } function submitForm() { return confirm('Do you really want to submit the form?'); }
<form> <input type="number" class="input-char-amo" id="deposit-total" step="10000" min="10000" max="5000000" onkeypress="return CheckNumeric()" required> <button type="reset" id="reset" class="correction" onclick="reset()">reset</button><br> <div class="amount-buttons-a"> <button type="button" id="1" onclick="f(10000)" class="btn-amount">10000</button> <button type="button" id="2" onclick="f(20000)" class="btn-amount">20000</button> <button type="button" id="3" onclick="f(50000)" class="btn-amount">50000</button> </div> <div class="amount-buttons-b"> <button type="button" id="4" onclick="f(100000)" class="btn-amount">100000</button> <button type="button" id="5" onclick="f(500000)" class="btn-amount">500000</button> <button type="button" id="6" onclick="f(1000000)" class="btn-amount">1000000</button> </div> <p class="check-acc">input here</p> <input type="text" class="input-check-acc" id="check-account" required> <br> <button id="dep-submit" value="submit" type="submit" >신청 </button> </form>
This should do the work for you, you cant use reset at function since is used by default from js这应该为您工作,您不能在 function 使用重置,因为默认情况下从 js 使用
//Total Amount Sum Calculator var sum = 0; function f(val){ sum += val; document.getElementById("deposit-total").value = sum; }; function resets(){ sum = 0; document.getElementById("deposit-total").value = 0; } //Automatic Comma function FormatCurrency(ctrl) { //Check if arrow keys are pressed - we want to allow navigation around textbox using arrow keys if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) { return; } var val = ctrl.value; val = val.replace(/,/g, "") ctrl.value = ""; val += ''; x = val.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'); } ctrl.value = x1 + x2; } //Restrict Characters (Numbers Only) function CheckNumeric() { return event.keyCode >= 48 && event.keyCode <= 57 || event.keyCode == 46; } function submitForm() { return confirm('Do you really want to submit the form?'); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <input type="number" class="input-char-amo" id="deposit-total" step="10000" min="10000" max="5000000" onkeypress="return CheckNumeric()" required> <button type="reset" id="reset" class="correction" onclick="resets()">reset</button><br> <div class="amount-buttons-a"> <button type="button" id="1" onclick="f(10000)" class="btn-amount">10000</button> <button type="button" id="2" onclick="f(20000)" class="btn-amount">20000</button> <button type="button" id="3" onclick="f(50000)" class="btn-amount">50000</button> </div> <div class="amount-buttons-b"> <button type="button" id="4" onclick="f(100000)" class="btn-amount">100000</button> <button type="button" id="5" onclick="f(500000)" class="btn-amount">500000</button> <button type="button" id="6" onclick="f(1000000)" class="btn-amount">1000000</button> </div> <p class="check-acc">input here</p> <input type="text" class="input-check-acc" id="check-account" required> <br> <button id="dep-submit" value="submit" type="submit" >신청 </button> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.