Как сбросить определенное поле ввода с помощью введенной суммы и общей суммы с кнопок?

Question

У меня есть рабочая сумма суммы и кнопка сброса для определенного поля , которая работает, только когда нет внутри тега формы , но мне нужно поместить все входные данныеполя и кнопки количества внутри тега формы, поэтому перед отправкой будет проверка.

Процесс должен выглядеть следующим образом:

-Когда клиент нажимает несколько кнопок с указанным количеством, общая сумма будет отображаться в поле.

-Когда клиент нажимаетсбросить, конкретное поле должно быть сброшено.

Но проблема в том, что когда общая сумма, отображаемая в поле, сбрасывается, то клиент снова нажимает кнопку, сумма просто добавляется к общей сумме, котораябыл очищен . Но когда я удаляю тег формы, кнопка сброса фактически работает, но проверка на кнопку отправки не будет работать.

Так что же можно сделать, если я не удаляю тег формы?

Мои коды и 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>

Answer 1

reset является зарезервированным ключевым словом для JavaScript. Если вы хотите увидеть все зарезервированные слова, посмотрите, что ссылка .

Просто измените имя функции reset() на другое имя.

Answer 2

Это должно сработать за вас, вы не можете использовать сброс в функции, так как используется по умолчанию от 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>