Question

无法重置jQuery中的数据。我正在尝试使用jQuery保存数据。但是，当我单击“删除字形图标”时，该数据不会在表格中重置。我尝试了一个代码，但是没有用。当我单击删除图标时，数据也被保存。我被卡在重置代码中。使用字形图标来保存和重置数据。我不希望在Ajax中中止。

//Banking details form validation
$(document).ready(function() {
  $('.editBankDetailBtn').click(function() {
    if ($('.editBankDetail').is('[readonly]')) { //checks if it is already on readonly mode
      $('.editBankDetail').prop('readonly', false); //turns the readonly off

      $('.editBankDetailBtn').html('<span class="glyphicon glyphicon-floppy-disk">&nbsp;</span>' + '<span id="reset-form" class="glyphicon glyphicon-remove">&nbsp;</span>');
      //  $('.glyphicon-remove')[0].reset();

    } else { //else we do other things

      var patt = /^([0-9]{11})|([0-9]{2}-[0-9]{3}-[0-9]{6})$/;
      var reg = /^[A-Za-z]{4}[0-9]{6,7}$/;
      patt.test('acdbdfdsfsf22-333-666666'); // true

      var bname_1 = document.getElementById('bankName').value;

      if (bname_1 == "") {

        document.getElementById('bankName').style.borderColor = "red";
        return false;
      } else {
        document.getElementById('bankName').style.borderColor = "#cccccc";
      }

      var aaccount_number = document.getElementById('accountNumber');
      if (!patt.test(aaccount_number.value)) {

        document.getElementById('accountNumber').style.borderColor = "red";
        return false;
      } else {
        document.getElementById('accountNumber').style.borderColor = "#cccccc";
      }

      var bifsc = document.getElementById('ifscCode').value;

      if (!reg.test(ifscCode.value)) {

        document.getElementById('ifscCode').style.borderColor = "red";
        return false;
      } else {
        document.getElementById('ifscCode').style.borderColor = "#cccccc";
      }

      var bank_address = document.getElementById('branchAddress').value;

      if (bank_address == "") {

        document.getElementById('branchAddress').style.borderColor = "red";
        return false;
      } else {
        document.getElementById('branchAddress').style.borderColor = "#cccccc";
      }

      $('.editBankDetail').prop('readonly', true);
      $('.editBankDetailBtn').html('<span class="glyphicon glyphicon-pencil">&nbsp;</span>');

    }
    $(document).ready(function() {
      $('.glyphicon-remove').on('click', function() {
        $("#reset-form").trigger("reset");
      });

    });

  });
});

function saveBankDetail() {

  $.ajax({
    url: '${pageContext.request.contextPath}/update-bankdetail.html',
    type: "post",
    data: {
      bankName: $('#bankName').val(),
      branchAddress: $('#branchAddress').val(),
      accountNumber: $('#accountNumber').val(),
      ifscCode: $('#ifscCode').val(),

    }

  });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

您在$(document).ready(...)中有$(document).ready(...)。请注意，该事件仅触发一次，这意味着内部事件永远不会触发。您还嵌套了click事件（不推荐）。

您的代码应类似于：

$(document)
        .ready(
            function() {
                $('.editBankDetailBtn').click(function() {
                       ...
                };

                $('.glyphicon-remove').on('click', function() {
                       $("#reset-form").trigger("reset");
                });
...

无法重置数据表单

1 个答案: