How to reset the specific input field with either the entered amount and total sum amount from buttons?

Question

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:

 //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>

Answer 1

This should do the work for you, you cant use reset at function since is used by default from 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>

Answer 2

reset is a reserved keyword for javascript. If you want to see all reserved words, please look that link .

Just change the function name of reset() to another name.